【免费下载链接】chatbot-templateA minimal chatbot template built with Next.js, AI SDK, shadcn/ui, shadcn/react, shadcn/typeset. It runs on the Vercel AI Gateway.项目地址https://gitcode.com/gh_mirrors/chatbo/chatbot-template点击查看免费下载chatbot-template 是一个基于 Next.js Vercel AI SDK shadcn/ui 构建的极简 AI 聊天机器人模板运行在 Vercel AI Gateway 上。本文带你走通扩展聊天机器人的完整流程从定义自定义 Tool、注册到工具集到创建配套的 Part 组件并接入消息渲染一个示例讲清全部步骤。先认识模板为什么扩展只需改两个地方模板内置了三个现成的 Tool 可以当参考样板Tool定义文件说明github_repotools/github_repo.ts服务端执行查询 GitHub 仓库数据web_searchtools/web_search.ts各模型提供商的原生联网搜索ask_usertools/ask_user.ts交互式问卷由用户在界面中作答要给它加新能力比如查天气、查汇率、连内部 API只需要动两处Tool工具模型会做什么——在服务端定义能力模型调用后返回结果。Part部件消息长什么样——把工具的输入/输出渲染成界面上的一块内容。一条助手消息是由若干有类型的 Part 组成的列表。app/api/chat/route.ts 用streamText流式返回响应components/chat-message.tsx 则对每个part.type做 switch 分发把每种 Tool Part 交给 components/parts/ 目录下对应的组件渲染。理解关键机制Tool 状态流转与类型推导Tool Part 在流式输出过程中会经历如下状态这是写 Part 组件时的核心依据input-streaming → input-available → output-available或 output-error以 components/parts/github-repo-part.tsx 为例前两个状态显示正在查询…的加载动画output-available渲染 stars/forks 统计output-error显示错误信息。更省心的是类型推导消息类型由工具定义通过 AI SDK 的InferUITools自动推断所以在 Part 组件里part.input和part.output都是完整类型化的——改错一个字段名构建会直接报错而不是运行时悄悄出现undefined。第 1 步在 tools/ 下创建 Tool 定义文件新建tools/get_weather.ts。注意文件名就是模型识别到的工具名推荐用下划线命名如get_weather、github_repo。文件内导出一个tool()调用包含三部分import { tool } from ai import { z } from zod export const getWeather tool({ description: Get the current weather for a city., inputSchema: z.object({ city: z.string().describe(The city name), }), outputSchema: z.object({ temperature: z.number(), condition: z.string(), }), execute: ({ city }) { // 调用你的天气 API这里只是示意 return { temperature: 25, condition: Sunny } }, })description写给模型看的说明书决定模型何时调用它建议写清楚触发场景。inputSchema/outputSchema用 zod 描述输入输出结构。execute服务端执行逻辑。 如果是由用户在界面中作答的交互型工具如ask_user可以省略execute后面进阶部分会讲。第 2 步在 tools/index.ts 注册工具打开 tools/index.ts把新工具加进baseTools并导入即可import { getWeather } from ./get_weather const baseTools { github_repo: githubRepo, ask_user: askUser, get_weather: getWeather, // ← 新增 }baseTools会被getTools()取出并传入聊天路由的streamText模型从此就能调用它了。同时ChatUIMessage类型基于InferUIToolstypeof baseTools自动推导新工具的part.input/part.output类型也随之就绪。第 3 步创建配套的 Part 组件在 components/parts/ 新建get-weather-part.tsx按part.state分支渲染不同阶段import { type ChatMessagePart } from /tools import { Spinner } from /components/ui/spinner type GetWeatherToolPart Extract ChatMessagePart, { type: tool-get_weather } export function GetWeatherPart({ part }: { part: GetWeatherToolPart }) { switch (part.state) { case input-streaming: case input-available: return ( div classNameflex items-center gap-2 text-sm Spinner / Looking up weather… /div ) case output-available: return div {part.output.temperature}°C, {part.output.condition}/div case output-error: return div classNametext-destructive{part.errorText}/div default: return null } }类型GetWeatherToolPart从ChatMessagePart中用Extract精确挑出来写法与 tools/index.ts 中GithubRepoToolPart、AskUserToolPart完全一致保证只接收自己那种 Part。第 4 步在 chat-message.tsx 中接入渲染最后一步打开 components/chat-message.tsx在 switch 中新增一个 casecase tool-get_weather: return GetWeatherPart key{part.toolCallId} part{part} /到这里pnpm dev跑起来后只要对话中模型判断需要查天气界面就会先显示加载动画再显示天气结果——完整的 Tool Part 扩展就完成了。✅进阶交互型 Toolask_user 模式如果工具的结果不来自服务端而来自用户本人例如问卷、审批、表单确认可以省略execute参考 tools/ask_user.ts。此时流程变为模型调用ask_user并传入问题列表components/chat.tsx 检测到最后一条消息存在待回答的tool-ask_userPart就在滚动区底部钉住一个 components/question-card.tsx 问卷卡片用户作答后客户端调用addToolOutput把答案作为工具输出回传sendAutomaticallyWhen配置会自动续流模型继续生成回复。这个服务端执行与客户端作答两种模式覆盖了绝大多数自定义 Tool 场景。新手常见问题 FAQQ1Tool 的字段类型在 Part 里是undefined为什么确认该工具已经加进tools/index.ts的baseTools——类型是通过InferUITools从baseTools推导的未注册的工具没有对应类型。Q2想给 Part 组件加按钮、抽屉等 UI怎么装模板已内置 shadcn CLI直接运行npx shadcnlatest add button组件会落到 components/ui/Spinner、Drawer、Item等现成组件可直接复用。Q3想换模型或加模型在哪改模型列表在 lib/models.ts第一个条目是默认模型聊天路由会用它校验请求防止调用未授权的模型。Q4web_search为什么不在baseTools里它由模型 ID 决定——tools/web_search.ts 根据前缀openai/或anthropic/动态返回对应提供商的搜索工具getTools()会按需合并进工具集。这是条件性工具的参考写法。小结步骤文件位置做什么1tools/name.ts定义tool()description schema execute2tools/index.ts注册进baseTools3components/parts/name-part.tsx按part.state渲染各阶段 UI4components/chat-message.tsx新增case tool-name记住这条主线文件名即工具名注册后类型自动推导状态驱动渲染。有了github_repo这个样板加上任意能力都不过是四步小事——这就是 chatbot-template 作为扩展底座的魅力。赞分享【免费下载链接】chatbot-templateA minimal chatbot template built with Next.js, AI SDK, shadcn/ui, shadcn/react, shadcn/typeset. It runs on the Vercel AI Gateway.项目地址https://gitcode.com/gh_mirrors/chatbo/chatbot-template点击查看免费下载相关推荐DBeaver 数据库管理实操手册连接配置、日常查询与故障排查DBeaver 数据库管理实操手册连接配置、日常查询与故障排查 本文面向刚接触 DBeaver 的开发者讲清 DBeaver 连接配置、SQL 查询、性能调数据库客户端桌面应用数据库PaddleSeg项目扩展指南如何添加自定义模型组件PaddleSeg项目扩展指南如何添加自定义模型组件 前言 PaddleSeg作为一款优秀的图像分割开发套件其强大的可扩展性让开发者能够轻松集成自定义组件。人工智能计算机视觉预训练Airframe React扩展开发如何自定义组件和添加新功能Airframe React扩展开发如何自定义组件和添加新功能 Airframe React是一个基于Bootstrap 4和React 16构建的高质量开源创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考