mcp-use 入门教程：用 10 行代码构建你的第一个 MCP 应用

Model Context Protocol（MCP）正在成为 AI 编码 Agent 连接外部工具和数据源的标准协议。但大多数 MCP 教程只教你写「工具函数」——一个 get_weather 函数绑定到 MCP Server，Agent 调用了事。

mcp-use 不一样。它是一个全栈 MCP 框架，不仅帮你构建 MCP Server，还支持 MCP App——带交互界面的 MCP 应用，在 Claude、ChatGPT、Cursor 等客户端中直接渲染为可操作的 UI 组件。项目在 GitHub 上拥有 10,000+ Star，MIT 许可证，由 YC S25 的 Manufact 团队维护，提供 TypeScript 和 Python 双语言 SDK。

这篇教程带你从零开始，创建一个带交互界面的 MCP 应用，并部署到云端。

安装与初始化

mcp-use 提供了一键创建项目的脚手架工具，无需手动配置 tsconfig.json 和依赖：

npx create-mcp-use-app@latest

按照提示输入项目名称（如 my-mcp-app），选择 TypeScript 模板。脚手架会自动生成完整的项目结构，包括 src/index.ts、package.json 和 tsconfig.json。

你也可以在已有项目中手动安装：

npm install mcp-use
pip install mcp-use

第一步：创建 MCP Server（10 行代码）

以下是一个完整的 MCP Server，提供一个天气查询工具：

import { MCPServer, text } from "mcp-use/server";
import { z } from "zod";

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

server.tool({
  name: "get_weather",
  description: "Get weather for a city",
  schema: z.object({ city: z.string() }),
}, async ({ city }) => {
  return text(`Temperature: 72°F, Condition: sunny, City: ${city}`);
});

await server.listen(3000);

启动后访问 http://localhost:3000/inspector 即可打开内置的 MCP Inspector，在线测试你的工具。Inspector 是 mcp-use 的一大亮点——它会自动注入到每个 server.listen() 调用中，无需额外配置。

第二步：从 Server 到 App——加入交互界面

MCP Server 只返回文本，但 MCP App 可以返回交互式 UI 组件。mcp-use 的 widget() 函数让你用 React 组件作为工具的输出：

import { MCPServer, widget } from "mcp-use/server";
import { z } from "zod";

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

server.tool({
  name: "get-weather",
  description: "Get weather for a city",
  schema: z.object({ city: z.string() }),
  widget: "weather-display", // 引用 resources/weather-display/widget.tsx
}, async ({ city }) => {
  return widget("weather-display", { city, data: await fetchWeather(city) });
});

await server.listen(3000);

widget 组件放在项目 resources/ 目录下，使用标准的 React 函数组件写法。mcp-use 的 App 模式做到「一次编写，到处运行」——同一个 widget 在 Claude Desktop、ChatGPT、Cursor 中都能渲染。

第三步：用 CLI 部署到生产环境

本地开发完成后，用 @mcp-use/cli 部署到 Manufact Cloud：

npx @mcp-use/cli login

npx @mcp-use/cli deploy

deploy 命令会将你的 MCP Server 部署到 Manufact Cloud，自动获得：

• HTTPS 端点：无需自己处理 SSL 证书
• 可观测性：实时请求追踪、指标、日志
• 环境变量管理：mcp-use servers env add
• 分支部署：GitHub 集成，推送到仓库自动部署

如果想持续集成，在 GitHub 上连接你的仓库到 manufact.com，每次推送自动触发部署。

Python SDK 同样完整

如果你是 Python 开发者，mcp-use 也提供了对等的 Python SDK：

pip install mcp-use langchain-openai

import asyncio
from langchain_openai import ChatOpenAI
from mcp_use import MCPAgent, MCPClient

async def main():
    config = {
        "mcpServers": {
            "filesystem": {
                "command": "npx",
                "args": ["-y", "@modelcontextprotocol/server-filesystem", "/tmp"]
            }
        }
    }
    client = MCPClient.from_dict(config)
    llm = ChatOpenAI(model="gpt-4o")
    agent = MCPAgent(llm=llm, client=client)
    await agent.run("List all files in /tmp and tell me their sizes")
    await client.cleanup()

asyncio.run(main())

Python SDK 与 TypeScript SDK 功能对等——都支持 MCP Server、MCP Agent、MCP Client 三种角色。

对比：为什么选择 mcp-use？

总结

mcp-use 是目前最完整的全栈 MCP 框架之一。它的核心创新在于 MCP App 概念——让 MCP 工具返回的不再是纯文本，而是可交互的 UI 组件。配合 Manufact Cloud 的一键部署和内置 Inspector，从本地开发到生产上线只需要几条命令。

如果你正在构建 AI Agent 的 MCP 工具集，或者想让 MCP Server 的输出不再冰冷单调，mcp-use 值得一试。

相关链接：

• mcp-use GitHub 仓库
• 官方文档
• TypeScript 快速开始
• Python 快速开始
• Manufact Cloud
• MCP Inspector 在线版