mcp-use Skill：让AI同时拥有工具和可视化界面

Skill超级捕获手 技术创作者 2026-08-24 12 阅读

mcp-use 是当前最完整开源 MCP 全栈开发框架，一套代码同时支持构建「工具服务端」和「交互式应用端」，让开发者既能向 AI Agent 输出结构化工具，也能向 ChatGPT/Claude 用户交付可直接操作的 React 组件。截至 2026-08-24 累计约 10,000 颗 GitHub Star，SDK 下载超 700 万次，是当前 MCP 生态里增速最快的应用层框架之一。

功能与原则

mcp-use 围绕 Model Context Protocol 协议，构建了从工具定义、服务端运行、交互式视图到云端部署的完整链路。核心理念是将工具（tool）和视图（View）绑定——同一个工具既能返回纯文本结果给 Agent 编程调用，也能在 ChatGPT/Claude 界面渲染成交互式 React 组件，开发者无需写两套代码。

双语言优先是另一原则：TypeScript 和 Python 两套 SDK 功能完全对等，数据科学家和后端工程师都能直接上手。

认可度

GitHub Star 约 10,000+（截至 2026-08-24），Fork 1,294，SDK 累计下载超 700 万次。2026 年 5 月以约 9,968 星首次出现在 MCP Ecosystem Weekly Tracker 时即被标注为「rising」，随后保持持续上升态势。项目在 2026-08-09 仍有代码提交（1,523 次 commit），维护活跃度极高。Y Combinator 曾将其列入「open source infrastructure and dev tools for MCP agents」方向关注，LangChain 官方账号转发了其集成案例。

链接

GitHub：https://github.com/mcp-use/mcp-use
文档：https://docs.mcp-use.com
官网：https://mcp-use.com

原作者

mcp-use 团队（开源社区主导），核心贡献者包括 Pietro Zullo（@pietrozullo）和 Pederzh（@pederzh），项目采用 MIT 许可证，Manufact（商业公司）提供商业化云端部署平台。

介绍

mcp-use 起源于 2025 年 3 月，是最早一批将「任意 LLM 连接任意 MCP Server」这件事做成的开源库。它把自己定位为「MCP 领域的 Vercel」——提供单命令脚手架、一键本地调试、云端部署，让开发者从写代码到线上运行无需踩坑。

整个框架分两层：MCP Servers（给 Agent 调用的工具服务）和 MCP Apps（给用户看的交互式 React 组件）。以天气工具为例：开发者用 Zod 定义输入输出 schema，绑定一个 React 组件作为 view，Agent 调用时返回纯文本，而 ChatGPT/Claude 用户则能看到一张带样式的天气卡片。TypeScript SDK 通过 MCPServer 类暴露工具方法，Python SDK 用装饰器风格注册工具，逻辑完全对称。

内置 MCP Inspector 是其开发体验的核心——启动服务后自动在 /inspector 路径开启 Web 界面，可以手动测试工具、预览视图、截屏记录，发现问题直接本地调试。

特点

  • TypeScript + Python 双 SDK：两套 API 功能对等，覆盖 AI 全栈开发人群
  • 工具与视图绑定：同一工具定义，自动适配 Agent 调用（文本）和用户界面（React 组件）
  • Zod Schema 驱动类型安全：从输入验证到输出结构到 View props，全链路类型推断
  • 内置 Inspector：浏览器可视化调试 MCP 服务，支持无头 CLI 模式和截图回归测试
  • 一键云端部署：连接 GitHub 仓库，自动获得可观测性（tracing、metrics、session replay）
  • 多客户端兼容：ChatGPT、Claude、Codex、Cursor、Cline 等 MCP 兼容客户端均可直接接入
  • Skills over MCP：内置通过 MCP 协议分发和管理 Skill 的能力，Agent 之间可互相调用

使用方法

安装（TypeScript）：

npx create-mcp-use-app@latest my-mcp-app
cd my-mcp-app
npm run dev
# 打开 http://localhost:3000/mcp/inspector

定义一个工具：

import { MCPServer } from "mcp-use";
import { z } from "zod";

const server = new MCPServer({ name: "weather-app", version: "1.0.0" });

export const getWeather = server.tool({
  name: "get-weather",
  description: "Get current weather for a city",
  inputSchema: z.object({ city: z.string().describe("City name") }),
  outputSchema: z.object({ temperature: z.number(), conditions: z.string() }),
  view: { name: "weather-card" },
}, async ({ city }) => {
  return {
    content: [{ type: "text", text: `Weather in ${city}: Sunny, 22°C` }],
    structuredContent: { temperature: 22, conditions: "Sunny" },
  };
});

export default server;

Python 示例：

from mcp_use import MCPServer

server = MCPServer(name="Weather Server", version="1.0.0")

@server.tool(name="get_weather", description="Get weather for a city")
async def get_weather(city: str) -> str:
    return f"Temperature: 22°C, Conditions: Sunny, City: {city}"

server.run(transport="streamable-http", port=8000)

调试：启动后访问 http://localhost:3000/mcp/inspector，输入参数直接调用工具并预览 View 效果。

使用场景与人群

目标用户：AI 应用开发者、MCP Server 开发者、需要向 AI Agent 提供结构化工具链的工程师、想在 ChatGPT/Claude 界面交付交互式 AI 应用的团队。

典型场景：数据可视化类 MCP App（图表生成器、仪表盘）、文档预览工具、代码审查 UI、客服机器人界面、AI 辅助的设计工具——任何需要「Agent 调用 + 用户可见结果」双重能力的项目。

输入与输出案例

案例 1：天气查询工具

  • 输入（用户或 Agent 调用）：{ city: "Shanghai" }
  • 输出（Agent 视角）："Weather in Shanghai: Sunny, 22°C"
  • 输出（用户界面 View）：一张渲染好的天气卡片，显示城市名、气温和天气状况，带加载态和错误态处理

案例 2：图表构建工具

  • 输入：{ chartType: "bar", data: [10, 20, 30], labels: ["Q1", "Q2", "Q3"] }
  • Agent 返回：纯文本描述图表内容
  • 用户界面：MCP App 在 ChatGPT/Claude 侧渲染成交互式柱状图，支持 hover 查看数值

GitHub: https://github.com/mcp-use/mcp-use

评论区

0 条评论

登录后可评论。

Skill超级捕获手 12 阅读