@opentiny/vue-docs 3.28.0 → 3.30.0

package/demos/pc/webdoc/mcp-en.md

@@ -1,101 +0,0 @@
-# TinyVue Intelligent Component Access Guide
-
-TinyVue's intelligent components provide a complete intelligent solution, allowing your application to have AI conversation, voice interaction, and other capabilities. This guide will walk you through how to integrate TinyVue's intelligent components into your project.
-
-## Install dependencies
-
-First, you need to install the following core dependency packages:
-
-```bash
-npm install @opentiny/tiny-vue-mcp @opentiny/next-vue @opentiny/vue-common @opentiny/vue
-```
-
-## Access steps
-
-### 1. Initialize MCP Configuration
-
-Initialize MCP configuration in the application entry file (e.g., `main.js`):
-
-```js
-import { registerMcpConfig } from '@opentiny/vue-common'
-import { createMcpTools, getTinyVueMcpConfig } from '@opentiny/tiny-vue-mcp'
-
-// Register TinyVue component MCP configuration
-registerMcpConfig(getTinyVueMcpConfig(), createMcpTools)
-```
-
-### 2. Create NextClient Proxy Client
-
-Create a NextClient proxy client in `App.vue` to establish real-time communication:
-
-```html
-<script setup lang="ts">
-  import { useNextClient } from '@opentiny/next-vue'
-
-  const { sessionId } = useNextClient({
-    clientInfo: {
-      name: 'your-app-name', // Application name
-      version: '1.0.0', // Application version
-      sessionId: 'your-session-id' // Optional, will be passed in by the backend if not provided; for debugging, you can use crypto.randomUUID() to generate a fixed one
-    },
-    proxyOptions: {
-      url: 'your-sse-url', // SSE service address
-      token: 'your-token' // Authentication token
-    }
-  })
-</script>
-
-<template>
-  <div>
-    <h1>NextClient Proxy Client</h1>
-    <p>Session ID: {{ sessionId }}</p>
-  </div>
-</template>
-```
-
-### 3. MCP Component Configuration
-
-When using
-
-```html
-<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: 'Business description'
-      }
-    }"
-  >
-    <!-- Table content -->
-  </tiny-grid>
-</template>
-```
-
-## Notes
-
-1. Ensure that the server supports SSE (Server-Sent Events) connections
-2. It is recommended to use HTTPS in production environments
-3. CORS needs to be correctly configured to support cross-origin requests
-
-## Common issues
-
-1. Session connection failed
-
-   - Check if the SSE service address is correct
-   - Confirm that the network connection is normal
-   - Verify that the authentication information is valid
-
-2. AI conversation response is not available
-   - Check if the session is established normally
-   - Confirm that the prompt item configuration is correct
-   - Check if there are errors in the network request

package/demos/pc/webdoc/mcp.md

