AI Chatbot for a Website

Build an embeddable AI-powered chat widget that answers questions using an LLM API, with streaming responses and persisted conversation history.

Intermediate1 day

See the build prompt Browse AI coding tools

Stack

Technology used

Next.js
TypeScript
Claude API
Tailwind CSS
Postgres

Required tools

AI coding tools you'll need

Claude Code
Cursor

What you'll learn

Skills you'll practice

How to call an LLM API from a server route and stream the response back to the browser
How to design a chat UI with message history and a streaming indicator
How to ground responses in your own content using a system prompt and retrieved context
How to persist conversations so a user can resume where they left off
How to rate-limit and guard an AI endpoint against abuse

Build process

Step-by-step build

1
Scaffold and get API access
Set up a Next.js + TypeScript project and get access to an LLM API such as the Claude API.
2
Build the chat UI
Build a message list, input box, and send button styled as a floating widget.
3
Create the chat API route
Accept a message plus conversation history and call the LLM API from a server route.
4
Stream the response
Stream the model's response back to the client token-by-token so the UI updates live.
5
Write a grounding system prompt
Define the assistant's context, tone and boundaries for your product or company.
6
Add simple retrieval
Store a few FAQ/help documents and inject the most relevant ones into the prompt context.
7
Persist conversations
Save conversations per session or per logged-in user so history survives a page reload.
8
Add rate limiting
Limit messages per IP or session to control abuse and cost.
9
Add a fallback
Handle API errors or timeouts with a graceful fallback response.
10
Embed and deploy
Embed the widget on a test page and deploy.

Starter prompt

Paste this into your AI coding tool

Adapt the placeholders in brackets to your own product, then iterate on the result step by step rather than expecting a perfect first pass.

Prompt

Build an embeddable AI chat widget using Next.js App Router, TypeScript and Tailwind CSS, backed by the Claude API. Build a floating chat button that expands into a chat window with a scrollable message list and an input box. Create a POST /api/chat route that accepts the current message and prior conversation history, calls the Claude API with a system prompt describing the assistant as a helpful support agent for [Product Name], and streams the response back to the client so text appears incrementally rather than all at once. Store a small array of 5 FAQ entries in a lib/faqs.ts file and, before calling the model, do a simple keyword match to inject the most relevant FAQ content into the system prompt as grounding context. Persist each conversation's messages in a Postgres table keyed by a session ID stored in a cookie, so reloading the page restores the conversation. Add basic rate limiting (e.g. max 20 messages per session per hour) and a graceful error message if the API call fails.

SEO

SEO considerations

The chat widget itself should not block or delay indexing of the underlying page's content
Lazy-load the chat widget's JavaScript so it doesn't hurt the host page's Core Web Vitals
Keep chat conversation URLs and API routes out of the sitemap and disallowed in robots.txt
If the chatbot ever generates public-facing content pages, review them for accuracy before they're indexable
Keep the host page's own metadata, headings and content independent of the chat widget's presence

Ship it

Deployment steps

Store the LLM API key as a server-only environment variable, never exposed to the client
Deploy to a host that supports streaming responses (Vercel Edge or Node runtime both work)
Provision a small Postgres database for conversation history
Add logging and monitoring on the chat API route to track usage and error rates
Set a budget alert with your LLM provider to catch runaway usage early

Keep building