构建流式聊天智能体Cloudflare Skills Agents SDK中的AIChatAgent、React客户端与MCP集成实战【免费下载链接】skillsSkills for teaching agents how to build on Cloudflare.项目地址: https://gitcode.com/gh_mirrors/skills14/skills想快速上手 Cloudflare Agents SDK 构建流式聊天智能体吗本文基于Cloudflare Skillsskills14/skills开源项目手把手带你完成三件事用AIChatAgent搭建支持断线恢复的流式聊天后端、用useAgentChat接入 React 客户端、再用 MCP 协议为智能体接上外部工具。全程配置说明少量代码新手也能跟着做完。 这个项目是什么Cloudflare Skills 是一套Agent Skills智能体技能集合帮助 AI 编程助手掌握在 Cloudflare 平台上构建应用的方法涵盖 Workers、Agents SDK、Durable Objects 等。其中 skills/agents-sdk/SKILL.md 专门教你构建有状态 AI 智能体状态持久化、RPC 调用、定时任务、MCP 集成和流式聊天。核心能力一览能力说明流式聊天AIChatAgent支持消息持久化、可恢复流、工具调用持久状态SQLite 支撑setState自动同步到客户端RPC 调用callable()方法经 WebSocket 调用支持流式返回MCP 集成连接外部 MCP 服务器或用createMcpHandler自建 MCP 服务React 钩子useAgent/useAgentChat一行接入聊天 UI 一键安装步骤准备好 Agents SDK聊天智能体需要 4 个包Agents SDK、AI Chat 扩展、AI SDK 核心和 React 客户端npm install agents cloudflare/ai-chat ai ai-sdk/react装完后用npm ls agents确认版本。项目入口文件通过routeAgentRequest把请求路由到智能体见 skills/agents-sdk/references/routing.mdimport { routeAgentRequest } from agents; export default { fetch: (req, env) routeAgentRequest(req, env) ?? new Response(Not found, { status: 404 }) };⚙️ 最快配置方法wrangler.jsonc 关键四要素wrangler.jsonc是整个智能体的户口本缺一样都跑不起来详见 skills/agents-sdk/references/configuration.md{ compatibility_flags: [nodejs_compat], durable_objects: { bindings: [{ name: ChatAgent, class_name: ChatAgent }] }, migrations: [{ tag: v1, new_sqlite_classes: [ChatAgent] }], ai: { binding: AI } }四要素口诀① 每个智能体类一个 Durable Objects 绑定② 一个new_sqlite_classes迁移条目③ 启用nodejs_compat④ 加ai绑定以调用 Workers AI 模型。⚠️ 本地开发时在.dev.vars中加ai: { binding: AI, remote: true }才能连上真实的 Workers AI。前端项目建议用 Vite 的agents()插件自动处理构建配置示例同样在 configuration.md 中。 构建 AIChatAgent流式聊天服务端AIChatAgent是 Agents SDK 专为聊天设计的基类它帮你搞定三件麻烦事消息持久化、流式输出、断线后流恢复可恢复流resumable streaming。你只需关注模型和系统提示词工具调用在onChatMessage中自行接线——完整对照见 skills/agents-sdk/references/streaming-chat.md。两个新手最容易踩的要点转发取消信号把请求的abort信号传给模型调用用户点停止时生成会真正中断区分两种恢复客户端断线重连、Durable Object 被驱逐eviction是两种独立的恢复场景需分别处理。 进阶提示如果不想自己写streamText循环和工具执行可以试试实验性的高阶类cloudflare/think它自动处理消息循环、工具执行与持久化对比表见 skills/agents-sdk/references/think.md。 接入 React 客户端useAgent useAgentChat客户端选型很简单参考 skills/agents-sdk/references/client-sdk.md场景用什么React 状态同步 RPC 调用useAgent钩子聊天消息 流式渲染加挂useAgentChat非 React 的 WebSocket 客户端AgentClient类一次性 HTTP 请求agentFetch智能体默认路由为/agents/{类名转kebab}/{实例名}例如类ChatAgent对应/agents/chat-agent/session-1。React 端两行代码接入const agent useAgent({ agent: ChatAgent, name: session-1 }); const { messages, input, handleInputChange, handleSubmit } useAgentChat({ agent });useAgentChat直接返回消息列表和流式更新配合handleSubmit就能搭出一个完整的聊天界面——这是构建流式聊天智能体前端的最短路径。 MCP 集成给智能体接上外部工具MCPModel Context Protocol让智能体长出双手。Agents SDK 支持双向角色详见 skills/agents-sdk/references/mcp.md做 MCP 客户端连接外部 MCP 服务器直接使用对方提供的工具、资源支持 OAuth 鉴权与重试做 MCP 服务器用createMcpHandler把自己的智能体能力暴露为标准 MCP 服务新版首选McpAgent已弃用支持 Streamable HTTP、SSE 等传输方式。本项目本身就自带一个远程 MCP 服务器配置 mcp.jsonstreamable-http类型安装 plugin.json 插件后AI 编程助手即可通过它访问 Cloudflare API 与开发者文档——这正是技能 MCP组合的实际用途。 附赠流式 RPC 与服务端主动消息流式 RPCcallable({ streaming: true })可让任意方法逐块向客户端推送数据非聊天场景的流式输出首选见 skills/agents-sdk/references/callable.md服务端主动消息通过saveMessages持久化消息并触发模型新回合实现定时、Webhook 或邮件驱动的智能体主动开口见 skills/agents-sdk/references/server-driven-messages.md。⚠️ 新手避坑清单别开experimentalDecoratorstsconfig 中启用它会让callable装饰器失效旧迁移永不修改新增智能体类时追加新 tag如v2而不是改v1URL 大小写敏感类名MyAgent在 URL 里必须写成 kebab-casemy-agent手动创建的AgentClient用完要 closeReact 钩子会自动清理裸用则需手动关闭。 关键文件导航技能入口skills/agents-sdk/SKILL.md流式聊天skills/agents-sdk/references/streaming-chat.mdReact 客户端skills/agents-sdk/references/client-sdk.mdMCP 集成skills/agents-sdk/references/mcp.md配置指南skills/agents-sdk/references/configuration.md项目总览README.md写在最后从npm install到聊天界面跑起来Cloudflare Agents SDK 给出的路径相当短一个 wrangler 配置、一个AIChatAgent子类、两个 React 钩子。加上 MCP 集成后你的流式聊天智能体就能安全地调用外部工具与 API——这正是构建流式聊天智能体完整闭环的推荐姿势。动手试试吧【免费下载链接】skillsSkills for teaching agents how to build on Cloudflare.项目地址: https://gitcode.com/gh_mirrors/skills14/skills创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
