@opentiny/next-sdk 0.2.1 → 0.2.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (23) hide show
  1. package/README.md +635 -5
  2. package/agent/AgentModelProvider.ts +47 -19
  3. package/dist/agent/AgentModelProvider.d.ts +10 -4
  4. package/dist/index.es.dev.js +74 -32
  5. package/dist/index.es.js +5942 -5923
  6. package/dist/index.js +496 -477
  7. package/dist/index.umd.dev.js +74 -32
  8. package/dist/index.umd.js +37 -37
  9. package/dist/{mcpsdk@1.25.2.dev.js → mcpsdk@1.25.3.dev.js} +3 -1
  10. package/dist/{mcpsdk@1.25.2.es.dev.js → mcpsdk@1.25.3.es.dev.js} +3 -1
  11. package/dist/{mcpsdk@1.25.2.es.js → mcpsdk@1.25.3.es.js} +1855 -1855
  12. package/dist/{mcpsdk@1.25.2.js → mcpsdk@1.25.3.js} +13 -13
  13. package/dist/remoter/createRemoter.d.ts +6 -1
  14. package/dist/webagent.dev.js +74 -32
  15. package/dist/webagent.es.dev.js +74 -32
  16. package/dist/webagent.es.js +3067 -3048
  17. package/dist/webagent.js +38 -38
  18. package/dist/webmcp-full.dev.js +3 -1
  19. package/dist/webmcp-full.es.dev.js +3 -1
  20. package/dist/webmcp-full.es.js +523 -523
  21. package/dist/webmcp-full.js +9 -9
  22. package/package.json +17 -2
  23. package/remoter/createRemoter.ts +72 -37
package/README.md CHANGED
@@ -1,13 +1,643 @@
1
- # OpenTiny NEXT SDK
1
+ # OpenTiny NEXT-SDKs
2
2
 
3
- OpenTiny NEXT SDK
3
+ <p align="center">
4
+ <strong>一套前端智能应用开发工具包，让你的应用瞬间拥有 AI 能力</strong>
5
+ </p>
4
6
 
