尧图网站建设 
AI SDK 如何在 TanStack Start 项目中初始化并运行第一个聊天 Agent【免费下载链接】aiThe AI Toolkit for TypeScript. From the creators of Next.js, the AI SDK is a free open-source library for building AI-powered applications and agents项目地址: https://gitcode.com/GitHub_Trending/ai/ai这篇文档解决的问题是在一个全新的 TanStack Start 项目中从零接入 AI SDK搭建一个带流式聊天界面的 Agent并让它在本地跑起来。AI SDK 是 Vercel 官方开源的 TypeScript AI 工具库其官方文档 TanStack Start Quickstart 就以此为教程主线创建项目、配置 Vercel AI Gateway 密钥、写一个/api/chat路由处理器、用useChat钩子接上前端最终在浏览器里和 Agent 实时对话。准备条件按照 Quickstart 文档的 Prerequisites 一节开始前需要准备本地开发机安装 Node.js 22 和 pnpm一个 Vercel AI Gateway 的 API key需到 Vercel 网站注册后获取。选择 Vercel AI Gateway 的原因在文档中有说明它随ai包一起内置可以作为默认的 global provider 使用一个 API key 就能访问来自不同厂商的模型同时它不是唯一选项随时可以换成其他 provider 包。创建项目并安装依赖创建一个新的 TanStack Start 应用。该命令会生成名为my-ai-app的目录并搭好基础项目结构pnpm create tanstack/startlatest my-ai-app cd my-ai-app然后在项目根目录安装三个依赖aiAI SDK 核心包、ai-sdk/reactReact 端聊天钩子、zod用于定义工具输入的 schema 校验库pnpm add ai ai-sdk/react zod配置 AI Gateway API key在项目根目录创建.env文件并写入密钥touch .env编辑.envAI_GATEWAY_API_KEYxxxxxxxxx把xxxxxxxxx替换为你的 Vercel AI Gateway API key。文档注明AI SDK 的 Vercel AI Gateway Provider 默认就会读取AI_GATEWAY_API_KEY这个环境变量所以变量名要一致。创建 /api/chat 路由处理器新建src/routes/api/chat.ts内容如下import { streamText, UIMessage, convertToModelMessages, createUIMessageStreamResponse, toUIMessageStream, } from ai; import { createFileRoute } from tanstack/react-router; export const Route createFileRoute(/api/chat)({ server: { handlers: { POST: async ({ request }) { const { messages }: { messages: UIMessage[] } await request.json(); const result streamText({ model: anthropic/claude-sonnet-4.5, messages: await convertToModelMessages(messages), }); return createUIMessageStreamResponse({ stream: toUIMessageStream({ stream: result.stream }), }); }, }, }, });源文档中的代码模板带有__PROVIDER_IMPORT__和__MODEL__两个占位符上面的代码已按主路径Gateway解析为可直接使用的形式Gateway 是默认 global provider不需要额外的 provider importmodel可以直接用厂商/模型名这样的字符串引用文档中给出的示例模型串为anthropic/claude-sonnet-4.5。如果你想在代码里显式指定文档给出了等价写法// 方式一从 ai 包导入默认已包含 import { gateway } from ai; model: gateway(anthropic/claude-sonnet-4.5); // 方式二安装并导入 ai-sdk/gateway 包 import { gateway } from ai-sdk/gateway; model: gateway(anthropic/claude-sonnet-4.5);代码各部分的作用文档的说明如下用 TanStack Start 的 server 路由定义POST处理器从请求体取出messages。messages是UIMessage类型携带完整会话历史和元数据如时间戳。调用 streamText它接收model和messages配置。messages键期望的是ModelMessage[]不含 UI 元数据的格式所以先用convertToModelMessages把UIMessage[]转换过去。streamText返回StreamTextResult把它的stream传给toUIMessageStream再用createUIMessageStreamResponse包成流式响应返回给客户端。这个路由处理器在/api/chat上创建一个 POST 端点。可选分支直接接入其他模型 provider如果不用 Gateway 而是直接调用某家 provider按其文档的做法是安装对应包并创建 provider 实例例如 OpenAIpnpm add ai-sdk/openaiimport { openai } from ai-sdk/openai; model: openai(gpt-5.1);如果想让整个应用范围内字符串形式的模型引用都走你选定的 provider可以修改默认的 global provider具体配置参见 provider management 文档。用 useChat 搭建聊天界面更新首页路由src/routes/index.tsx用 AI SDK 的useChat钩子渲染消息列表和输入框import { createFileRoute } from tanstack/react-router; import { useChat } from ai-sdk/react; import { useState } from react; export const Route createFileRoute(/)({ component: Chat, }); function Chat() { const [input, setInput] useState(); const { messages, sendMessage } useChat(); return ( div classNameflex flex-col w-full max-w-md py-24 mx-auto stretch {messages.map(message ( div key{message.id} classNamewhitespace-pre-wrap {message.role user ? User: : AI: } {message.parts.map((part, i) { switch (part.type) { case text: return div key{${message.id}-${i}}{part.text}/div; } })} /div ))} form onSubmit{e { e.preventDefault(); sendMessage({ text: input }); setInput(); }} input classNamefixed dark:bg-zinc-900 bottom-0 w-full max-w-md p-2 mb-8 border border-zinc-300 dark:border-zinc-800 rounded shadow-xl value{input} placeholderSay something... onChange{e setInput(e.currentTarget.value)} / /form /div ); }文档对这个页面的说明useChat默认就会请求前面创建的POST /api/chat路由不需要手动填 URL。它提供的关键状态和函数是messages当前聊天消息对象含id、role、parts属性和sendMessage向聊天 API 发送消息。模型输出通过消息的parts数组访问parts按模型生成的顺序排列本页只处理text类型的 part。启动并验证运行pnpm run dev在浏览器打开http://localhost:3000。文档给出的验证标准是页面出现输入框输入一条消息发送后能实时看到 Agent 的回复。至此第一个聊天 Agent 已经跑通。限制与下一步本教程的最小路径只展示了纯文本聊天。parts数组中除了text还会出现tool-xxx等类型基础页面代码未处理它们因此一旦模型生成了工具调用UI 会显示为空白响应。如果希望 Agent 能调用工具并多步执行Quickstart 文档在同一篇中给出了后续扩展给streamText添加tools用tool Zod schema 定义并设置stopWhen: isStepCount(5)启用多步工具调用——stopWhen默认是isStepCount(1)即出现工具结果后就停止生成。完整代码见 TanStack Start Quickstart 的 Enhance Your Chatbot with Tools 与 Enabling Multi-Step Tool Calls 小节isStepCount的参考文档在 stream-text 同目录。想进一步调整模型行为可以为streamText传入更多 settings想理解聊天 UI 抽象可参考 AI SDK UI 的 chatbot 文档。【免费下载链接】aiThe AI Toolkit for TypeScript. From the creators of Next.js, the AI SDK is a free open-source library for building AI-powered applications and agents项目地址: https://gitcode.com/GitHub_Trending/ai/ai创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 AI SDK 如何在 TanStack Start 项目中初始化并运行第一个聊天 Agent
AI SDK 如何在 TanStack Start 项目中初始化并运行第一个聊天 Agent【免费下载链接】aiThe AI Toolkit for TypeScript. From the creators of Next.js, the AI SDK is a free open-source library for building AI-powered applications and agents项目地址: https://gitcode.com/GitHub_Trending/ai/ai这篇文档解决的问题是在一个全新的 TanStack Start 项目中从零接入 AI SDK搭建一个带流式聊天界面的 Agent并让它在本地跑起来。AI SDK 是 Vercel 官方开源的 TypeScript AI 工具库其官方文档 TanStack Start Quickstart 就以此为教程主线创建项目、配置 Vercel AI Gateway 密钥、写一个/api/chat路由处理器、用useChat钩子接上前端最终在浏览器里和 Agent 实时对话。准备条件按照 Quickstart 文档的 Prerequisites 一节开始前需要准备本地开发机安装 Node.js 22 和 pnpm一个 Vercel AI Gateway 的 API key需到 Vercel 网站注册后获取。选择 Vercel AI Gateway 的原因在文档中有说明它随ai包一起内置可以作为默认的 global provider 使用一个 API key 就能访问来自不同厂商的模型同时它不是唯一选项随时可以换成其他 provider 包。创建项目并安装依赖创建一个新的 TanStack Start 应用。该命令会生成名为my-ai-app的目录并搭好基础项目结构pnpm create tanstack/startlatest my-ai-app cd my-ai-app然后在项目根目录安装三个依赖aiAI SDK 核心包、ai-sdk/reactReact 端聊天钩子、zod用于定义工具输入的 schema 校验库pnpm add ai ai-sdk/react zod配置 AI Gateway API key在项目根目录创建.env文件并写入密钥touch .env编辑.envAI_GATEWAY_API_KEYxxxxxxxxx把xxxxxxxxx替换为你的 Vercel AI Gateway API key。文档注明AI SDK 的 Vercel AI Gateway Provider 默认就会读取AI_GATEWAY_API_KEY这个环境变量所以变量名要一致。创建 /api/chat 路由处理器新建src/routes/api/chat.ts内容如下import { streamText, UIMessage, convertToModelMessages, createUIMessageStreamResponse, toUIMessageStream, } from ai; import { createFileRoute } from tanstack/react-router; export const Route createFileRoute(/api/chat)({ server: { handlers: { POST: async ({ request }) { const { messages }: { messages: UIMessage[] } await request.json(); const result streamText({ model: anthropic/claude-sonnet-4.5, messages: await convertToModelMessages(messages), }); return createUIMessageStreamResponse({ stream: toUIMessageStream({ stream: result.stream }), }); }, }, }, });源文档中的代码模板带有__PROVIDER_IMPORT__和__MODEL__两个占位符上面的代码已按主路径Gateway解析为可直接使用的形式Gateway 是默认 global provider不需要额外的 provider importmodel可以直接用厂商/模型名这样的字符串引用文档中给出的示例模型串为anthropic/claude-sonnet-4.5。如果你想在代码里显式指定文档给出了等价写法// 方式一从 ai 包导入默认已包含 import { gateway } from ai; model: gateway(anthropic/claude-sonnet-4.5); // 方式二安装并导入 ai-sdk/gateway 包 import { gateway } from ai-sdk/gateway; model: gateway(anthropic/claude-sonnet-4.5);代码各部分的作用文档的说明如下用 TanStack Start 的 server 路由定义POST处理器从请求体取出messages。messages是UIMessage类型携带完整会话历史和元数据如时间戳。调用 streamText它接收model和messages配置。messages键期望的是ModelMessage[]不含 UI 元数据的格式所以先用convertToModelMessages把UIMessage[]转换过去。streamText返回StreamTextResult把它的stream传给toUIMessageStream再用createUIMessageStreamResponse包成流式响应返回给客户端。这个路由处理器在/api/chat上创建一个 POST 端点。可选分支直接接入其他模型 provider如果不用 Gateway 而是直接调用某家 provider按其文档的做法是安装对应包并创建 provider 实例例如 OpenAIpnpm add ai-sdk/openaiimport { openai } from ai-sdk/openai; model: openai(gpt-5.1);如果想让整个应用范围内字符串形式的模型引用都走你选定的 provider可以修改默认的 global provider具体配置参见 provider management 文档。用 useChat 搭建聊天界面更新首页路由src/routes/index.tsx用 AI SDK 的useChat钩子渲染消息列表和输入框import { createFileRoute } from tanstack/react-router; import { useChat } from ai-sdk/react; import { useState } from react; export const Route createFileRoute(/)({ component: Chat, }); function Chat() { const [input, setInput] useState(); const { messages, sendMessage } useChat(); return ( div classNameflex flex-col w-full max-w-md py-24 mx-auto stretch {messages.map(message ( div key{message.id} classNamewhitespace-pre-wrap {message.role user ? User: : AI: } {message.parts.map((part, i) { switch (part.type) { case text: return div key{${message.id}-${i}}{part.text}/div; } })} /div ))} form onSubmit{e { e.preventDefault(); sendMessage({ text: input }); setInput(); }} input classNamefixed dark:bg-zinc-900 bottom-0 w-full max-w-md p-2 mb-8 border border-zinc-300 dark:border-zinc-800 rounded shadow-xl value{input} placeholderSay something... onChange{e setInput(e.currentTarget.value)} / /form /div ); }文档对这个页面的说明useChat默认就会请求前面创建的POST /api/chat路由不需要手动填 URL。它提供的关键状态和函数是messages当前聊天消息对象含id、role、parts属性和sendMessage向聊天 API 发送消息。模型输出通过消息的parts数组访问parts按模型生成的顺序排列本页只处理text类型的 part。启动并验证运行pnpm run dev在浏览器打开http://localhost:3000。文档给出的验证标准是页面出现输入框输入一条消息发送后能实时看到 Agent 的回复。至此第一个聊天 Agent 已经跑通。限制与下一步本教程的最小路径只展示了纯文本聊天。parts数组中除了text还会出现tool-xxx等类型基础页面代码未处理它们因此一旦模型生成了工具调用UI 会显示为空白响应。如果希望 Agent 能调用工具并多步执行Quickstart 文档在同一篇中给出了后续扩展给streamText添加tools用tool Zod schema 定义并设置stopWhen: isStepCount(5)启用多步工具调用——stopWhen默认是isStepCount(1)即出现工具结果后就停止生成。完整代码见 TanStack Start Quickstart 的 Enhance Your Chatbot with Tools 与 Enabling Multi-Step Tool Calls 小节isStepCount的参考文档在 stream-text 同目录。想进一步调整模型行为可以为streamText传入更多 settings想理解聊天 UI 抽象可参考 AI SDK UI 的 chatbot 文档。【免费下载链接】aiThe AI Toolkit for TypeScript. From the creators of Next.js, the AI SDK is a free open-source library for building AI-powered applications and agents项目地址: https://gitcode.com/GitHub_Trending/ai/ai创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考