【免费下载链接】boarduiReact 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 KeyBoardUI 支持多家模型服务商只需一个环境变量AI_API_KEY服务商由 Key 的前缀自动识别Key 前缀服务商默认模型sk-ant-...Anthropicclaude-haiku-4-5sk-or-...OpenRouteropenai/gpt-5-nanosk-...OpenAIgpt-5.4-miniAIza...Google Geminigemini-2.5-flashvck_...Vercel AI Gatewayopenai/gpt-5-nanogsk_...Groqllama-3.3-70b-versatilexai-...xAIgrok-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步安装依赖并配置 Keynpm install cp .env.example .env.local然后编辑 .env.local填入你的 Key模板文件已附带完整中文注释说明AI_API_KEYsk-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展示配置指引并可进入演示模式体验交互。② 仪表盘/dashboarddashboard/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_PROVIDERmistral或AI_PROVIDERdeepseek接本地 Ollama / LM Studio / vLLM任意 OpenAI 兼容服务AI_BASE_URLhttp://localhost:11434/v1 CHAT_MODELllama3.2本地模型甚至不需要真 Key占位值即可这是零成本体验流式聊天的好办法。装进自己的项目仓库里的每个组件都能单独安装为源码npx boarduilatest add>赞分享【免费下载链接】boarduiReact 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 AgentAgent快速上手 Secure OpenClaw5 分钟跑通你的第一个 AI 聊天助理快速上手 Secure OpenClaw5 分钟跑通你的第一个 AI 聊天助理 Secure OpenClaw 是一个开源的 24x7 AI 聊天助理 把不花一分钱 API Key10 分钟跑通 e2e 的零配置确定性模式不花一分钱 API Key10 分钟跑通 e2e 的零配置确定性模式 最近半年测试圈最热闹的话题绕不开一件事让 AI 帮你点页面、填表单、找 bug。 听测试测试智能体人工智能浏览器控制CLI上一篇Guardrails文档存储功能管理LLM交互上下文数据下一篇如何让10块钱的鼠标比苹果触控板还好用Mac Mouse Fix完整新手指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
【免费下载链接】boarduiReact 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 KeyBoardUI 支持多家模型服务商只需一个环境变量AI_API_KEY服务商由 Key 的前缀自动识别Key 前缀服务商默认模型sk-ant-...Anthropicclaude-haiku-4-5sk-or-...OpenRouteropenai/gpt-5-nanosk-...OpenAIgpt-5.4-miniAIza...Google Geminigemini-2.5-flashvck_...Vercel AI Gatewayopenai/gpt-5-nanogsk_...Groqllama-3.3-70b-versatilexai-...xAIgrok-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步安装依赖并配置 Keynpm install cp .env.example .env.local然后编辑 .env.local填入你的 Key模板文件已附带完整中文注释说明AI_API_KEYsk-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展示配置指引并可进入演示模式体验交互。② 仪表盘/dashboarddashboard/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_PROVIDERmistral或AI_PROVIDERdeepseek接本地 Ollama / LM Studio / vLLM任意 OpenAI 兼容服务AI_BASE_URLhttp://localhost:11434/v1 CHAT_MODELllama3.2本地模型甚至不需要真 Key占位值即可这是零成本体验流式聊天的好办法。装进自己的项目仓库里的每个组件都能单独安装为源码npx boarduilatest add>赞分享【免费下载链接】boarduiReact 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 AgentAgent快速上手 Secure OpenClaw5 分钟跑通你的第一个 AI 聊天助理快速上手 Secure OpenClaw5 分钟跑通你的第一个 AI 聊天助理 Secure OpenClaw 是一个开源的 24x7 AI 聊天助理 把不花一分钱 API Key10 分钟跑通 e2e 的零配置确定性模式不花一分钱 API Key10 分钟跑通 e2e 的零配置确定性模式 最近半年测试圈最热闹的话题绕不开一件事让 AI 帮你点页面、填表单、找 bug。 听测试测试智能体人工智能浏览器控制CLI上一篇Guardrails文档存储功能管理LLM交互上下文数据下一篇如何让10块钱的鼠标比苹果触控板还好用Mac Mouse Fix完整新手指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