5
- ## 安装
7
+ <p align="center">
8
+ <a href="https://docs.opentiny.design/next-sdk/">📖 文档</a> |
9
+ <a href="#-快速开始">🚀 快速开始</a> |
10
+ <a href="#-使用场景">💡 使用场景</a> |
11
+ <a href="#️-参与开发">🛠️ 参与开发</a>
12
+ </p>
13
+
14
+ ---
15
+
16
+ **OpenTiny NEXT-SDKs** 是一套前端智能应用开发工具包，旨在简化 WebAgent 的集成与使用，支持多种编程语言和前端框架，帮助开发者快速实现智能化功能。
17
+
18
+ ## 📑 目录
19
+
20
+ - [✨ 主要特性](#-主要特性)
21
+ - [📦 核心包说明](#-核心包说明)
22
+ - [🚀 快速开始](#-快速开始)
23
+ - [🌐 浏览器直接引入](#-浏览器直接引入)
24
+ - [💡 核心概念](#-核心概念)
25
+ - [📖 使用场景](#-使用场景)
26
+ - [🛠️ 参与开发](#️-参与开发)
27
+ - [📚 相关资源](#-相关资源)
28
+ - [❓ 常见问题](#-常见问题)
29
+ - [📄 许可证](#-许可证)
30
+
31
+ ## ✨ 主要特性
32
+
33
+ - 🎯 **简化集成**：提供简洁的 API 封装，简化与 WebAgent 服务的连接、认证等逻辑
34
+ - 🔌 **MCP 协议**：完整实现 Model Context Protocol（MCP）的 Web 版本，支持浏览器端工具调用
35
+ - 🤖 **AI 对话组件**：提供开箱即用的 AI 对话框组件（`@opentiny/next-remoter`）
36
+ - 🔄 **适配器层**：可将任意前端 AI 对话框组件快速接入 WebAgent 服务
37
+ - 🌐 **多模态支持**：支持文字、语音等多模态输入，抹平不同 LLM 之间的差异
38
+ - 📱 **二维码功能**：动态生成二维码，让企业应用的 MCP 服务快速接入 AI 对话框
39
+ - 🎪 **遥控器模式**：提供 PC 端和移动端遥控器，通过对话方式操控前端应用
40
+
41
+ ## 📦 核心包说明
42
+
43
+ ### @opentiny/next-sdk（当前包）
44
+
45
+ 核心 SDK 包，提供：
46
+
47
+ - **WebMcpServer**：MCP 服务端实现，将前端功能声明为 MCP 工具
48
+ - **WebMcpClient**：MCP 客户端实现，连接 WebAgent 和其他 MCP 服务
49
+ - **WebAgent**：前端智能代理核心逻辑
50
+ - **McpSdk**：MCP SDK 封装
51
+ - **Transport 层**：支持多种通信方式（MessageChannel、SSE、HTTP 等）
52
+ - **工具函数和类型定义**：完整的 TypeScript 类型支持
53
+
54
+ ### @opentiny/next-remoter
55
+
56
+ 基于 `@opentiny/tiny-robot` 开发的 Vue3 AI 对话组件，提供：
57
+
58
+ - 完整的 AI 对话界面
59
+ - MCP 插件市场
60
+ - 扫码添加应用功能
61
+ - 多模型切换支持
62
+ - 生成式 UI 渲染
63
+
64
+ 详见：[@opentiny/next-remoter 文档](../next-remoter/README.md)
65
+
66
+ ## 🚀 快速开始
67
+
68
+ 使用 OpenTiny NEXT-SDKs，只需要以下四步，就可以把你的前端应用变成智能应用。
69
+
70
+ ### 第一步：安装依赖
6
71
 
7
72
  ```bash
8
73
  npm install @opentiny/next-sdk
9
74
  ```
10
75
 
11
- ## 许可证
76
+ ### 第二步：创建 MCP Server 并注册工具
77
+
78
+ ```typescript
79
+ import { WebMcpServer, createMessageChannelPairTransport, z } from '@opentiny/next-sdk'
80
+
81
+ // 创建通信通道
82
+ const [serverTransport, clientTransport] = createMessageChannelPairTransport()
83
+
84
+ // 创建 MCP Server
85
+ const server = new WebMcpServer({
86
+ name: 'my-app-server',
87
+ version: '1.0.0'
88
+ })
89
+
90
+ // 注册工具
91
+ server.registerTool('demo-tool', {
92
+ title: '演示工具',
93
+ description: '这是一个演示工具',
94
+ inputSchema: {
95
+ foo: z.string().describe('输入参数')
96
+ },
97
+ }, async (params) => {
98
+ console.log('接收到参数:', params)
99
+ return {
100
+ content: [{
101
+ type: 'text',
102
+ text: `已处理: ${params.foo}`
103
+ }]
104
+ }
105
+ })
106
+
107
+ // 连接 Server Transport
108
+ await server.connect(serverTransport)
109
+ ```
110
+
111
+ ### 第三步：创建 MCP Client 并连接 WebAgent
112
+
113
+ ```typescript
114
+ import { WebMcpClient } from '@opentiny/next-sdk'
115
+
116
+ // 创建 MCP Client
117
+ const client = new WebMcpClient({
118
+ name: 'my-app-client',
119
+ version: '1.0.0'
120
+ })
121
+
122
+ // 连接 Client Transport
123
+ await client.connect(clientTransport)
124
+
125
+ // 连接到 WebAgent 服务
126
+ const { sessionId } = await client.connect({
127
+ agent: true,
128
+ url: 'https://agent.opentiny.design/api/v1/webmcp-trial/mcp'
129
+ })
130
+
131
+ console.log('获取到的 sessionId:', sessionId)
132
+ ```
133
+
134
+ ✅ 完成！现在你的前端应用已经变成智能应用，可以被 AI 操控了。
135
+
136
+ 你可以通过各类 [MCP Host](https://modelcontextprotocol.io/clients) 来操控智能应用。
137
+
138
+ ### 第四步：添加 AI 遥控器（可选）
139
+
140
+ 我们提供了一个开箱即用的 AI 对话框组件，支持 PC 端和移动端，就像一个遥控器，可以通过对话方式操控你的前端应用。
141
+
142
+ #### 安装遥控器组件
143
+
144
+ ```bash
145
+ npm install @opentiny/next-remoter
146
+ ```
147
+
148
+ #### 在 Vue 项目中使用
149
+
150
+ ```vue
151
+ <script setup lang="ts">
152
+ import { TinyRemoter } from '@opentiny/next-remoter'
153
+ import '@opentiny/next-remoter/dist/style.css'
154
+
155
+ // 使用上一步获取的 sessionId
156
+ const sessionId = 'your-session-id'
157
+ </script>
158
+
159
+ <template>
160
+ <tiny-remoter
161
+ :session-id="sessionId"
162
+ title="我的智能助手"
163
+ />
164
+ </template>
165
+ ```
166
+
167
+ #### 遥控器功能
168
+
169
+ 遥控器会在你的应用右下角显示一个图标，悬浮后可以选择：
170
+
171
+ - 💬 **弹出 AI 对话框**：在应用侧边打开 AI 对话界面
172
+ - 📱 **显示二维码**：手机扫码后打开移动端遥控器
173
+
174
+ 不管是 PC 端还是移动端，都可以通过自然语言对话的方式让 AI 帮你操作应用，极大提升工作效率！
175
+
176
+ ## 🌐 浏览器直接引入
177
+
178
+ 你也可以直接通过浏览器 HTML 标签导入 NEXT-SDKs，这样就可以使用全局变量 `WebMCP` 了。
179
+
180
+ ```html
181
+ <html>
182
+ <head>
183
+ <!-- 导入 NEXT-SDKs -->
184
+ <script src="https://unpkg.com/@opentiny/next-sdk@0.1/dist/index.umd.js"></script>
185
+ </head>
186
+ <body>
187
+ <script>
188
+ (async () => {
189
+ const { WebMcpServer, createMessageChannelPairTransport, z, WebMcpClient } = WebMCP;
190
+ const [serverTransport, clientTransport] = createMessageChannelPairTransport();
191
+
192
+ const client = new WebMcpClient();
193
+ await client.connect(clientTransport);
194
+ const { sessionId } = await client.connect({
195
+ agent: true,
196
+ url: "https://agent.opentiny.design/api/v1/webmcp-trial/mcp",
197
+ });
198
+
199
+ const server = new WebMcpServer();
200
+ server.registerTool(
201
+ "demo-tool",
202
+ {
203
+ title: "演示工具",
204
+ description: "一个简单工具",
205
+ inputSchema: { foo: z.string() },
206
+ },
207
+ async (params) => {
208
+ console.log("params:", params);
209
+ return { content: [{ type: "text", text: `收到: ${params.foo}` }] };
210
+ }
211
+ );
212
+
213
+ await server.connect(serverTransport);
214
+ })();
215
+ </script>
216
+ </body>
217
+ </html>
218
+ ```
219
+
220
+ ## 💡 核心概念
221
+
222
+ ### 架构概览
223
+
224
+ ```
225
+ ┌─────────────────────────────────────────────────────────────┐
226
+ │ 前端应用 │
227
+ │ ┌──────────────────┐ ┌───────────────────┐ │
228
+ │ │ WebMcpServer │◄────────────►│ WebMcpClient │ │
229
+ │ │ (注册工具) │ MessageChannel │ (连接 Agent) │ │
230
+ │ └──────────────────┘ └───────────────────┘ │
231
+ │ ▲ │ │
232
+ └───────────┼──────────────────────────────────┼──────────────┘
233
+ │ │
234
+ │ ▼
235
+ │ ┌─────────────────┐
236
+ │ │ WebAgent 服务 │
237
+ │ │ (AI + MCP Hub) │
238
+ │ └─────────────────┘
239
+ │ │
240
+ │ ▼
241
+ │ ┌─────────────────┐
242
+ └─────────────────────────┤ TinyRemoter │
243
+ │ (AI 遥控器) │
244
+ └─────────────────┘
245
+ ```
246
+
247
+ **工作流程：**
248
+
249
+ 1. **WebMcpServer** 在前端应用中注册可用的工具（如查询数据、操作 UI 等）
250
+ 2. **WebMcpClient** 连接到 **WebAgent 服务**，获取 sessionId
251
+ 3. **WebAgent** 作为中枢，连接 AI 大模型和各种 MCP 工具
252
+ 4. **TinyRemoter** 提供用户界面，用户通过自然语言对话操控应用
253
+ 5. AI 根据用户意图，调用相应的 MCP 工具完成任务
254
+
255
+ ### WebMcpServer
256
+
257
+ WebMcpServer 是 MCP 服务端的实现，用于将前端应用的功能声明为 MCP 工具。
258
+
259
+ ```typescript
260
+ import { WebMcpServer } from '@opentiny/next-sdk'
261
+
262
+ const server = new WebMcpServer({
263
+ name: 'my-app',
264
+ version: '1.0.0'
265
+ })
266
+
267
+ // 注册工具
268
+ server.registerTool('tool-name', {
269
+ title: '工具标题',
270
+ description: '工具描述',
271
+ inputSchema: { /* Zod schema */ }
272
+ }, async (params) => {
273
+ // 工具处理逻辑
274
+ return { content: [{ type: 'text', text: '结果' }] }
275
+ })
276
+ ```
277
+
278
+ ### WebMcpClient
279
+
280
+ WebMcpClient 是 MCP 客户端的实现，用于连接 WebAgent 服务和其他 MCP 服务。
281
+
282
+ ```typescript
283
+ import { WebMcpClient } from '@opentiny/next-sdk'
284
+
285
+ const client = new WebMcpClient({
286
+ name: 'my-client',
287
+ version: '1.0.0'
288
+ })
289
+
290
+ // 连接到 WebAgent
291
+ const { sessionId } = await client.connect({
292
+ agent: true,
293
+ url: 'https://agent.opentiny.design/api/v1/webmcp-trial/mcp'
294
+ })
295
+ ```
296
+
297
+ ### Transport 通信层
298
+
299
+ NEXT-SDKs 支持多种通信方式：
300
+
301
+ - **MessageChannel**：浏览器内跨窗口通信
302
+ - **SSE**：Server-Sent Events 服务器推送
303
+ - **HTTP**：标准 HTTP 请求
304
+
305
+ ```typescript
306
+ import { createMessageChannelPairTransport } from '@opentiny/next-sdk'
307
+
308
+ // 创建 MessageChannel 通信对
309
+ const [serverTransport, clientTransport] = createMessageChannelPairTransport()
310
+ ```
311
+
312
+ ## 📖 使用场景
313
+
314
+ - **🤝 智能客服**：快速搭建支持工具调用的 AI 客服系统
315
+ - **📚 文档助手**：为文档网站添加智能问答功能
316
+ - **🛠️ 开发工具**：构建支持代码生成、分析的开发辅助工具
317
+ - **🌐 浏览器扩展**：开发具有 AI 能力的浏览器插件
318
+ - **🏢 企业应用**：为企业应用添加智能化能力
319
+ - **📊 数据分析**：构建智能数据分析和可视化应用
320
+ - **✍️ 内容创作**：开发 AI 辅助的内容创作工具
321
+
322
+ ## 🛠️ 参与开发
323
+
324
+ 我们欢迎所有形式的贡献！无论是报告 Bug、提出新功能、改进文档还是提交代码，都非常感谢。
325
+
326
+ ### 环境要求
327
+
328
+ 在开始开发之前，请确保你的环境满足以下要求：
329
+
330
+ - **Node.js** >= 18.0.0
331
+ - **pnpm** >= 8.0.0
332
+ - **Git** 最新版本
333
+
334
+ ### 获取代码
335
+
336
+ ```bash
337
+ # 克隆项目
338
+ git clone https://github.com/opentiny/next-sdk.git
339
+ cd next-sdk
340
+
341
+ # 安装依赖
342
+ pnpm install
343
+ ```
344
+
345
+ ### 项目结构
346
+
347
+ ```
348
+ next-sdk/
349
+ ├── packages/
350
+ │ ├── next-sdk/ # 核心 SDK 包
351
+ │ │ ├── agent/ # WebAgent 实现
352
+ │ │ ├── client/ # WebMCP 客户端
353
+ │ │ ├── server/ # WebMCP 服务端
354
+ │ │ ├── transport/ # 传输层实现
355
+ │ │ ├── McpSdk.ts # MCP SDK 封装
356
+ │ │ ├── index.ts # 主入口
357
+ │ │ ├── package.json
358
+ │ │ └── README.md
359
+ │ ├── next-remoter/ # Vue3 AI 对话组件
360
+ │ │ ├── src/
361
+ │ │ │ ├── components/ # 组件实现
362
+ │ │ │ └── composable/ # 组合式函数
363
+ │ │ ├── package.json
364
+ │ │ └── README.md
365
+ │ └── doc-ai/ # 文档示例应用
366
+ ├── docs/ # 项目文档
367
+ ├── pnpm-workspace.yaml # pnpm 工作区配置
368
+ ├── package.json
369
+ └── README.md
370
+ ```
371
+
372
+ ### 开发流程
373
+
374
+ #### 1. 开发核心 SDK
375
+
376
+ ```bash
377
+ # 进入 next-sdk 包目录
378
+ cd packages/next-sdk
379
+
380
+ # 开发模式（支持热重载）
381
+ pnpm dev
382
+
383
+ # 运行测试
384
+ pnpm test
385
+
386
+ # 构建项目
387
+ pnpm build
388
+ ```
389
+
390
+ #### 2. 开发 Remoter 组件
391
+
392
+ ```bash
393
+ # 进入 next-remoter 包目录
394
+ cd packages/next-remoter
395
+
396
+ # 启动开发服务器
397
+ pnpm dev
398
+
399
+ # 浏览器访问 http://localhost:5173
400
+ ```
401
+
402
+ #### 3. 调试示例应用
403
+
404
+ ```bash
405
+ # 进入 doc-ai 示例目录
406
+ cd packages/doc-ai
407
+
408
+ # 启动开发服务器
409
+ pnpm dev
410
+ ```
411
+
412
+ ### 构建脚本说明
413
+
414
+ 核心 SDK 提供多种构建脚本：
415
+
416
+ ```bash
417
+ # 构建所有版本（生产版 + 开发版）
418
+ pnpm build:all
419
+
420
+ # 仅构建生产版本
421
+ pnpm build:cdn
422
+
423
+ # 构建开发版本（包含 source map）
424
+ pnpm build:cdn:dev
425
+
426
+ # 构建特定模块
427
+ pnpm build:webAgent # WebAgent 模块
428
+ pnpm build:webMcp # WebMCP 模块
429
+ pnpm build:mcpSdk # MCP SDK 模块
430
+ pnpm build:zod # Zod 验证模块
431
+ pnpm build:webMcpFull # WebMCP 完整版本
432
+ ```
433
+
434
+ ### 代码规范
435
+
436
+ 在提交代码前，请确保代码符合以下规范：
437
+
438
+ - **TypeScript**：使用 TypeScript 编写类型安全的代码
439
+ - **代码风格**：遵循项目的 ESLint 配置
440
+ - **命名规范**：
441
+ - 文件名：使用 kebab-case（如 `web-mcp-client.ts`）
442
+ - 类名：使用 PascalCase（如 `WebMcpClient`）
443
+ - 函数名：使用 camelCase（如 `registerTool`）
444
+ - 常量：使用 UPPER_SNAKE_CASE（如 `MAX_RETRY_COUNT`）
445
+ - **注释**：为关键逻辑添加清晰的中文注释
446
+ - **测试**：为新功能添加单元测试
447
+
448
+ ### 提交代码
449
+
450
+ #### 1. 创建分支
451
+
452
+ ```bash
453
+ # 基于主分支创建功能分支
454
+ git checkout -b feature/your-feature-name
455
+
456
+ # 或者创建修复分支
457
+ git checkout -b fix/your-bug-fix
458
+ ```
459
+
460
+ #### 2. 提交规范
461
+
462
+ 我们使用约定式提交（Conventional Commits）规范：
463
+
464
+ ```bash
465
+ # 新功能
466
+ git commit -m "feat: 添加 XXX 功能"
467
+
468
+ # Bug 修复
469
+ git commit -m "fix: 修复 XXX 问题"
470
+
471
+ # 文档更新
472
+ git commit -m "docs: 更新 XXX 文档"
473
+
474
+ # 代码重构
475
+ git commit -m "refactor: 重构 XXX 模块"
476
+
477
+ # 性能优化
478
+ git commit -m "perf: 优化 XXX 性能"
479
+
480
+ # 测试相关
481
+ git commit -m "test: 添加 XXX 测试"
482
+
483
+ # 构建相关
484
+ git commit -m "build: 更新构建配置"
485
+
486
+ # CI 相关
487
+ git commit -m "ci: 更新 CI 配置"
488
+ ```
489
+
490
+ #### 3. 推送并创建 PR
491
+
492
+ ```bash
493
+ # 推送到远程分支
494
+ git push origin feature/your-feature-name
495
+
496
+ # 在 GitHub 上创建 Pull Request
497
+ # 填写 PR 描述，说明改动内容和原因
498
+ ```
499
+
500
+ ### 发布流程
501
+
502
+ > 注意：发布需要项目维护者权限
503
+
504
+ ```bash
505
+ # 1. 更新版本号
506
+ # 编辑 packages/next-sdk/package.json 中的 version 字段
507
+
508
+ # 2. 更新 CHANGELOG
509
+ # 记录本次发布的主要变更
510
+
511
+ # 3. 构建项目
512
+ pnpm build:all
513
+
514
+ # 4. 发布到 npm
515
+ cd packages/next-sdk
516
+ npm publish
517
+
518
+ # 或者发布 next-remoter
519
+ cd packages/next-remoter
520
+ npm publish
521
+ ```
522
+
523
+ ### 报告问题
524
+
525
+ 如果你发现了 Bug 或有功能建议，请通过以下方式反馈：
526
+
527
+ 1. 访问 [GitHub Issues](https://github.com/opentiny/next-sdk/issues)
528
+ 2. 点击 "New Issue"
529
+ 3. 选择合适的 Issue 模板
530
+ 4. 填写详细的问题描述：
531
+ - **Bug 报告**：包括复现步骤、预期行为、实际行为、环境信息等
532
+ - **功能建议**：说明需求背景、期望功能、使用场景等
533
+
534
+ ### 参与讨论
535
+
536
+ - 加入 [OpenTiny 社区](https://github.com/opentiny/next-sdk/discussions)
537
+ - 关注 [OpenTiny 官网](https://opentiny.design)
538
+ - 在 Issue 中参与技术讨论
539
+ - 帮助回答其他开发者的问题
540
+
541
+ ## 📚 相关资源
542
+
543
+ ### 官方文档
544
+
545
+ - [OpenTiny NEXT-SDKs 官方文档](https://docs.opentiny.design/next-sdk/)
546
+ - [TinyRobot Remoter 组件文档](https://docs.opentiny.design/next-sdk/guide/tiny-robot-remoter.html)
547
+ - [API 参考文档](https://docs.opentiny.design/next-sdk/api/)
548
+
549
+ ### 相关项目
550
+
551
+ - [OpenTiny](https://github.com/opentiny) - OpenTiny 组织主页
552
+ - [TinyVue](https://github.com/opentiny/tiny-vue) - 企业级 Vue 组件库
553
+ - [TinyEngine](https://github.com/opentiny/tiny-engine) - 低代码引擎
554
+ - [TinyRobot](https://github.com/opentiny/tiny-robot) - AI 对话组件
555
+
556
+ ### 示例项目
557
+
558
+ - [doc-ai](../doc-ai) - 文档 AI 助手示例
559
+ - [next-wxt](https://github.com/opentiny/next-sdk/tree/main/packages/next-wxt) - 浏览器扩展示例
560
+
561
+ ### MCP 协议
562
+
563
+ - [Model Context Protocol 官方文档](https://modelcontextprotocol.io/)
564
+ - [MCP Specification](https://spec.modelcontextprotocol.io/)
565
+ - [MCP SDK](https://github.com/modelcontextprotocol/sdk)
566
+
567
+ ### 外部链接
568
+
569
+ - [GitHub 仓库](https://github.com/opentiny/next-sdk)
570
+ - [NPM 包 - @opentiny/next-sdk](https://www.npmjs.com/package/@opentiny/next-sdk)
571
+ - [NPM 包 - @opentiny/next-remoter](https://www.npmjs.com/package/@opentiny/next-remoter)
572
+ - [问题反馈](https://github.com/opentiny/next-sdk/issues)
573
+ - [贡献指南](https://github.com/opentiny/next-sdk/blob/main/CONTRIBUTING.md)
574
+
575
+ ## ❓ 常见问题
576
+
577
+ ### 1. 如何获取 sessionId？
578
+
579
+ 通过 WebMcpClient 连接 WebAgent 服务后自动获取：
580
+
581
+ ```typescript
582
+ const { sessionId } = await client.connect({
583
+ agent: true,
584
+ url: 'https://agent.opentiny.design/api/v1/webmcp-trial/mcp'
585
+ })
586
+ ```
587
+
588
+ ### 2. 如何自定义 MCP 工具？
589
+
590
+ 使用 `server.registerTool()` 注册自定义工具：
591
+
592
+ ```typescript
593
+ server.registerTool('my-tool', {
594
+ title: '我的工具',
595
+ description: '工具描述',
596
+ inputSchema: {
597
+ param1: z.string(),
598
+ param2: z.number()
599
+ }
600
+ }, async (params) => {
601
+ // 实现工具逻辑
602
+ return { content: [{ type: 'text', text: '执行结果' }] }
603
+ })
604
+ ```
605
+
606
+ ### 3. 支持哪些大语言模型？
607
+
608
+ NEXT-SDKs 支持所有兼容 AI SDK 的大语言模型，包括：
609
+
610
+ - OpenAI（GPT-4、GPT-3.5 等）
611
+ - DeepSeek
612
+ - Anthropic Claude
613
+ - 通义千问
614
+ - 文心一言
615
+ - 其他自定义模型
616
+
617
+ ### 4. 如何处理跨域问题？
618
+
619
+ WebMCP 使用 MessageChannel 进行跨窗口通信，不受浏览器跨域限制。如果需要连接远程 MCP 服务，服务端需要正确配置 CORS。
620
+
621
+ ### 5. 能否在 React 项目中使用？
622
+
623
+ 可以！NEXT-SDKs 的核心功能与框架无关。虽然 `@opentiny/next-remoter` 是 Vue3 组件，但你可以：
624
+
625
+ - 直接使用核心 SDK（`@opentiny/next-sdk`）
626
+ - 基于核心 SDK 开发 React 版本的对话组件
627
+ - 使用浏览器直接引入方式
628
+
629
+ ## 📄 许可证
630
+
631
+ [MIT](https://github.com/opentiny/next-sdk/blob/main/LICENSE)
632
+
633
+ Copyright (c) 2024-present OpenTiny Team
634
+
635
+ ## 🙏 致谢
636
+
637
+ 感谢所有为 OpenTiny NEXT-SDKs 项目做出贡献的开发者！
638
+
639
+ [![contributors](https://contrib.rocks/image?repo=opentiny/next-sdk)](https://github.com/opentiny/next-sdk/graphs/contributors)
640
+
641
+ ---
12
642
 
13
- MIT
643
+ 如有任何问题或建议，欢迎提交 [Issue](https://github.com/opentiny/next-sdk/issues) 或 [Pull Request](https://github.com/opentiny/next-sdk/pulls)。