快速开始

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

shell

npm i @opentiny/next-sdk

第二步：创建 WebMcpServer ，并与 ServerTransport 连接

typescript

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 连接

typescript

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 端和手机端，它就像一个遥控器，你可以通过这个遥控器操控你的前端应用。

第四步：引入并使用遥控器

安装遥控器：

shell

npm i @opentiny/next-remoter

在 App.vue 中使用遥控器：

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

<html>
  <head>
    <!-- 导入 NEXT-SDKs -->
    <script src="https://unpkg.com/@opentiny/next-sdk@0.1/dist/webmcp-full.js"></script>
  </head>
  <body>
    <script>
      ;(async () => {
        const { WebMcpServer, createMessageChannelPairTransport, z, WebMcpClient } = WebMCP
        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)

        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'
        })

        console.log('sessionId:', sessionId)
      })()
    </script>
  </body>
</html>

快速开始 ​

让你的应用智能化 ​

浏览器直接引入 ​

快速开始

让你的应用智能化

浏览器直接引入