\n 一套前端智能应用开发工具包，让你的应用瞬间拥有 AI 能力\n
\n\n\n 📖 文档 |\n 🚀 快速开始 |\n 💡 使用场景 |\n 🛠️ 参与开发\n
\n\n> [!IMPORTANT]\n> **WebMCP 兼容性说明**：OpenTiny WebMCP 方案**全面兼容 Google Chrome 浏览器由 Google 官方定义的内置 WebMCP 协议**。这意味着您通过此 SDK 开发的 WebSkills 可以无缝接入浏览器原生的 AI 能力。\n\n---\n\n**OpenTiny NEXT-SDKs** 是一套前端智能应用开发工具包，旨在简化 WebAgent 的集成与使用，支持多种编程语言和前端框架，帮助开发者快速实现智能化功能。\n\n## 📑 目录\n\n- [✨ 主要特性](#-主要特性)\n- [📦 核心包说明](#-核心包说明)\n- [🚀 快速开始](#-快速开始)\n- [🌐 浏览器直接引入](#-浏览器直接引入)\n- [💡 核心概念](#-核心概念)\n- [📖 使用场景](#-使用场景)\n- [🛠️ 参与开发](#️-参与开发)\n- [📚 相关资源](#-相关资源)\n- [❓ 常见问题](#-常见问题)\n- [📄 许可证](#-许可证)\n\n## ✨ 主要特性\n\n- 🎯 **简化集成**：提供简洁的 API 封装，简化与 WebAgent 服务的连接、认证等逻辑\n- 🔌 **MCP 协议**：完整实现 Model Context Protocol（MCP）的 Web 版本，**全面兼容 Google Chrome 内置的 WebMCP 协议**，支持浏览器端工具调用\n- 🤖 **AI 对话组件**：提供开箱即用的 AI 对话框组件（`@opentiny/next-remoter`）\n- 🔄 **适配器层**：可将任意前端 AI 对话框组件快速接入 WebAgent 服务\n- 🌐 **多模态支持**：支持文字、语音等多模态输入，抹平不同 LLM 之间的差异\n- 📱 **二维码功能**：动态生成二维码，让企业应用的 MCP 服务快速接入 AI 对话框\n- 🎪 **遥控器模式**：提供 PC 端和移动端遥控器，通过对话方式操控前端应用\n\n## 📦 核心包说明\n\n### @opentiny/next-sdk（当前包）\n\n核心 SDK 包，提供：\n\n- **WebMcpServer**：MCP 服务端实现，将前端功能声明为 MCP 工具\n- **WebMcpClient**：MCP 客户端实现，连接 WebAgent 和其他 MCP 服务\n- **WebAgent**：前端智能代理核心逻辑\n- **McpSdk**：MCP SDK 封装\n- **Transport 层**：支持多种通信方式（MessageChannel、SSE、HTTP 等）\n- **工具函数和类型定义**：完整的 TypeScript 类型支持\n\n### @opentiny/next-remoter\n\n基于 `@opentiny/tiny-robot` 开发的 Vue3 AI 对话组件，提供：\n\n- 完整的 AI 对话界面\n- MCP 插件市场\n- 扫码添加应用功能\n- 多模型切换支持\n- 生成式 UI 渲染\n\n详见：[@opentiny/next-remoter 文档](../next-remoter/README.md)\n\n## 🚀 快速开始\n\n使用 OpenTiny NEXT-SDKs，只需要以下四步，就可以把你的前端应用变成智能应用。\n\n### 第一步：安装依赖\n\n```bash\nnpm install @opentiny/next-sdk\n```\n\n### 第二步：创建 MCP Server 并注册工具\n\n```typescript\nimport { WebMcpServer, createMessageChannelPairTransport, z } from '@opentiny/next-sdk'\n\n// 创建通信通道\nconst [serverTransport, clientTransport] = createMessageChannelPairTransport()\n\n// 创建 MCP Server\nconst server = new WebMcpServer({\n name: 'my-app-server',\n version: '1.0.0'\n})\n\n// 注册工具\nserver.registerTool(\n 'demo-tool',\n {\n title: '演示工具',\n description: '这是一个演示工具',\n inputSchema: {\n foo: z.string().describe('输入参数')\n }\n },\n async (params) => {\n console.log('接收到参数:', params)\n return {\n content: [\n {\n type: 'text',\n text: `已处理: ${params.foo}`\n }\n ]\n }\n }\n)\n\n// 连接 Server Transport\nawait server.connect(serverTransport)\n```\n\n### 第三步：创建 MCP Client 并连接 WebAgent\n\n```typescript\nimport { WebMcpClient } from '@opentiny/next-sdk'\n\n// 创建 MCP Client\nconst client = new WebMcpClient({\n name: 'my-app-client',\n version: '1.0.0'\n})\n\n// 连接 Client Transport\nawait client.connect(clientTransport)\n\n// 连接到 WebAgent 服务\nconst { sessionId } = await client.connect({\n agent: true,\n url: 'https://agent.opentiny.design/api/v1/webmcp-trial/mcp'\n})\n\nconsole.log('获取到的 sessionId:', sessionId)\n```\n\n✅ 完成！现在你的前端应用已经变成智能应用，可以被 AI 操控了。\n\n你可以通过各类 [MCP Host](https://modelcontextprotocol.io/clients) 来操控智能应用。\n\n### 第四步：添加 AI 遥控器（可选）\n\n我们提供了一个开箱即用的 AI 对话框组件，支持 PC 端和移动端，就像一个遥控器，可以通过对话方式操控你的前端应用。\n\n#### 安装遥控器组件\n\n```bash\nnpm install @opentiny/next-remoter\n```\n\n#### 在 Vue 项目中使用\n\n```vue\n\n\n\n