How AI Can Operate Web Apps: OpenTiny’s MCP‑Powered TinyVue Solution

Kagol, a former Huawei front‑end engineer and OpenTiny community lead, presented at Huawei Developer Conference 2025 (HDC2025) about using the Model Context Protocol (MCP) to let AI replace human interaction with web applications.

1 What is MCP?

MCP (Model Context Protocol) defines how large language models interact with external tools, standardising the communication so models can retrieve data or invoke capabilities without custom prompts.

2 Why enable AI to operate web apps?

Traditional web apps require users to read manuals and perform many clicks. By allowing AI to act as a personal assistant, users can simply describe their intent in natural language, and the AI will execute the required steps, dramatically improving efficiency and experience.

3 TinyVue intelligent component library

The technology has been integrated into the TinyVue component library, making its components natively recognisable and controllable by AI. A set of MCP tools for common component actions (e.g., inserting rows, selecting items) is provided, and SDKs for Vue, React, Angular enable rapid AI integration.

4 Demonstrations

Video demos show AI controlling a TinyVue table via a web chat box, VSCode Copilot text and voice dialogs, and Dify/Coze agents, illustrating tasks such as selecting the company with the most employees or choosing the most expensive CPU option.

5 Implementation details

The solution follows a typical client‑server architecture with three key parts:

MCP Host

: the runtime environment (e.g., VSCode Copilot, Dify, mobile app) that mediates between the user, the model, and external resources.

MCP Client

: created by the host to maintain a stateful session with the server and translate host requests into MCP messages.

MCP Server

: implements external capabilities such as file I/O, database access, or web‑app manipulation.

OpenTiny provides the

@opentiny/next-vue

SDK (createTransportPair) and the

@opentiny/tiny-vue-mcp

package to define MCP tools for TinyVue components. Example tool definitions:

tools: {
  getTableData: {
    paramsSchema: z.boolean().optional().describe(t('ai.grid.getTableData')),
    cb: (instance) => {
      const tableData = instance.getData()
      return { type: 'text', text: JSON.stringify(tableData) }
    }
  },
  setSelection: {
    paramsSchema: z.number().optional().describe(t('ai.grid.setSelection')),
    cb: (instance, value) => {
      const tableData = instance.getData()
      const targetRow = tableData[value]
      if (targetRow) {
        instance.setSelection(targetRow, true)
        return { type: 'text', text: 'success' }
      }
    }
  },
  insertRow: {
    paramsSchema: z.record(z.any()).optional().describe(t('ai.grid.insertRow')),
    cb: (instance, value) => {
      instance.insert(value)
      return { type: 'text', text: 'success' }
    }
  }
}

6 How to integrate TinyVue smart components

6.1 Install dependencies

npm install @opentiny/tiny-vue-mcp @opentiny/next-vue @opentiny/vue-common @opentiny/vue

6.2 Import TinyVue components

<script setup lang="ts">
// Import TinyVue Grid component
import { TinyGrid } from '@opentiny/vue'
</script>

<template>
  <tiny-grid :data="tableData">
    <!-- grid content -->
  </tiny-grid>
</template>

6.3 Register MCP configuration

import { registerMcpConfig } from '@opentiny/vue-common'
import { createMcpTools, getTinyVueMcpConfig } from '@opentiny/tiny-vue-mcp'

// Register TinyVue MCP config
registerMcpConfig(getTinyVueMcpConfig(), createMcpTools)

6.4 Create NextClient proxy

<script setup lang="ts">
import { useNextClient } from '@opentiny/next-vue'

const { sessionId } = useNextClient({
  clientInfo: {
    name: 'your-app-name',
    version: '1.0.0',
    sessionId: 'your-session-id'
  },
  proxyOptions: {
    url: 'your-sse-url',
    token: 'your-token'
  }
})
</script>

<template>
  <div>
    <h1>NextClient Proxy</h1>
    <p>Session ID: {{ sessionId }}</p>
  </div>
</template>

6.5 Configure business logic for components

<script setup lang="ts">
import { useNextServer } from '@opentiny/next-vue'

const { server } = useNextServer({
  serverInfo: { name: 'your-server-name', version: '1.0.0' }
})
</script>

<template>
  <tiny-grid :tiny_mcp_config="`{
  server,
  business: { id: 'your-business-id', description: '业务描述' }
}`">
    <!-- grid content -->
  </tiny-grid>
</template>

For full integration steps, refer to the official TinyVue smart component guide.