An AI-Enabled Framework? Using LLMs to Put People First
summary
Live-coding builds a Nuxt 3 prototype that uses OpenAI (GPT‑3.5) to take the app’s current JSON state plus a natural‑language prompt and return concrete UI changes; runtime‑compiled Vue templates and a GraphQL (Saleor-like) query reload dynamically, producing a table, currency symbols, thumbnails and bolded headers during the demo. Implementation uses Bun, Nitro server endpoints, the OpenAI chat completions API and isomorphic fetch; validation suggestions include Zod/vite checks. Code is promised to be pushed to a public repo. Nuxt 3 GPT‑3.5 runtime-compiled Vue templates
AI-written summary · about
chapters (20)
- 0:00Introduction
- 0:18About me
- 1:27Where I am
- 3:33KN
- 5:22The problem with web applications
- 9:38Getting started
- 12:30Creating an API endpoint
- 13:55Setting the environment variable
- 14:20Accessing OpenAI
- 17:35Creating a Prompt
- 18:52Code Walkthrough
- 21:02Changing the App
- 23:32Making a malleable component
- 27:32Testing
- 28:22Status
- 29:49Table
- 33:17Questions
- 34:57What problem does NXJ solve
- 37:52How can we validate
- 40:02Future of interacting with AI
related talks
57mSmart Chat App with Vue, AI and Serverless Function Solution LIVE
05mBuild a Smart Chat App with Vue, AI, and Serverless Function
24mEmpowering Vue Apps with AI
31mAdaptive UIs with Vue and AI: What If Your UI Could Build Itself?
49mThe Importance & Usage of AI in Vue.js
49mBuilding AI Enabled Web Apps
44mUnleashing the Power of AI: Integrating Tiptap, OpenAI, and Vue.js
04mLightning Fast AI Chatbots in Nuxt