---
title: "FastAPI AI Chat with WebSocket"
description: "A real-time AI chat application using Next.js, FastAPI, WebSocket, and the Python AI SDK."
url: "https://vercel.com/templates/next.js/fastapi-ai-chat-with-websocket"
links:
  repository: "https://github.com/vercel/examples/tree/main/websockets/"
  demo: "https://fastapi-ai-chat.vercel.app/"
  deploy: "https://vercel.com/new/clone?demo-title=FastAPI+AI+Chat+with+WebSocket&demo-description=A+real-time+AI+chat+application+using+Next.js%2C+FastAPI%2C+WebSocket%2C+and+the+Python+AI+SDK.&demo-url=https%3A%2F%2Ffastapi-ai-chat.vercel.app%2F&demo-image=%2F%2Fimages.ctfassets.net%2Fe5382hct74si%2F1Et6gJBGkFFNUeqV8bZS2U%2Fc74b857c0e22458c84055dcb2f4890ab%2Ffastapi-ai-chat.vercel.app_.png&project-name=FastAPI+AI+Chat+with+WebSocket&repository-name=fastapi-ai-chat-with-websocket&repository-url=https%3A%2F%2Fgithub.com%2Fvercel%2Fexamples%2Ftree%2Fmain%2Fwebsockets%2F&from=templates&skippable-integrations=1"
---

# FastAPI AI Chat with WebSocket

A real-time AI chat application using Next.js, FastAPI, WebSocket, and the Python AI SDK.

# FastAPI AI Chat with WebSocket

A real-time AI chat application using **Next.js** (frontend), **FastAPI** (backend), **WebSocket** for streaming, and the [Python AI SDK](https://github.com/vercel-labs/ai-python) for LLM integration. Deployed on Vercel using [Services](https://vercel.com/docs/services).

## Demo

https://fastapi-ai-chat.vercel.app/

### How It Works

- The **frontend** is a Next.js single-page app with a chat UI that connects to the backend via WebSocket.
- The **backend** is a FastAPI server that accepts WebSocket connections, streams LLM responses using the Python AI SDK, and sends text deltas back to the client in real time.
- On Vercel, the frontend and backend run as separate services routed by path prefix (`/` and `/api`).

## How to Use

### Local Development

```bash
# Clone
npx giget@latest gh:vercel/examples/websockets/fastapi-ai-chat fastapi-ai-chat
cd fastapi-ai-chat

# Set your AI Gateway API key
echo "AI_GATEWAY_API_KEY=your-key-here" > .env

# Run both services
vercel dev
```

Open [http://localhost:3000](http://localhost:3000).

### Environment Variables

| Variable | Description |
|---|---|
| `AI_GATEWAY_API_KEY` | Vercel AI Gateway API key (required) |
| `AI_MODEL` | Model to use<br>(default: `anthropic/claude-sonnet-4-6`) |

## Learn More

- [Vercel Services](https://vercel.com/docs/services) - learn how services work on Vercel.
- [AI Gateway](https://vercel.com/docs/ai-gateway) - learn about AI Gateway.

---

## Additional documentation

The [Vercel Knowledge Base](https://vercel.com/kb) contains guides and answers to common questions about Vercel, including deployment, framework configuration, domains, caching, and troubleshooting.