OpenTiny NEXT-SDKs 是一套前端智能应用开发工具包，旨在简化 WebAgent 的集成与使用，支持多种编程语言和前端框架，帮助开发者快速实现智能化功能。
- 核心 SDK (包括 TypeScript, Python, Java 等版本) 提供简化的 API 封装与 WebAgent 服务的连接、认证等逻辑，同时提供易用的 API 让开发者将企业应用的前端功能声明为 MCP Server。
- 针对不同前端框架（Vue、React、Angular、Vanilla）特性，提供 API 以降低用户在特定前端框架中的使用 MCP Server 和连接 WebAgent 的难度。
- 提供一个适配器层，可以将任意前端 AI 对话框组件（包括 TinyRobot 组件）快速接入 WebAgent 服务。
- 支持抹平不同 LLM 差异，支持文字、语音等多模态输入，使得 AI 对话框连接的 LLM 支持受控端的 MCP 工具调用。
- 提供动态生成二维码功能，让企业应用里的 MCP 服务成为 AI 对话框里可以让 Agent 调用的工具。
使用 OpenTiny NEXT-SDKs，只需要以下四步，就可以把你的前端应用变成智能应用。
第一步：安装 NEXT-SDKs
npm i @opentiny/next-sdk第二步：创建 WebMcpServer ，并与 ServerTransport 连接
import { WebMcpServer, createMessageChannelPairTransport, z } from '@opentiny/next-sdk'
const [serverTransport, clientTransport] = createMessageChannelPairTransport()
const server = new WebMcpServer()
server.registerTool('demo-tool', {
title: '演示工具',
description: '一个简单工具',
inputSchema: { foo: z.string() },
}, async (params) => {
console.log('params:', params)
return { content: [{ type: 'text', text: `收到: ${params.foo}` }] }
})
await server.connect(serverTransport)第三步：创建 WebMcpClient ，并与 WebAgent 连接
import { WebMcpClient } from '@opentiny/next-sdk'
const client = new WebMcpClient()
await client.connect(clientTransport)
const { sessionId } = await client.connect({
agent: true,
url: 'https://agent.opentiny.design/api/v1/webmcp-trial/mcp'
})完成以上步骤，你的前端应用就变成了一个智能应用，就可以被 AI 操控，你可以通过各类 MCP Host 操控智能应用。
我们还提供了一个网页版本的 AI 对话框，这个 AI 对话框支持 PC 端和手机端，它就像一个遥控器，你可以通过这个遥控器操控你的前端应用。
第四步：引入并使用遥控器
安装遥控器：
npm i @opentiny/next-remoter在 App.vue 中使用遥控器：
<script setup lang="ts">
import { TinyRemoter } from '@opentiny/next-remoter'
import '@opentiny/next-remoter/dist/style.css'
</script>
<template>
<tiny-remoter session-id="your-session-id" />
</template>这时你的前端应用右下角会出现一个图标，这就是遥控器的入口，你可以将鼠标悬浮到这个图标上，选择：
- 弹出 AI 对话框，你的前端应用侧边会打开一个 AI 对话框
- 弹出二维码，手机扫码之后会打开手机端的遥控器
不管是通过弹出 AI 对话框，还是通过手机扫码，你都可以通过对话方式让 AI 代替你操作前端应用，提升完成任务的效率。
你也可以直接通过浏览器 HTML 标签导入 NEXT-SDKs ，这样就可以使用全局变量 WebMCP 了。
<html>
<head>
<!-- 导入 NEXT-SDKs -->
<script src="https://unpkg.com/@opentiny/next-sdk@0.1/dist/index.umd.js"></script>
</head>
<body>
<script>
(async () => {
const { WebMcpServer, createMessageChannelPairTransport, z, WebMcpClient } = WebMCP;
const [serverTransport, clientTransport] = createMessageChannelPairTransport();
const client = new WebMcpClient();
await client.connect(clientTransport);
const { sessionId } = await client.connect({
agent: true,
url: "https://agent.opentiny.design/api/v1/webmcp-trial/mcp",
});
const server = new WebMcpServer();
server.registerTool(
"demo-tool",
{
title: "演示工具",
description: "一个简单工具",
inputSchema: { foo: z.string() },
},
async (params) => {
console.log("params:", params);
return { content: [{ type: "text", text: `收到: ${params.foo}` }] };
}
);
await server.connect(serverTransport);
})();
</script>
</body>
</html>