Welcome to the forefront of conversational AI as we explore the fascinating world of AI chatbots in our dedicated blog series. Discover the latest advancements, applications, and strategies that propel the evolution of chatbot technology. From enhancing customer interactions to streamlining business processes, these articles delve into the innovative ways artificial intelligence is shaping the landscape of automated conversational agents. Whether you’re a business owner, developer, or simply intrigued by the future of interactive technology, join us on this journey to unravel the transformative power and endless possibilities of AI chatbots.
A couple of months ago, I built an AI chatbot using React, Node.js, and Vercel Serverless Functions, which I have used in my web app. Here’s how I did it:
How does it work?
Browser → Vercel function → Gemini API → Response is streamed back to the browser, chunk by chunk, so the response from the backend would be sent in chunks instead of making the user wait long.process.env.GOOGLE_API_KEY would contain the Gemini API’s key for local development, and add the same variable in Vercel project's dashboard (Settings → Environment Variables) before deploying so that the API key value will be picked up when the application is hosted.
Request
What does the handler do?
Before starting to develop the frontend, confirm if the serverless function actually streams chunks using CURL request.
The -N flag disables curl's output buffering, so you will see text appear incrementally rather than all at once, that's your confirmation the streaming is working end to end.
Below is the function invoked when the user types a prompt and clicks the send button.getReader() gives you a ReadableStreamDefaultReader on the response body, and TextDecoder turns each raw chunk of bytes into text. This pattern is less common than a typical fetch().then(res => res.json()) call, so it is worth pausing on if you haven't streamed a fetch response before.
Once the function and UI work locally, you are basically there:
CORS for embedded widgets if your widget runs on a different domain than your Vercel app, you must handle the OPTIONS preflight and set Access-Control-Allow-Origin
Plain-text chunk streaming is a way to make a chatbot feel responsive on Vercel instead of waiting for the entire response from the API.
Next steps:
If you build something, I would love to hear about it.
What are you planning to build with Gemini + Vercel?
Have a blessed week 😇
Lessons Learned Building an AI Chatbot