---
title: Build an AI chat app with streaming responses
description: Build a chat interface with the AI SDK and AI Gateway, including streamed responses, cancellation, and recoverable errors.
url: "https://vercel.com/kb/prompts/build-ai-chat-app"
last_updated: 2026-11-07
related_resources:
  "[Build an AI SDK chatbot](https://ai-sdk.dev/docs/ai-sdk-ui/chatbot)": "Connect streamed messages, chat state, and error handling to your interface."
  "[AI Gateway](/docs/ai-gateway)": "Connect your app to model providers through AI Gateway."
---

# Build an AI chat app with streaming responses

Build a chat interface with the AI SDK and AI Gateway, including streamed responses, cancellation, and recoverable errors.

Build a chat app that streams responses as they arrive and lets people stop or retry a request. This prompt keeps the first version focused on one conversation and its core interactions.

Start in an empty workspace, or open or import your existing app in your coding agent. Live responses require model access through AI Gateway. The handoff transfers prompt text, so provide repository access and configure credentials separately.

Expect a locally runnable interface, repeatable tests, and clear setup instructions. Fixture mode can support development without model access; it does not demonstrate live provider behavior.

## Agent prompt

```text
Build an AI chat app using the AI SDK and Vercel AI Gateway, with streamed responses, cancellation, and recoverable errors.

Read repository instructions and inspect the framework, package manager, installed SDK versions, UI components, and tests. Preserve existing patterns. If I intend to extend an existing app but the repository is unavailable, ask me to open or import it first. In an empty workspace, choose a small Next.js app. Check documentation compatible with the installed SDK before choosing APIs; avoid an unrelated framework or SDK migration.

Keep the first version to text chat with conversation history in the current session. Reuse existing persistence if present, including its ownership checks; otherwise explain that reloading clears the conversation. Leave uploads, retrieval, tools, and new account or database systems outside this task.

Build a readable message list, labeled input, submit and stop controls, and visible pending, completed, stopped, and failed states. Preserve failed user input for retry. Keep partial output identifiable after cancellation or a stream failure, and avoid duplicate messages when retrying. Support keyboard operation and visible focus. Announce useful status changes without reading every streamed token or moving focus unexpectedly. Render model output safely rather than executing generated HTML.

Make model requests on the server and keep credentials out of browser code and logs. Use the project's configured model; if none exists, ask for a supported choice rather than inventing an identifier. While credentials or that choice are missing, use clearly labeled fixture responses and document what remains unverified. Validate message shape, roles, and size server-side, keep system instructions server-controlled, and bound history and generation work. Preserve existing authentication and usage controls. Identify the access and abuse controls required before exposing a new app publicly.

Use existing test tools with controlled provider responses to cover a successful stream, empty or oversized input, failure before and after output begins, cancellation, and retry without duplication. Verify that a stopped request cannot later append stale output. Check private conversation access if persistence exists. Distinguish fixture checks from an approved live model test, and run relevant type, lint, and UI checks.

Proceed with local implementation. Ask before paid inference, provisioning services, or deployment. Report changed behavior, commands and results, unrun checks, configuration names without secret values, local run steps, and remaining release requirements.
```

## Related resources

- [Build an AI SDK chatbot](https://ai-sdk.dev/docs/ai-sdk-ui/chatbot): Connect streamed messages, chat state, and error handling to your interface.

- [AI Gateway](/docs/ai-gateway): Connect your app to model providers through AI Gateway.

## Try other prompts

- [Add a tool to an existing agent](/kb/prompts/add-agent-tool): Extend your agent with one focused tool, including validated inputs, server-side permissions, and tests for service failures.

- [Keep AI responses available with model fallbacks](/kb/prompts/add-ai-gateway-model-fallbacks): Configure AI Gateway fallbacks for an existing generation flow, checking model compatibility, error handling, and retry boundaries.

## Reference Architecture

Choose a stack and work through the decisions behind it, with curated documentation, guides, templates, and courses to help you build.

- [Agent stack](/kb/architecture/agents): Build and operate agents with models, tools, and durable workflows.
- [Web applications](/kb/architecture/web): Choose rendering, data, authentication, and caching approaches.
- [Backends](/kb/architecture/backends): Choose a runtime, connect services, and run background work.

[Browse all stacks](/kb/architecture)

## Build with prompts

Build an app, extend an agent, or improve your project with ready-to-use prompts for your coding agent.

[Browse the prompt library](/kb/prompts) · [Read the Markdown index](/kb/prompts.md)