Back to templates
Add a streaming AI chatbot using Netlify's AI Gateway — access Claude, GPT, or Gemini with zero API keys. The gateway handles auth, rate limiting, and monitoring automatically.
Using your project's framework and Netlify's built-in AI Gateway, add a streaming AI chat interface to this site.
Chat purpose: {{CHAT_PURPOSE}}
AI provider (defaults to OpenAI if not specified): {{PROVIDER}}
Placement (defaults to a floating widget in the bottom-right corner if not specified): {{PLACEMENT}}
The implementation should:
1. **Backend — Netlify Function** at `netlify/functions/chat`:
- Accept POST requests with a `messages` array (OpenAI chat format: `{ role, content }`).
- Use the appropriate provider SDK (`openai`, `@anthropic-ai/sdk`, or `@google/generative-ai`). Netlify AI Gateway auto-sets the base URL via environment variables — **no API keys needed.** The SDK picks up the gateway URL automatically.
- Stream the response back. Return a `Response` with the stream and `Content-Type: text/event-stream`.
- Include a system prompt that scopes the assistant's behavior to {{CHAT_PURPOSE}}. Keep it in a clearly marked constant so it's easy to edit.
- Limit conversation history to the last 20 messages to control token usage.
2. **Frontend — Chat UI** at {{PLACEMENT}}:
- Message history area showing user and assistant messages.
- Text input with send button. Enter to send, Shift+Enter for newlines.
- Stream the assistant's response progressively so text appears token-by-token.
- Match the site's existing design.
3. Install the provider SDK as a dependency.
Variables
Which AI provider to use. Defaults to OpenAI/GPT.
Where to place the chat interface on the site. Defaults to a floating widget in the bottom-right corner.
What the chatbot should help with — this becomes the system prompt that guides the AI's behavior.
Did you find this doc useful?
Your feedback helps us improve our docs.