feat: add remote connect (#198)

Author: kagol

template/tinyvue/src/App.vue

@@ -1,8 +1,9 @@
 <script lang="ts" setup>
+import { WebMcpClient } from '@opentiny/next-sdk'
 import { TinyRemoter } from '@opentiny/next-remoter'
 import { TinyConfigProvider } from '@opentiny/vue'
 import TinyThemeTool from '@opentiny/vue-theme/theme-tool'
-import { onMounted } from 'vue'
+import { onMounted, ref } from 'vue'
 import GlobalSetting from '@/components/global-setting/index.vue'
 import { useTheme } from './hooks/useTheme'
 import { clientTransport, createMcpServer } from './mcp-servers'
@@ -34,9 +35,25 @@ const mcpServers = {
   },
 }
 
+const AGENT_URL = 'https://agent.opentiny.design/api/v1/webmcp-trial/'
+const sessionID = ref('')
+
 // 启动 MCP Server（注册工具 + 建立通信通道）
 onMounted(async () => {
   await createMcpServer()
+
+  // 远程连接
+  const client = new WebMcpClient()
+  await client.connect(clientTransport)
+  // 这个 sessionId 是 Web 应用与 WebAgent 服务建立连接后，由 WebAgent 服务生成的，用来唯一标识被操控的 Web 应用（被控端）
+  const { sessionId } = await client.connect({
+    agent: true,
+    url: `${AGENT_URL}mcp`,
+    sessionId: '5343d3ee-47c6-49a3-9052-c68eed6f5b50'
+  })
+  console.log('sessionId', sessionId);
+
+  sessionID.value = sessionId
 })
 </script>
 
@@ -50,7 +67,8 @@ onMounted(async () => {
   </div>
   <TinyRemoter
     :skills="skills"
-    :mcp-servers="mcpServers"
+    :agent-root="AGENT_URL"
+    :session-id="sessionID"
   />
 </template>