如何構建 awesome-llm-apps 的 MCP Apps 讓 MCP 工具在聊天中渲染為可交互界面【免費下載鏈接】awesome-llm-apps100 AI Agents, Agent Skills and RAG Apps - Free and Open Source.項目地址: https://gitcode.com/GitHub_Trending/aw/awesome-llm-apps在 awesome-llm-apps 倉庫的generative_ui_agents/mcp-apps-generative-ui-showcase/子項目中有一個可運行的示例MCP 服務器注冊search-flights、create-portfolio、create-board等工具每個工具通過_meta[ui/resourceUri]關聯(lián)一個 HTML/JS 資源。當 Agent 調用這些工具時前端把關聯(lián)的 HTML 應用掛載到聊天里的沙箱 iframe 中iframe 再通過 JSON-RPCpostMessage回調 MCP 工具——最終效果是多步向導、拖拽看板、實時圖表這類完整交互界面直接渲染在聊天里。這個項目基于 CopilotKit、AG-UI 和 MCP Apps ExtensionSEP-1865。本文的任務是在本地跑通這個項目并掌握「給一個 MCP 工具掛上交互 UI」的完整模式讓你能照著 server.ts 的結構給自己的工具加 UI。工作原理工具、UI 資源與前端中間件整個鏈路在 README 中描述為User: Book a flight from JFK to LAX ↓ AI calls search-flights tool ↓ MCPAppsMiddleware intercepts, fetches HTML resource ↓ CopilotKit renders flights-app.html in iframe ↓ User interacts with wizard UI ↓ UI calls MCP tools via postMessage → server拆開看有三個關鍵點都在源碼中有對應實現(xiàn)工具聲明 UI 資源server.registerTool()的描述對象里帶_meta: { ui/resourceUri: ui://flights/flights-app.html }。server.ts 中定義了協(xié)議常量RESOURCE_URI_META_KEY ui/resourceUri。資源聲明 MCP App 類型server.registerResource()注冊對應 URI 的資源mimeType: text/htmlmcp標記它是一個 MCP Apphandler 返回{ contents: [{ text: htmlContent }] }。前端中間件Next.js 的 API 路由 route.ts 中BuiltInAgent通過.use(new MCPAppsMiddleware({ mcpServers: [{ type: http, url: ... }] }))連接 MCP 服務器攔截工具調用并抓取 HTML 資源交給 CopilotKit 渲染。MCP 服務器本身是 Express StreamableHTTPServerTransportPOST/GET/DELETE 都掛在/mcp路徑上另有一個/health健康檢查端點默認端口 3001可通過PORT環(huán)境變量修改。準備條件Node.js 環(huán)境npm 工作區(qū)含next、tsx、vite等依賴無系統(tǒng)級依賴要求一個 LLM API Key。根據 route.ts 的determineModel()設置OPENAI_API_KEY時使用openai/gpt-5.5設置ANTHROPIC_API_KEY時使用anthropic/claude-sonnet-4-6設置GOOGLE_API_KEY時使用google/gemini-3.1-pro-preview都沒有則默認回落到openai/gpt-5.5。安裝與啟動以下命令來自 README 的 Quick Start。README 中稱為 “mcp-apps directory”在本倉庫中對應generative_ui_agents/mcp-apps-generative-ui-showcase/。1. 安裝依賴項目根目錄 MCP 服務器兩個包cd generative_ui_agents/mcp-apps-generative-ui-showcase npm install cd mcp-server npm install cd ..2. 設置環(huán)境變量在項目根目錄創(chuàng)建.env.localOPENAI_API_KEYsk-...sk-...替換為你自己的 OpenAI Key也可以改用ANTHROPIC_API_KEY或GOOGLE_API_KEY模型選擇見上節(jié)。3. 構建并運行 MCP 服務器終端 1cd mcp-server npm run build npm run dev # Server runs at http://localhost:3001/mcpnpm run build會執(zhí)行tsc npm run build:app先編譯 TypeScript再用 Vite 依次把flights-app、hotels-app、trading-app、kanban-app四個 HTML 應用打包為單文件自包含 HTML輸出到mcp-server/apps/dist/。注意 mcp-server/package.json 中build:app腳本第一步是rm -rf dist即每次構建會刪除并重建apps/dist/目錄。npm run dev則用tsx watch server.ts以開發(fā)模式運行服務器。4. 運行前端終端 2回到項目根目錄npm run dev # Frontend at http://localhost:3000結果驗證打開http://localhost:3000在聊天框輸入 README 給出的示例 Prompt例如Book a flight from JFK to LAX on January 20th for 2 passengers對應search-flights工具、Create a $10,000 tech-focused portfolio對應create-portfolio、Create a kanban board for my software project對應create-board。成功后聊天中會渲染出對應的交互界面多步預訂向導、投資組合圖表、拖拽看板而不是純文本結果。健康檢查MCP 服務器提供GET http://localhost:3001/health返回形如{ status: ok, server: travel-booking-mcp, sessions: 當前會話數(shù) }的 JSON字段來自 server.ts 的/health端點sessions為實時數(shù)值。一個明確的故障信號如果 iframe 中顯示占位頁The app UI needs to be built. Run: npm run build:app說明apps/dist/下還沒有構建產物——loadHtml()在找不到 HTML 時會返回這個占位頁。此時回到終端 1 重新執(zhí)行npm run build即可。給自己的 MCP 工具掛上交互 UI跑通示例后按 README 的 Tool Registration Pattern 和 server.ts 的實際代碼擴展一個帶 UI 的工具需要四處改動1. 在mcp-server/server.ts中注冊 UI 資源。參照現(xiàn)有registerResource調用例如航班的寫法server.registerResource( flights-app-template, // 資源名 ui://flights/flights-app.html, // ui:// 開頭的資源 URI { name: flights-app-template, uri: ui://flights/flights-app.html, title: Airline Booking, description: Interactive flight search and booking wizard with seat selection, mimeType: text/htmlmcp, // Marks as MCP App }, async (): PromiseReadResourceResult ({ contents: [{ uri: ui://flights/flights-app.html, mimeType: text/htmlmcp, text: htmlContent }], }), );其中htmlContent由loadHtml(flights-app)從apps/dist/讀取。2. 注冊工具并通過_meta關聯(lián) URIserver.registerTool( search-flights, { title: Search Flights, description: Searches for available flights between two airports. Returns an interactive booking wizard UI., inputSchema: { origin: z.string().describe(Origin airport code (e.g., JFK, LAX, LHR)), destination: z.string().describe(Destination airport code), departureDate: z.string().describe(Departure date in YYYY-MM-DD format), passengers: z.number().min(1).max(9).describe(Number of passengers (1-9)), cabinClass: z.enum([economy, business, first]).optional(), }, _meta: { ui/resourceUri: ui://flights/flights-app.html, // 指向上面注冊的資源 URI }, }, async ({ origin, destination, departureDate, passengers, cabinClass }) { // 工具邏輯返回 text structuredContent }, );3. 提供 HTML 應用。UI 源文件放在mcp-server/apps/下如 flights-app.html用 Vite vite-plugin-singlefile打包成單文件 HTML。vite.config.ts 通過環(huán)境變量選擇要打包的入口# 在 mcp-server/apps/ 下構建單個應用 BUILD_APPflights-app vite build新應用需要加入mcp-server/package.json的build:app腳本格式參照現(xiàn)有的四個BUILD_APP... vite build命令否則npm run build不會打包它。4. 告知 Agent 新應用的存在。route.ts 中BuiltInAgent的prompt字段枚舉了 4 個應用及其參數(shù)、示例 Prompt 和 helper 工具模型靠這段提示詞決定何時調用哪個工具。新增工具后應把它的名稱、參數(shù)、示例 Prompt 補進這段提示詞否則模型不會主動渲染新 UI。驗證方式與主路徑相同重啟 MCP 服務器npm run dev是 watch 模式改動server.ts后會自動重載在http://localhost:3000輸入對應示例 Prompt確認聊天中出現(xiàn)你的交互界面若出現(xiàn) “needs to be built” 占位頁則先執(zhí)行第 3 步的構建。限制與注意事項會話與業(yè)務狀態(tài)保存在內存中server.ts 用Map存activePortfolios、activeBoardsMCP 傳輸使用InMemoryEventStoreMCP 服務器重啟后這些狀態(tài)會丟失。CORS 配置為origin: *且暴露Mcp-Session-Id響應頭這是本地開發(fā)/演示的配置。前后端分離部署時需要把MCP_SERVER_URL環(huán)境變量指向部署后的 MCP 服務器地址route.ts中未設置該變量時默認連接http://localhost:3001/mcpREADME Deployment 一節(jié)說明線上演示即為 Web 與 MCP Server 兩個獨立服務。四個示例應用的數(shù)據15 個機場、10 個城市酒店、18 只股票等均為 mcp-server/src/ 下的內置模擬數(shù)據用于演示交互不是真實交易或預訂?！久赓M下載鏈接】awesome-llm-apps100 AI Agents, Agent Skills and RAG Apps - Free and Open Source.項目地址: https://gitcode.com/GitHub_Trending/aw/awesome-llm-apps創(chuàng)作聲明：本文部分內容由AI輔助生成（AIGC），僅供參考 如何構建 awesome-llm-apps 的 MCP Apps 讓 MCP 工具在聊天中渲染為可交互界面
如何構建 awesome-llm-apps 的 MCP Apps 讓 MCP 工具在聊天中渲染為可交互界面【免費下載鏈接】awesome-llm-apps100 AI Agents, Agent Skills and RAG Apps - Free and Open Source.項目地址: https://gitcode.com/GitHub_Trending/aw/awesome-llm-apps在 awesome-llm-apps 倉庫的generative_ui_agents/mcp-apps-generative-ui-showcase/子項目中有一個可運行的示例MCP 服務器注冊search-flights、create-portfolio、create-board等工具每個工具通過_meta[ui/resourceUri]關聯(lián)一個 HTML/JS 資源。當 Agent 調用這些工具時前端把關聯(lián)的 HTML 應用掛載到聊天里的沙箱 iframe 中iframe 再通過 JSON-RPCpostMessage回調 MCP 工具——最終效果是多步向導、拖拽看板、實時圖表這類完整交互界面直接渲染在聊天里。這個項目基于 CopilotKit、AG-UI 和 MCP Apps ExtensionSEP-1865。本文的任務是在本地跑通這個項目并掌握「給一個 MCP 工具掛上交互 UI」的完整模式讓你能照著 server.ts 的結構給自己的工具加 UI。工作原理工具、UI 資源與前端中間件整個鏈路在 README 中描述為User: Book a flight from JFK to LAX ↓ AI calls search-flights tool ↓ MCPAppsMiddleware intercepts, fetches HTML resource ↓ CopilotKit renders flights-app.html in iframe ↓ User interacts with wizard UI ↓ UI calls MCP tools via postMessage → server拆開看有三個關鍵點都在源碼中有對應實現(xiàn)工具聲明 UI 資源server.registerTool()的描述對象里帶_meta: { ui/resourceUri: ui://flights/flights-app.html }。server.ts 中定義了協(xié)議常量RESOURCE_URI_META_KEY ui/resourceUri。資源聲明 MCP App 類型server.registerResource()注冊對應 URI 的資源mimeType: text/htmlmcp標記它是一個 MCP Apphandler 返回{ contents: [{ text: htmlContent }] }。前端中間件Next.js 的 API 路由 route.ts 中BuiltInAgent通過.use(new MCPAppsMiddleware({ mcpServers: [{ type: http, url: ... }] }))連接 MCP 服務器攔截工具調用并抓取 HTML 資源交給 CopilotKit 渲染。MCP 服務器本身是 Express StreamableHTTPServerTransportPOST/GET/DELETE 都掛在/mcp路徑上另有一個/health健康檢查端點默認端口 3001可通過PORT環(huán)境變量修改。準備條件Node.js 環(huán)境npm 工作區(qū)含next、tsx、vite等依賴無系統(tǒng)級依賴要求一個 LLM API Key。根據 route.ts 的determineModel()設置OPENAI_API_KEY時使用openai/gpt-5.5設置ANTHROPIC_API_KEY時使用anthropic/claude-sonnet-4-6設置GOOGLE_API_KEY時使用google/gemini-3.1-pro-preview都沒有則默認回落到openai/gpt-5.5。安裝與啟動以下命令來自 README 的 Quick Start。README 中稱為 “mcp-apps directory”在本倉庫中對應generative_ui_agents/mcp-apps-generative-ui-showcase/。1. 安裝依賴項目根目錄 MCP 服務器兩個包cd generative_ui_agents/mcp-apps-generative-ui-showcase npm install cd mcp-server npm install cd ..2. 設置環(huán)境變量在項目根目錄創(chuàng)建.env.localOPENAI_API_KEYsk-...sk-...替換為你自己的 OpenAI Key也可以改用ANTHROPIC_API_KEY或GOOGLE_API_KEY模型選擇見上節(jié)。3. 構建并運行 MCP 服務器終端 1cd mcp-server npm run build npm run dev # Server runs at http://localhost:3001/mcpnpm run build會執(zhí)行tsc npm run build:app先編譯 TypeScript再用 Vite 依次把flights-app、hotels-app、trading-app、kanban-app四個 HTML 應用打包為單文件自包含 HTML輸出到mcp-server/apps/dist/。注意 mcp-server/package.json 中build:app腳本第一步是rm -rf dist即每次構建會刪除并重建apps/dist/目錄。npm run dev則用tsx watch server.ts以開發(fā)模式運行服務器。4. 運行前端終端 2回到項目根目錄npm run dev # Frontend at http://localhost:3000結果驗證打開http://localhost:3000在聊天框輸入 README 給出的示例 Prompt例如Book a flight from JFK to LAX on January 20th for 2 passengers對應search-flights工具、Create a $10,000 tech-focused portfolio對應create-portfolio、Create a kanban board for my software project對應create-board。成功后聊天中會渲染出對應的交互界面多步預訂向導、投資組合圖表、拖拽看板而不是純文本結果。健康檢查MCP 服務器提供GET http://localhost:3001/health返回形如{ status: ok, server: travel-booking-mcp, sessions: 當前會話數(shù) }的 JSON字段來自 server.ts 的/health端點sessions為實時數(shù)值。一個明確的故障信號如果 iframe 中顯示占位頁The app UI needs to be built. Run: npm run build:app說明apps/dist/下還沒有構建產物——loadHtml()在找不到 HTML 時會返回這個占位頁。此時回到終端 1 重新執(zhí)行npm run build即可。給自己的 MCP 工具掛上交互 UI跑通示例后按 README 的 Tool Registration Pattern 和 server.ts 的實際代碼擴展一個帶 UI 的工具需要四處改動1. 在mcp-server/server.ts中注冊 UI 資源。參照現(xiàn)有registerResource調用例如航班的寫法server.registerResource( flights-app-template, // 資源名 ui://flights/flights-app.html, // ui:// 開頭的資源 URI { name: flights-app-template, uri: ui://flights/flights-app.html, title: Airline Booking, description: Interactive flight search and booking wizard with seat selection, mimeType: text/htmlmcp, // Marks as MCP App }, async (): PromiseReadResourceResult ({ contents: [{ uri: ui://flights/flights-app.html, mimeType: text/htmlmcp, text: htmlContent }], }), );其中htmlContent由loadHtml(flights-app)從apps/dist/讀取。2. 注冊工具并通過_meta關聯(lián) URIserver.registerTool( search-flights, { title: Search Flights, description: Searches for available flights between two airports. Returns an interactive booking wizard UI., inputSchema: { origin: z.string().describe(Origin airport code (e.g., JFK, LAX, LHR)), destination: z.string().describe(Destination airport code), departureDate: z.string().describe(Departure date in YYYY-MM-DD format), passengers: z.number().min(1).max(9).describe(Number of passengers (1-9)), cabinClass: z.enum([economy, business, first]).optional(), }, _meta: { ui/resourceUri: ui://flights/flights-app.html, // 指向上面注冊的資源 URI }, }, async ({ origin, destination, departureDate, passengers, cabinClass }) { // 工具邏輯返回 text structuredContent }, );3. 提供 HTML 應用。UI 源文件放在mcp-server/apps/下如 flights-app.html用 Vite vite-plugin-singlefile打包成單文件 HTML。vite.config.ts 通過環(huán)境變量選擇要打包的入口# 在 mcp-server/apps/ 下構建單個應用 BUILD_APPflights-app vite build新應用需要加入mcp-server/package.json的build:app腳本格式參照現(xiàn)有的四個BUILD_APP... vite build命令否則npm run build不會打包它。4. 告知 Agent 新應用的存在。route.ts 中BuiltInAgent的prompt字段枚舉了 4 個應用及其參數(shù)、示例 Prompt 和 helper 工具模型靠這段提示詞決定何時調用哪個工具。新增工具后應把它的名稱、參數(shù)、示例 Prompt 補進這段提示詞否則模型不會主動渲染新 UI。驗證方式與主路徑相同重啟 MCP 服務器npm run dev是 watch 模式改動server.ts后會自動重載在http://localhost:3000輸入對應示例 Prompt確認聊天中出現(xiàn)你的交互界面若出現(xiàn) “needs to be built” 占位頁則先執(zhí)行第 3 步的構建。限制與注意事項會話與業(yè)務狀態(tài)保存在內存中server.ts 用Map存activePortfolios、activeBoardsMCP 傳輸使用InMemoryEventStoreMCP 服務器重啟后這些狀態(tài)會丟失。CORS 配置為origin: *且暴露Mcp-Session-Id響應頭這是本地開發(fā)/演示的配置。前后端分離部署時需要把MCP_SERVER_URL環(huán)境變量指向部署后的 MCP 服務器地址route.ts中未設置該變量時默認連接http://localhost:3001/mcpREADME Deployment 一節(jié)說明線上演示即為 Web 與 MCP Server 兩個獨立服務。四個示例應用的數(shù)據15 個機場、10 個城市酒店、18 只股票等均為 mcp-server/src/ 下的內置模擬數(shù)據用于演示交互不是真實交易或預訂?！久赓M下載鏈接】awesome-llm-apps100 AI Agents, Agent Skills and RAG Apps - Free and Open Source.項目地址: https://gitcode.com/GitHub_Trending/aw/awesome-llm-apps創(chuàng)作聲明：本文部分內容由AI輔助生成（AIGC），僅供參考