實驗簡介
通過體驗基於標準 MCP 協議的 Web 智能組件庫——TinyVue，開發者可以瞭解 AI 智能體控制 TinyVue 智能組件的各類行為。本次實驗主要是在 TinyVue 官網上，開發者能夠通過 AI 對話框，以語音或文字方式與網站組件進行互動，並且還能借助 VSCode Copilot、Cursor 等 IDE 工具，Dify、Coze 等智能體平台來操作這些組件。
實驗目標
- 按照操作手冊完成體驗項目。
- 通過體驗 AI 操作（基於標準 MCP 協議）Web 頁面的過程，讓 AI 智能體代替人進行頁面操作，實現業務目標。
- 瞭解 TinyVue 智能組件庫的能力。
實驗場景
Web 瀏覽器
基本要求
熟練使用 VSCode 編輯器和 Chrome / Edge 瀏覽器的調試，具備基本的編程能力。
實戰
步驟一：在 TinyVue 官網體驗智能組件
- 打開 TinyVue 智能組件庫官網： https://opentiny.design/tiny-vue/zh-CN/os-theme/components/grid
- 點擊頁面右下角的智聯圖標，並將 demo 切換到組合式模式，參考下圖：
- 打開 AI 對話框，可以通過打字聊天來操作表格，比如：請幫我選中公司人員表中員工最多的公司、幫我刪除員工數最多的公司數據等等，可以體驗通過自然語言對錶格進行數據的增刪改查操作。
步驟二：在手機端使用語音或者 AI 對話框操控電商演示頁面
- 打開打開一個標準的電商管理演示頁面： https://opentiny.design/tiny-vue/zh-CN/os-theme/comprehensive （演示用的臨時鏈接）
- 在右側 AI 對話框中使用打字聊天的方式操作電商管理界面，可以對管理界面進行增刪改查
- 點擊手機遙控按鈕打開二維碼彈窗，通過手機微信掃碼打開智聯遙控器頁面（需要在默認瀏覽器中打開此頁面）
- 通過語音控制器來操控界面
- 通過綜合遙控器來操控界面
步驟三（可選）：使用業界通用的 AI 智能體操控電商演示頁面
-
如果有 Coze 賬號可以體驗使用 Coze 空間來控制標準電商管理演示頁面
a. 點擊擴展按鈕添加自定義擴展
b. 在自定義擴展中添加如下配置:
注意：請將 xxx 替換成你自己的域名，參考鏈接：https://opentiny.design/opentiny-design/guide/mcp
{ "mcpServers": { "next-mcp-server": { "type": "sse", "url": "https://xxx/sse?sessionId=[sessionId]" } } }c. 將電商網站的 sessionId 複製到配置中去，打開電商管理演示界面的 F12，然後在會話存儲空間中找到 sessionId（注意要刪除第一個字符，因為其表示 sessionStorage 存儲值的類型）\
d. 添加此自定義擴展，然後在釦子空間的聊天框中通過聊天的方式操作頁面
-
如果有 Dify 賬號可以體驗搭建 Chatflow 來控制標準電商管理演示頁面
a. 在 Dify 控制枱新建 Chatflow 工作流
b. 在開始和結束節點之間添加 Agent 智能體，配置大模型 LLM 和 Agent 策略，配置 MCP 服務配置
c. 點擊預覽按鈕，輸入 sessionId（獲取方式同 Coze 空間體驗方式），然後進行聊天操作界面
總結
通過以上步驟，您已經體驗了 TinyVue 組件庫的智能化交互能力：
- 通過 AI 對話框操作組件（如表格、電商管理頁面）。
- 使用手機遙控器進行語音交互。
- 利用 Coze 或 Dify 平台，實現更高級的自動化與智能化交互場景。
- 引領 Web 智能開發新範式。
關於 OpenTiny
歡迎加入 OpenTiny 開源社區。添加微信小助手：opentiny-official 一起參與交流前端技術～
OpenTiny 官網：https://opentiny.design
OpenTiny 代碼倉庫：https://github.com/opentiny
TinyVue 源碼：https://github.com/opentiny/tiny-vue
TinyEngine 源碼：https://github.com/opentiny/tiny-engine
歡迎進入代碼倉庫 Star ⭐ TinyEngine、TinyVue、TinyNG、TinyCLI、TinyEditor~ 如果你也想要共建，可以進入代碼倉庫，找到 good first issue 標籤，一起參與開源貢獻~