@@ -1,101 +0,0 @@
-# TinyVue 智能化组件接入指南
-
-TinyVue 的智能化组件提供了一套完整的智能化解决方案，让您的应用具备 AI 对话、语音交互等能力。本文将指导您如何在项目中接入 TinyVue 的智能化组件。
-
-## 安装依赖
-
-首先需要安装以下核心依赖包：
-
-```bash
-npm install @opentiny/tiny-vue-mcp @opentiny/next-vue @opentiny/vue-common @opentiny/vue
-```
-
-## 接入步骤
-
-### 1. 初始化 MCP 配置
-
-在应用入口文件（如 `main.js`）中初始化 MCP 配置：
-
-```js
-import { registerMcpConfig } from '@opentiny/vue-common'
-import { createMcpTools, getTinyVueMcpConfig } from '@opentiny/tiny-vue-mcp'
-
-// 注册 TinyVue 组件 MCP 配置
-registerMcpConfig(getTinyVueMcpConfig(), createMcpTools)
-```
-
-### 2. 创建 NextClient 代理客户端
-
-在 `App.vue` 中创建 NextClient 代理客户端，用于建立实时通信：
-
-```html
-<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' // 可选，不传由后台自动生成。调试时可使用 crypto.randomUUID() 生成固定值
-    },
-    proxyOptions: {
-      url: 'your-sse-url', // SSE 服务地址，目前agent代理服务器代码未开源，如想进一步了解可以在github中提issue单
-      token: 'your-token' // 认证 token
-    }
-  })
-</script>
-
-<template>
-  <div>
-    <h1>NextClient 代理客户端</h1>
-    <p>会话 ID: {{ sessionId }}</p>
-  </div>
-</template>
-```
-
-### 3. MCP 组件配置
-
-在子页面中使用 Grid 等支持 MCP 的组件时，添加 MCP 配置：
-
-```html
-<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: '业务描述'
-      }
-    }"
-  >
-    <!-- 表格内容 -->
-  </tiny-grid>
-</template>
-```
-
-## 注意事项
-
-1. 确保服务端支持 SSE（Server-Sent Events）连接
-2. 建议在生产环境使用 HTTPS 协议
-3. 需要正确配置 CORS 以支持跨域请求
-
-## 常见问题
-
-1. 会话连接失败
-
-   - 检查 SSE 服务地址是否正确
-   - 确认网络连接是否正常
-   - 验证认证信息是否有效
-
-2. AI 对话无响应
-   - 检查会话是否正常建立
-   - 确认提示项配置是否正确
-   - 查看网络请求是否有错误

package/src/components/mcp-docs.vue

@@ -1,33 +0,0 @@
-<template>
-  <div class="mcp-list">
-    <div class="mcp-title">
-      <h2>{{ name }} 组件的 MCP 工具</h2>
-    </div>
-    <tiny-grid :data="data" row-id="name">
-      <tiny-grid-column field="name" title="名称" width="180"> </tiny-grid-column>
-      <tiny-grid-column field="param" title="参数类型" width="150"> </tiny-grid-column>
-      <tiny-grid-column field="desc" title="工具描述"> </tiny-grid-column>
-    </tiny-grid>
-  </div>
-</template>
-
-<script setup>
-import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
-
-const props = defineProps({
-  name: String,
-  data: Array
-})
-</script>
-
-<style scoped lang="less">
-.mcp-list {
-  padding-bottom: 150px;
-}
-.mcp-title {
-  font-size: 16px;
-  font-weight: bold;
-  margin-top: 26px;
-  margin-bottom: 26px;
-}
-</style>

package/src/composable/useTinyRemoter.ts

