most common ones include AI assisting in writing code, creating videos, making PPTs, and designing drafts.
Have you ever thought about AI assisting people in operating webpages?
This is what the OpenTiny NEXT-SDK does.
1 Introduction
OpenTiny NEXT-SDK is a development toolkit tailored for front-end intelligent applications. Its core is based on the MCP (Model Context Protocol), enabling front-end applications to quickly integrate with AI Agents, thus achieving the capability of directly manipulating front-end interfaces with intelligent agents.
The OpenTiny NEXT-SDK can assist developers in:
• Quickly transform ordinary front-end applications into MCP Servers, exposing interface operation capabilities to the outside world
• Enable the AI Agent (WebAgent) to read interfaces, invoke functions, and perform operations through the standard MCP protocol
• Quickly integrate AI dialog components (such as TinyRobot) to build an intelligent interactive front end
2 Project advantages
NEXT-SDK is implemented based on the MCP protocol, extending the capabilities of MCP to the web side, enabling web applications to be controlled by AI. The following are the advantages of the project:
• Expand the scope of MCP tools: Provide more MCP tools for Agent intelligence to achieve capabilities not available in current local/cloud service MCP tools, namely the ability to manipulate front-end applications. This capability is faster, more accurate, and more economical than RPA solutions (Browser Use / Computer Use)
• Fully compatible with the MCP ecosystem: All front-end applications declare MCP Server using the standard MCP protocol and connect based on standard MCP communication methods, such as Streamable HTTP, meaning they can fully integrate into the existing MCP ecosystem and are compatible with existing and even future MCP Host applications
• Support for agent interaction paradigm: Current front-end applications primarily focus on human-computer interaction, where humans manually operate the UI components on the front-end interface. With the introduction of OpenTiny NEXT-SDK, agents can leverage the MCP tool to read information from and invoke functions on the front-end interface, enabling a new agent interaction paradigm in conjunction with generative UI
• Diverse front-end intelligent solutions: It not only supports the front-end intelligent transformation of Web applications, but also comprehensively covers the multi-terminal deployment scenarios of AI applications (dialog boxes) - whether it is browser extensions, Web page integrations, or built-in AI assistants on various terminals, MCP tools in front-end applications can be directly or indirectly invoked
3 Demonstration animation
Let's watch a demo animation together to intuitively experience the capabilities of NEXT-SDK!
For front-end applications integrated with NEXT-SDK, a robot icon will appear in the lower right corner. Clicking this icon will bring up an AI dialogue box from the side. We can engage in natural language conversations with the AI, allowing it to assist us in operating the front-end application.
For example, we can input the following content:
Help me create the following users, with the user information as follows:
Email: zhangsan@sina.com
Password: Abc123456
Username: zhangsan
At this point, the AI will invoke the MCP tool named "add-user" defined on the page to assist us in creating the user "zhangsan".
We have provided a Playground code sandbox where you can experience the capabilities of NEXT-SDK online.
NEXT-SDK Playground：https://playground.opentiny.design/next-sdk
4 Quick access
Using OpenTiny NEXT-SDK, you can turn your front-end application into a smart application in just four steps.
Step 1: Install dependencies
npm install @opentiny/next-sdk
Step 2: Create MCP Client
Define WebMcpClient in the main entry of the web application (such as the App.vue file in a Vue project).
import { onMounted, provide } from 'vue'
import { WebMcpClient, createMessageChannelPairTransport } from '@opentiny/next-sdk'
onMounted(async () => {
// Create a communication channel
const [serverTransport, clientTransport] = createMessageChannelPairTransport()
provide('serverTransport', serverTransport)
// Create MCP Client
const client = new WebMcpClient()
await client.connect(clientTransport)
// This sessionId is generated by the WebAgent service after the Web application establishes a connection with the WebAgent service, and is used to uniquely identify the manipulated Web application (the controlled end)
const { sessionId } = await client.connect({
agent: true,
url: 'https://agent.opentiny.design/api/v1/webmcp-trial/mcp'
})
})
Step 3: Create MCP Server
Define WebMcpServer in the sub-pages of the Web application (for example: views/page1.vue). Each page can define its own WebMcpServer. When switching pages, the MCP Client establishes a connection with the MCP Server of the current page and discards the connection with the previous page.
import { onMounted, inject } from 'vue'
import { WebMcpServer, z } from '@opentiny/next-sdk'
onMounted(async () => {
const serverTransport = inject('serverTransport')
// Create MCP Server
const server = new WebMcpServer({
name: 'mcp-server-page1',
version: '1.0.0'
})
// Define MCP tool
server.registerTool(
'demo-tool',
{
title: 'Demo Tool',
description: 'A simple tool',
inputSchema: { foo: z.string() }
},
async (params) => {
console.log('params:', params)
return { content: [{ type: 'text', text: \`Received: \${params.foo}\` }] }
}
)
await server.connect(serverTransport)
})
Done! Now your front-end application has become an intelligent application that can be controlled by AI. You can manipulate the intelligent application through various MCP Hosts.
Step 4: Add AI remote control
We provide an out-of-the-box AI dialog component that supports both PC and mobile devices. It acts like a remote control, allowing you to manipulate your front-end application through conversation.
Install the remote control component:
npm install @opentiny/next-remoter
In Vue projects, you can use:
<script setup lang="ts">
import { TinyRemoter } from '@opentiny/next-remoter'
import '@opentiny/next-remoter/dist/style.css'
// Use the sessionId obtained in step 2
const sessionId = 'your-session-id'
</script>
<template>
<tiny-remoter
:session-id="sessionId"
title="My Smart Assistant"
/>
</template>
The remote control will display an icon in the lower right corner of your app. After hovering over it, you can choose from the following options:
• Pop up AI dialog box: Open the AI dialog interface on the side of the application
• Display QR code: After scanning the QR code with your phone, the mobile remote control will be opened
Whether on the PC or mobile device, you can utilize AI to assist you in operating applications through natural language dialogue, significantly enhancing work efficiency!
If you want to learn more about the usage of NEXT-SDK, please refer to the official documentation of NEXT-SDK: https://docs.opentiny.design/next-sdk
5 Act immediately
In today's rapidly evolving AI technology landscape, front-end intelligence is no longer a "high-end requirement", but rather a core competency and a must-have for enhancing product competitiveness and operational efficiency.
OpenTiny NEXT-SDK enables front-end AI integration, transitioning from "complex pitfalls" to "getting started in 5 minutes", instantly equipping your application with AI capabilities and leading the industry in intelligent innovation!
Act now to unlock new possibilities of front-end intelligence:
• Execute npm install @opentiny/next-sdk to install OpenTiny NEXT-SDK. Get started with hands-on practice in 5 minutes and quickly experience the AI control effect
• Visit the official website of OpenTiny NEXT-SDK at https://opentiny.design/next-sdk to view detailed project introductions, API documentation, and advanced usage
• Visit the OpenTiny NEXT-SDK Code Playground at https://playground.opentiny.design/next-sdk to experience AI-powered automatic front-end application operations online
• Add the OpenTiny WeChat mini-assistant: opentiny-official, join the OpenTiny technical exchange group, receive one-on-one integration guidance, solve practical problems, and exchange AI front-end integration experiences with peers
• Supported project: https://github.com/opentiny/next-sdk (Welcome to give a star)
If you have any questions, feel free to leave a message and discuss them in the comment section!
If you also want to collaborate, you can enter the code repository, find the "good first issue" tag, and participate in open source contributions together
Top comments (0)