{"id":"2e948f14-ebda-48c6-a7fa-6b5d0792ceaf","shortId":"heXxJ5","kind":"skill","title":"webmcp-sdk-skill","tagline":"指导如何使用 WebMCP SDK库去开发WebAgent的技能包，将前端应用快速智能化。它包含 TinyRemoter，WebMcpServer，WebMcpClient，createRemoter， AI-Extension插件开发的文档及指南。","description":"# WebMCP SDK 使用助手\n\n**WebMCP-SDK** 是一套前端智能应用开发工具包，曾用名称`NEXT-SDKs`也是同一个库。 它旨在简化 WebAgent 的集成与使用，内置了 Vue 版本的`TinyRemoter`组件和 WebMcpServer，WebMcpClient 等重要的类。\n\n## 安装方式\n\n用户使用 WebMCP-SDK 库，需要安装 `@opentiny/next-sdk` 的 npm 包。\n用户使用 TinyRemoter 组件，需要安装 `@opentiny/next-remoter` 的 npm 包。\n\n## 使用方法\n\n根据任务类型，查阅对应的规则文档并严格遵循规范：\n\n| 规则文档                                                      | 适用场景                                                    |\n| ------------------------------------------------------------- | ----------------------------------------------------------- |\n| [快速开始](rules/index.md)                                    | WebMCP-SDK 库和 TinyRemoter 的入门指南                      |\n| [接入三方 AI 应用](rules/mcp-host.md)                         | 如何在各类 IDE 开发软件中，配置 mcpservers                  |\n| [Electron 应用接入](rules/electron.md)                        | 如何在 Electron 工程中接入 WebMCP-SDK                       |\n| [uni-app 应用接入](rules/uni-app.md)                          | 如何在 uni-app 工程中接入 WebMCP-SDK                        |\n| [本地连接](rules/connect-local.md)                            | 如何支持 iframe 方式接入 WebMCP-SDK 库                      |\n| [WebAgent 私有化部署](rules/web-agent-private-deployment.md)  | WebAgent 私有化部署用户指导书                               |\n| [总览](rules/webmcp-webskills.md)                             | WebMCP + WebSkills：企业级智能化页面操控方案                |\n| [Vue 工程最佳实践](rules/vue-webmcp-best-practice.md)         | Vue 工程的 WebMCP + WebSkills：企业级智能化页面操控方案     |\n| [Angular 工程最佳实践](rules/angular-webmcp-best-practice.md) | Angular 工程的 WebMCP + WebSkills：企业级智能化页面操控方案 |\n| [React 工程最佳实践](rules/react-webmcp-best-practice.md)     | React 工程的 WebMCP + WebSkills：企业级智能化页面操控方案   |\n| [WebMcpClient 类](rules/api-client.md)                        | WebMcpClient 的完整文档                                     |\n| [WebMcpServer 类](rules/api-server.md)                        | WebMcpServer 的完整文档                                     |\n| [AgentModelProvider 类](rules/api-agentModelProvider.md)      | AgentModelProvider 的完整文档                               |\n| [createRemoter 函数](rules/api-createRemoter.md)              | createRemoter 的完整文档                                    |\n| [工具函数](rules/api-tools.md)                                | WebMCP-SDK 库中导出的重要函数的完整文档                     |\n| [TinyRemoter 文档](rules/tiny-robot-remoter.md)               | TinyRemoter 的完整文档                                      |\n| [Skills 技能配置指南](rules/tiny-remoter-skills.md)           | WebSkills 的规范以及如何配置给 TinyRemoter 使用             |\n| [Custom llm 自定义大模型](rules/custom-llm.md)                | TinyRemoter 的 llmConfig 和 agentRoot 自定义配置的文档      |\n| [自定义 AI 对话框组件](rules/use-next-agent.md)               | useNextAgent 的使用文档，以及如何接入其它厂商的 UI          |\n| [技术架构](rules/ai-extension-architecture.md)                | AI-Extension 浏览器插件技术架构文档                         |\n| [MCP Servers 工具开发指南](rules/ai-extension-next-wxt.md)    | AI-Extension 中的 mcp-servers 开发指南                      |\n| [Skills 技能开发指南](rules/ai-extension-skills.md)           | AI-Extension 中的 Skills 技能开发指南                       |\n| [AI Extension 插件安装指南](rules/ai-extension-install.md)    | AI Extension 扩展插件安装指南                               |\n| [配置大模型](rules/ai-extension-model-config.md)              | AI Extension 中，如何自定义 AI 大模型配置指南               |","tags":["webmcp","sdk","skill","agent","skills","opentiny","agent-skills","ai-agents","tiny-charts","tiny-robot","tiny-vue"],"capabilities":["skill","source-opentiny","skill-webmcp-sdk-skill","topic-agent-skills","topic-ai-agents","topic-opentiny","topic-tiny-charts","topic-tiny-robot","topic-tiny-vue"],"categories":["agent-skills"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/opentiny/agent-skills/webmcp-sdk-skill","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add opentiny/agent-skills","source_repo":"https://github.com/opentiny/agent-skills","install_from":"skills.sh"}},"qualityScore":"0.457","qualityRationale":"deterministic score 0.46 from registry signals: · indexed on github topic:agent-skills · 14 github stars · SKILL.md body (3,286 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-04-22T01:02:23.474Z","embedding":null,"createdAt":"2026-04-19T00:40:43.251Z","updatedAt":"2026-04-22T01:02:23.474Z","lastSeenAt":"2026-04-22T01:02:23.474Z","tsv":"'agentmodelprovid':156,159 'agentroot':192 'ai':15,73,195,205,213,224,229,233,238,242 'ai-extens':204,212,223 'ai-extension插件开发的文档及指南':14 'angular':130,133 'app':92,98 'createremot':13,161,164 'custom':184 'electron':81,85 'extens':206,214,225,230,234,239 'extension插件开发的文档及指南':16 'ide':77 'ifram':106 'llm':185 'llmconfig':190 'mcp':208,217 'mcp-server':216 'mcpserver':80 'next':26 'next-sdk':25 'npm':49,57 'opentiny/next-remoter':55 'opentiny/next-sdk':47 'react':138,141 'rules/ai-extension-architecture.md':203 'rules/ai-extension-install.md':232 'rules/ai-extension-model-config.md':237 'rules/ai-extension-next-wxt.md':211 'rules/ai-extension-skills.md':222 'rules/angular-webmcp-best-practice.md':132 'rules/api-agentmodelprovider.md':158 'rules/api-client.md':148 'rules/api-createremoter.md':163 'rules/api-server.md':153 'rules/api-tools.md':167 'rules/connect-local.md':104 'rules/custom-llm.md':187 'rules/electron.md':83 'rules/index.md':65 'rules/mcp-host.md':75 'rules/react-webmcp-best-practice.md':140 'rules/tiny-remoter-skills.md':179 'rules/tiny-robot-remoter.md':174 'rules/uni-app.md':94 'rules/use-next-agent.md':197 'rules/vue-webmcp-best-practice.md':124 'rules/web-agent-private-deployment.md':114 'rules/webmcp-webskills.md':118 'sdk':3,18,22,44,68,89,102,110,170 'sdks':27 'sdk库去开发webagent的技能包':7 'server':209,218 'skill':4,177,220,227 'skill-webmcp-sdk-skill' 'source-opentiny' 'tinyremot':10,35,52,70,172,175,182,188 'topic-agent-skills' 'topic-ai-agents' 'topic-opentiny' 'topic-tiny-charts' 'topic-tiny-robot' 'topic-tiny-vue' 'ui':201 'uni':91,97 'uni-app':90,96 'usenextag':198 'vue':33,122,125 'webag':30,112,115 'webmcp':2,6,17,21,43,67,88,101,109,119,127,135,143,169 'webmcp-sdk':20,42,66,87,100,108,168 'webmcp-sdk-skil':1 'webmcpclient':12,38,146,149 'webmcpserv':11,37,151,154 'webskil':120,128,136,144,180 '中':240 '中的':215,226 '也是同一个库':28 '以及如何接入其它厂商的':200 '企业级智能化页面操控方案':121,129,137,145 '使用':183 '使用助手':19 '使用方法':59 '内置了':32 '函数':162 '包':50,58 '和':191 '大模型配置指南':243 '如何在':84,95 '如何在各类':76 '如何支持':105 '如何自定义':241 '它包含':9 '它旨在简化':29 '安装方式':40 '对话框组件':196 '将前端应用快速智能化':8 '工具函数':166 '工具开发指南':210 '工程中接入':86,99 '工程最佳实践':123,131,139 '工程的':126,134,142 '库':45,111 '库中导出的重要函数的完整文档':171 '库和':69 '应用':74 '应用接入':82,93 '开发指南':219 '开发软件中':78 '快速开始':64 '总览':117 '扩展插件安装指南':235 '技术架构':202 '技能开发指南':221,228 '技能配置指南':178 '指导如何使用':5 '接入三方':72 '插件安装指南':231 '文档':173 '方式接入':107 '是一套前端智能应用开发工具包':23 '曾用名称':24 '本地连接':103 '查阅对应的规则文档并严格遵循规范':61 '根据任务类型':60 '浏览器插件技术架构文档':207 '版本的':34 '用户使用':41,51 '的':48,56,189 '的使用文档':199 '的入门指南':71 '的完整文档':150,155,160,165,176 '的规范以及如何配置给':181 '的集成与使用':31 '私有化部署':113 '私有化部署用户指导书':116 '等重要的类':39 '类':147,152,157 '组件':53 '组件和':36 '自定义':194 '自定义大模型':186 '自定义配置的文档':193 '规则文档':62 '适用场景':63 '配置':79 '配置大模型':236 '需要安装':46,54","prices":[{"id":"a7a59e64-ed6c-4515-a3a1-90a6c35dd422","listingId":"2e948f14-ebda-48c6-a7fa-6b5d0792ceaf","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"opentiny","category":"agent-skills","install_from":"skills.sh"},"createdAt":"2026-04-19T00:40:43.251Z"}],"sources":[{"listingId":"2e948f14-ebda-48c6-a7fa-6b5d0792ceaf","source":"github","sourceId":"opentiny/agent-skills/webmcp-sdk-skill","sourceUrl":"https://github.com/opentiny/agent-skills/tree/main/skills/webmcp-sdk-skill","isPrimary":false,"firstSeenAt":"2026-04-19T00:40:43.251Z","lastSeenAt":"2026-04-22T01:02:23.474Z"}],"details":{"listingId":"2e948f14-ebda-48c6-a7fa-6b5d0792ceaf","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"opentiny","slug":"webmcp-sdk-skill","github":{"repo":"opentiny/agent-skills","stars":14,"topics":["agent-skills","ai","ai-agents","opentiny","tiny-charts","tiny-robot","tiny-vue"],"license":null,"html_url":"https://github.com/opentiny/agent-skills","pushed_at":"2026-04-18T01:30:26Z","description":"OpenTiny Agent Skills","skill_md_sha":"983180ea45edbe8babbfa5423a8b8b7f773e1b46","skill_md_path":"skills/webmcp-sdk-skill/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/opentiny/agent-skills/tree/main/skills/webmcp-sdk-skill"},"layout":"multi","source":"github","category":"agent-skills","frontmatter":{"name":"webmcp-sdk-skill","license":"MIT","description":"指导如何使用 WebMCP SDK库去开发WebAgent的技能包，将前端应用快速智能化。它包含 TinyRemoter，WebMcpServer，WebMcpClient，createRemoter， AI-Extension插件开发的文档及指南。"},"skills_sh_url":"https://skills.sh/opentiny/agent-skills/webmcp-sdk-skill"},"updatedAt":"2026-04-22T01:02:23.474Z"}}