OpenTiny NEXT-SDKs

Step 1: Install Dependencies

npm install @opentiny/next-sdk

Prerequisites

Before you start developing, please make sure your environment meets the following requirements:

• Node.js >= 18.0.0
• pnpm >= 8.0.0
• Git Latest version

Install dependencies

pnpm install ```

🚀 Getting Started

1. Installation

You can install it globally from NPM:

npm install -g @opentiny/webmcp-cli

Or run it locally within this monorepo:

cd packages/webmcp-cli
pnpm build
npm install -g .

2. Open a Page

Launch a headless/headful browser and navigate to a URL:

webmcp-cli tabs open https://excalidraw.com

3. Inspect Browser State

Get current URL, title, open tabs, and available WebMCP tools, along with an indexed representation of the DOM tree:

webmcp-cli state

Output includes interactive element IDs (e.g., [18]<button>Search</button>) and tool lists.

4. Run an MCP Tool

Directly trigger actions using standard MCP calls:

```bash

Build project

pnpm build

#### 2. Develop Remoter Component

Build Script Description

The core SDK provides multiple build scripts:

```bash

Build all versions (production + dev)

pnpm build:all

Build production version only

pnpm build:cdn

Build dev version (includes source maps)

pnpm build:cdn:dev

Build specific module

pnpm build:webAgent # WebAgent module pnpm build:webMcp # WebMCP module pnpm build:mcpSdk # MCP SDK module pnpm build:zod # Zod validation module pnpm build:webMcpFull # WebMCP full version ```

Build related

git commit -m "build: Update build config"

3. Build project

pnpm build:all

🚀 Quick Start

Turn your front-end application into an AI-Native one in just a few lines.

🧠 Agent Skill Guidelines

Under packages/webmcp-skill, we define a set of Agent Skills (System instructions and reference templates). When an AI agent connects to a webpage, it reads SKILL.md to learn how to interact with the page.

For complex pages, it also loads domain-specific sub-skills: - Excalidraw (domains/excalidraw.md): Instructs the agent on how to call canvas drawing commands (excalidraw_execute_command) to draw flowcharts and shapes. - Baidu Search: Executes search actions and parses results automatically.

This makes NEXT-SDKs not just an API for your app, but a complete playground for autonomous AI agents.

---

Enter doc-ai example directory

cd packages/doc-ai

Other Example Projects

• next-wxt - Browser extension example (WXT framework)

OpenTiny NEXT-SDKs: Built-in WebMCP & Polyfill + WebSkills + WebAgent

English | 简体中文

<p align="center"> <strong>A front-end intelligent application development and browser automation toolkit. It turns existing apps intelligent via WebMCP + WebSkills, and provides webmcp-cli to perceive and control any webpage with zero refactoring.</strong> </p>

<p align="center"> <a href="https://docs.opentiny.design/next-sdk/">📖 Docs</a> | <a href="#-quick-start">🚀 Quick Start</a> | <a href="#-webmcp--polyfill">🌐 WebMCP & Polyfill</a> | <a href="#-scenarios">💡 Scenarios</a> </p>

[!IMPORTANT] Next-Gen AI Protocol: OpenTiny NEXT-SDKs is built on the WebMCP (Model Context Protocol for Web). It is fully compatible with the native navigator.modelContext API (currently in experimental stage in browsers like Chrome), allowing your web apps to be controlled by AI via a standardized protocol.

[!TIP] ✨ Command-line Automation & AI Skills: We now offer webmcp-cli (browser control & polyfill auto-injection CLI) and webmcp-skill (standard instructions and sub-skills like Excalidraw drawing for AI agents). Together, they enable AI agents to perform complex, fine-grained tasks and "remote-drive" any webpage out of the box.

---

OpenTiny NEXT-SDKs is a front-end intelligent application development and browser automation toolkit. Beyond enabling the "WebMCP + WebSkills" model to expose page operations as standardized tools in just a few lines of code, it features webmcp-cli to connect, perceive, and control any webpage with zero source code modifications, instantly bringing out-of-the-box AI-Native capability to any web app.

Step 3: Register Tools via Standard API

Now you can use the standard navigator.modelContext to register tools anywhere in your app:

// Register a tool that AI can call
navigator.modelContext.registerTool({
  name: 'get_user_info',
  description: 'Get current user profile',
  inputSchema: {
    type: 'object',
    properties: {
      userId: { type: 'string' }
    }
  },
  execute: async (args) => {
    // Your business logic here
    return { content: [{ type: 'text', text: `Info for user ${args.userId}` }] }
  }
})

✅ Done! Your app is now an MCP Server. You can connect it to any MCP-compatible client or use our TinyRemoter to start chatting with your app.

---

@opentiny/next-sdk (Current Package)

Core SDK package, providing:

• Built-in WebMCP Polyfill: Injects navigator.modelContext and sets up the bridge for seamless AI-to-Page communication.
• WebMcpServer: Managed MCP server for full control over lifecycle and transports.
• WebMcpClient: MCP client for connecting to WebAgents and other services.
• WebAgent: High-level agent orchestration logic.
• Transport Layer: Support for MessageChannel, SSE, HTTP, and Chrome Extension messaging.

💻 WebMCP CLI & Agent Skills

With the WebMCP CLI, you can expose browser control directly to AI agents. It runs a local Puppeteer instance under the hood and maps page actions to standard MCP tools.

Enter next-sdk package directory

cd packages/next-sdk

Edit the version field in packages/next-sdk/package.json

📦 Core Packages Description

Enter next-remoter package directory

cd packages/next-remoter

❓ FAQ