3分钟部署BoardUI：一把API Key跑通带流式回复的AI聊天应用-平芜编程栈

【免费下载链接】boardui

React design system for agentic interfaces. Every free BoardUI component as source, with a working AI chat app on your own model key as the homepage.

项目地址：https://gitcode.com/gh_mirrors/boa/boardui

点击查看免费下载

BoardUI 是一个面向 AI Agent 界面的免费开源 React 设计系统，内置了一个开箱即用的 AI 聊天应用。本教程带你用 1 把 API Key、约 3 分钟，在本地跑通这个带流式回复的 AI 聊天应用——不需要数据库，也不用改动任何后端代码。

BoardUI 是什么：AI 产品界面的一站式设计系统

和普通组件库最大的不同是：BoardUI 把组件作为源码文件放进你的项目，而不是当作一个依赖包。你可以随意修改它的任何一行代码。

它一次给全了两类东西：

AI Agent 界面：聊天窗口、思考中指示器、流式日志、侧边栏、输入框加载动画（agent-chat、agent-thinking、agent-log等）；
常规仪表盘界面：数据表格、统计卡片、双免费图表、设置弹窗、登录/注册卡片。

整个仓库就是它的免费版全部内容（69 个组件），并且自带一个完整应用：聊天首页、数据仪表盘、登录和注册页，全部由这些组件搭建。详见 README.md。

准备工作：先拿到你的模型 API Key

BoardUI 支持多家模型服务商，只需一个环境变量AI_API_KEY，服务商由 Key 的前缀自动识别：

Key 前缀	服务商	默认模型
`sk-ant-...`	Anthropic	claude-haiku-4-5
`sk-or-...`	OpenRouter	openai/gpt-5-nano
`sk-...`	OpenAI	gpt-5.4-mini
`AIza...`	Google Gemini	gemini-2.5-flash
`vck_...`	Vercel AI Gateway	openai/gpt-5-nano
`gsk_...`	Groq	llama-3.3-70b-versatile
`xai-...`	xAI	grok-4-fast-non-reasoning

💡省钱小建议：创建 Key 时尽量开启消费限额（OpenRouter 可设额度上限、OpenAI 可按项目设用量限制）。因为 Key 虽不下发到浏览器，但聊天页面对知道 URL 的访客是开放的，限额就是成本兜底。

本地部署：3步跑通 AI 聊天应用

第1步：克隆仓库

git clone https://gitcode.com/gh_mirrors/boa/boardui.git cd boardui

第2步：安装依赖并配置 Key

npm install cp .env.example .env.local

然后编辑 .env.local，填入你的 Key（模板文件已附带完整中文注释说明）：

AI_API_KEY=sk-ant-你的密钥

第3步：启动开发服务器

npm run dev

打开http://localhost:3000，输入框直接提问——回复会以打字机效果逐字流出。🎉

一键云端部署：Vercel 上粘贴 Key 即上线

不想本地跑？这个项目内置了 Vercel 一键部署按钮（见仓库首页）：点击后只需在部署向导里粘贴AI_API_KEY这一个值，首次部署完成时聊天就已经能应答了。

为什么只需一个值？因为 app/api/chat/route.ts 会读取 Key 本身的形状来判断服务商，省去了九个字段的配置表单。各家服务商的常规变量名（OPENAI_API_KEY、ANTHROPIC_API_KEY等）也同样被支持。

应用里有什么：三个开箱即用的页面

① 聊天首页/——由 agent-chat.tsx 驱动的完整聊天应用：

流式回复 + 思考中动画（等待首个文字出现前一直显示 shimmer 指示器）；
输入框带停止生成按钮，按下后服务端同步停止，不产生多余计费；
聊天历史侧栏，存在访客自己的浏览器localStorage里，无数据库、按浏览器隔离；
若未配置 Key，页面会先做配置探测（GET /api/chat），展示配置指引并可进入演示模式体验交互。

② 仪表盘/dashboard（dashboard/page.tsx）——统计卡片 + 收入/订单两张免费图表 + 客户数据表。

③ 登录/注册页——signup/page.tsx 右侧是 Carousel 轮播组件循环播放的装饰画，下方即其一：

设置弹窗（Settings Modal）里的“当前套餐”卡片则用 WebGL 火焰效果渲染这张艺术图：

流式回复是怎么实现的：读懂 /api/chat 路由

整个后端只有一个路由文件 app/api/chat/route.ts，约 370 行，四个设计点值得新手借鉴：

Key 只在服务端读取，永远不下发到浏览器（源码注释明确警告：不要挪到NEXT_PUBLIC_变量里）；
平滑流式输出：模型返回的文字是一阵一阵的，直接渲染会“一顿一顿”。路由用smoothStream({ delayInMs: 18, chunking: "word" })按整词匀速释放，前端看到的才是流畅打字效果（见 route.ts#L354-L366）；
停止即真停：把请求的abortSignal传给streamText，用户按 Stop 时模型停止生成，不再计费；
自带配置探测：GET方法返回configured状态，未配置 Key 的新部署会自我说明，而不是让人对着报错发呆。

前端则用 Vercel AI SDK 的useChat直接消费这条消息流，UI 与后端只约定三件事：/api/chat端点、UI 消息流格式、环境变量——足够窄，任何后续聊天界面都能无痛替换。

常见问题：换模型、接本地 Ollama

换模型：设CHAT_MODEL即可覆盖任何服务商的默认模型；
Key 无固定前缀（Mistral、DeepSeek）：加AI_PROVIDER=mistral或AI_PROVIDER=deepseek；
接本地 Ollama / LM Studio / vLLM（任意 OpenAI 兼容服务）：

AI_BASE_URL=http://localhost:11434/v1 CHAT_MODEL=llama3.2

本地模型甚至不需要真 Key（占位值即可），这是零成本体验流式聊天的好办法。

装进自己的项目：仓库里的每个组件都能单独安装为源码：npx boardui@latest add>

【免费下载链接】boardui
React design system for agentic interfaces. Every free BoardUI component as source, with a working AI chat app on your own model key as the homepage.
项目地址：https://gitcode.com/gh_mirrors/boa/boardui
点击查看免费下载相关推荐
3步把Crabtalk接入Telegram：零代码搭建支持流式回复的AI聊天机器人大门
3步把Crabtalk接入Telegram：零代码搭建支持流式回复的AI聊天机器人大门 Crabtalk 是一个常驻后台的嵌入式 AI Agent（Agent
快速上手 Secure OpenClaw：5 分钟跑通你的第一个 AI 聊天助理
快速上手 Secure OpenClaw：5 分钟跑通你的第一个 AI 聊天助理 Secure OpenClaw 是一个开源的 24x7 AI 聊天助理 ：把
不花一分钱 API Key：10 分钟跑通 e2e 的零配置确定性模式
不花一分钱 API Key：10 分钟跑通 e2e 的零配置确定性模式 最近半年，测试圈最热闹的话题绕不开一件事：让 AI 帮你点页面、填表单、找 bug。 听
测试测试智能体人工智能浏览器控制CLI
上一篇：Guardrails文档存储功能：管理LLM交互上下文数据
下一篇：如何让10块钱的鼠标比苹果触控板还好用：Mac Mouse Fix完整新手指南