Smart Chat App with Vue, AI and Serverless Function Solution LIVE
summary
Creates a real time Vue chat that keeps the OpenAI key on the server and uses a serverless function (Nefy/Netlify style) to call GPT 4o so clients never see the secret. Client uses a Vite boilerplate, TanStack Query for mutations, and a composable that POSTs queries, pushes a history array, and replaces a typing indicator placeholder when the assistant reply arrives. Implements serverless function endpoint with try/catch and returns JSON, plus OpenAI API key in server env, and the demo works end to end.
AI-written summary · about
chapters (10)
- 0:00Introduction
- 2:34Serverless chat function
- 8:22Chat input component
- 16:38Chat mutations composable
- 31:33Chat message component
- 38:23Conversation history
- 41:39Chat API error handling
- 47:55Loading and error states
- 53:04Deployment tips
- 53:26Q&A
related talks
30mVue Crash Course: What Can You Build in 20 Minutes?
04mLightning Fast AI Chatbots in Nuxt
45mAn AI-Enabled Framework? Using LLMs to Put People First
24mFull Stack Web Development with AI
24mEmpowering Vue Apps with AI
26mUnleashing the power of AI: Integrating Tiptap OpenAI and Vue.js
49mBuilding AI Enabled Web Apps
23mFull Stack Vue in the Era of Serverless Computing