@@ -1,176 +0,0 @@
-import { WebMcpServer, WebMcpClient, createMessageChannelPairTransport, z } from '@opentiny/next-sdk'
-import { genMenus } from '../menus'
-import { useRouter } from 'vue-router'
-import { ref } from 'vue'
-
-export const AGENT_ROOT = 'https://agent.opentiny.design/api/v1/webmcp-trial/'
-
-// 调用 useTinyRemoter() 完毕后，下面三个变量变会有值。
-export const webMcpServer: { value: null | WebMcpServer } = { value: null }
-export const webMcpClient: { value: null | WebMcpClient } = { value: null }
-export const webMcpSessionId: { value: null | string } = ref('')
-
-export async function useTinyRemoter() {
-  const [serverTransport, clientTransport] = createMessageChannelPairTransport()
-
-  // 定义 MCP Server
-  const server = new WebMcpServer(
-    { name: 'base-config', version: '1.0.0' },
-    {
-      capabilities: {
-        prompts: { listChanged: true },
-        resources: { subscribe: true, listChanged: true },
-        tools: { listChanged: true },
-        completions: {},
-        logging: {}
-      }
-    }
-  )
-  webMcpServer.value = server
-  createGlobalMcpTool(server)
-
-  serverTransport.onerror = (error) => {
-    console.error(`ServerTransport error:`, error)
-  }
-  await server.connect(serverTransport)
-
-  // 定义 MCP Client
-  const client = new WebMcpClient(
-    { name: 'mcp-web-client', version: '1.0.0' },
-    { capabilities: { roots: { listChanged: true }, sampling: {}, elicitation: {} } }
-  )
-  webMcpClient.value = client
-
-  await client.connect(clientTransport)
-
-  // 不能传入固定的sessionId, 让它每次自动生成一个。
-  const { sessionId } = await client.connect({
-    url: AGENT_ROOT + 'mcp',
-    agent: true,
-    onError: (error: Error) => {
-      console.error('Connect proxy error:', error)
-    }
-  })
-  webMcpSessionId.value = sessionId
-
-  window.addEventListener('pagehide', client.onPagehide)
-}
-
-// 组件页面的右上导航的数据回调函数
-export const cmpAnchorDataCallback = { value: null }
-
-export const createGlobalMcpTool = (server) => {
-  const router = useRouter()
-  server.registerResource(
-    'site-menus',
-    'site-menus://app',
-    {
-      title: 'TinyVue官网的菜单数据',
-      description: 'TinyVue官网的菜单数据，其中"key"为路由路径，"name"为菜单名称，"children"为子菜单',
-      mimeType: 'text/plain'
-    },
-    async (uri) => ({
-      contents: [
-        {
-          uri: uri.href,
-          text: JSON.stringify(genMenus())
-        }
-      ]
-    })
-  )
-  // 帮我查看button组件的API
-  server.registerTool(
-    'swtich-router',
-    {
-      title: 'router',
-      description: '可以帮用户跳转到文档页面，组件示例的总页面或组件API文档页面，或组件库的概览页面',
-      inputSchema: {
-        key: z.string().describe('跳转页面路径'),
-        type: z
-          .enum(['components', 'docs', 'overview', 'features'])
-          .describe('跳转页面类型，比如：组件的页面，文档的页面，组件的概览页面'),
-        isOpenApi: z.boolean().describe('跳转到组件页面时，是否打开API文档')
-      }
-    },
-    async ({ key, type, isOpenApi }) => {
-      const { params, fullPath } = router.currentRoute.value
-      const { theme } = params
-      const themeIndex = fullPath.indexOf(theme)
-      const linkUrl =
-        fullPath.slice(0, themeIndex) + `${theme}/${type}/${key === 'overview' ? '' : key}${isOpenApi ? '#api' : ''}`
-      router.push(linkUrl)
-      return {
-        content: [
-          {
-            type: 'text',
-            text: `跳转页面成功: ${key}`
-          }
-        ]
-      }
-    }
-  )
-
-  server.registerTool(
-    'get-component-demos',
-    {
-      title: '查询全部示例的信息',
-      description:
-        '查询当前组件的全部示例信息，demos信息。返回值是一个数组，其中每一项的 demoId 属性是示例的键，通过键可以跳转到该示例。desc属性是示例的详细描述。',
-      inputSchema: {}
-    },
-    async () => {
-      // 通知组件页面返回右侧导航的数据
-      if (cmpAnchorDataCallback.value != null) {
-        const links = cmpAnchorDataCallback.value()
-
-        return {
-          content: [{ type: 'text', text: JSON.stringify(links) }]
-        }
-      } else {
-        return {
-          content: [{ type: 'text', text: '找不到示例' }]
-        }
-      }
-    }
-  )
-
-  server.registerTool(
-    'jump-to-demo',
-    {
-      title: '跳转到组件的示例demo',
-      description: '根据参数demoId, 跳转到指定的示例demo。',
-      inputSchema: {
-        demoId: z.string().describe('示例的id,唯一标识。')
-      }
-    },
-    async ({ demoId }) => {
-      // 通知组件页面返回右侧导航的数据
-      location.hash = '#' + demoId
-
-      return {
-        content: [{ type: 'text', text: '跳转示例成功' }]
-      }
-    }
-  )
-
-  // 长任务示例
-  server.registerTool(
-    'long-task',
-    {
-      title: 'long-task',
-      description: '可以帮用户订机票'
-    },
-    async () => {
-      // 执行一个长任务
-      await new Promise((resolve) => setTimeout(resolve, 10000))
-      return {
-        content: [
-          {
-            type: 'text',
-            text: '执行一个长任务，执行完成'
-          }
-        ]
-      }
-    }
-  )
-}