Chat Starter
A working AI chat app, free and deployable in a click. The app sidebar, a pill composer with model chip and stop control, a thinking indicator, streamed replies with copy and read-aloud actions, and a chat history rail that lives in the visitor's browser. Behind it, one route reads your provider key server-side and streams answers with the Vercel AI SDK. Everything installs as source, so it is yours to change.
What can I help with?
This chat runs against your own API key. History stays in this browser.
Deploy to Vercel
Click Deploy, paste one API key when Vercel asks for it, and the first deploy already answers. Vercel copies the starter into your own GitHub account and builds it there. The key goes straight into your project's environment and never touches BoardUI.
Requests bill to whoever owns the key, and anyone with the URL can send them. Create the key with a spending limit, and put a rate limit in front of /api/chat before pointing the public at it.
Installation
Already have a Next.js project? The same screen installs with the CLI, runtime included.
Dark mode ready - this component follows BoardUI semantic tokens automatically. Set up theme switching.
npx boardui@latest add agent-chatBring your own key
One variable, AI_API_KEY. The provider is read from the key itself, so there is nothing else to configure:
sk-ant-...Anthropicsk-or-...OpenRoutersk-...OpenAIAIza...Google Geminivck_...Vercel AI Gatewaygsk_...Groqxai-...xAI
Create the key with a spending limit where the provider offers one. OpenRouter can cap the credits a key may spend, and OpenAI has usage limits per project. The key never reaches the browser, but the chat is open to anyone who has the URL, so the cap is what bounds the cost.
Set CHAT_MODEL to pick a different model. For Mistral or DeepSeek, whose keys have no recognisable shape, add AI_PROVIDER=mistral or AI_PROVIDER=deepseek. Any OpenAI-compatible server, from Ollama on your laptop to LiteLLM in production, works with AI_BASE_URL and CHAT_MODEL. Every provider's usual variable (OPENAI_API_KEY, ANTHROPIC_API_KEY, and so on) works too.
Run it locally
Clone your deployed repo, or the starter itself, and give it a key:
npm installcp .env.example .env.local # put your key in AI_API_KEYnpm run devWhat's included
Free components only, installed as source: the app sidebar with team and user menus, the composer and its loading treatment, the thinking indicator, the chat history rail with rename, unread and export, the message actions, and every base component they depend on. The deployed app also carries a dashboard with the two free charts and sign-in and sign-up screens built from the same free components, so the sidebar only links to pages that exist. Plus app/api/chat/route.ts, the runtime, and BoardUI's design rules for coding agents in AGENTS.md, so the next screen an agent builds speaks the same language. Pro templates install into the same project when you want them.