Unified MCP Client Library

用于 MCP 的 TypeScript 框架

构建、测试并发布 MCP 服务、ChatGPT 插件和 Claude 连接器

完整类型支持、原生视图和 MCP Apps 支持、内置 Inspector，以及一流的 Agent 体验。

文档 · Inspector · 示例 · 部署

说明

从 v1 迁移？交给你的 Agent：

Migrate this mcp-use project to v2 following
https://docs.mcp-use.com/v2/typescript/server/migration

阅读迁移指南 →

开始使用

使用你的 Agent 开始

Build an MCP server: https://mcp-use.com/prompt.md

阅读提示词 →

从代码开始

npx -y create-mcp-use-app@latest

在生成的项目中运行 npm run dev · 打开 http://localhost:3000/mcp/inspector

TypeScript 文档

发布 MCP 所需的一切

快速入门

脚手架会为你生成服务、TypeScript 配置、开发脚本、Inspector 和 React 视图流水线。启动后，MCP 端点还会提供一个客户端就绪的落地页，其中包含连接 URL 和设置说明。

将其 index.ts 替换为如下绑定了视图的工具：

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

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

const weatherInput = z.object({
  city: z.string().describe("City to look up"),
});

const weatherOutput = z.object({
  city: z.string(),
  temperature: z.number(),
  conditions: z.string(),
});

export const getWeather = server.tool(
  {
    name: "get-weather",
    title: "Get weather",
    description: "Get the current weather for a city",
    inputSchema: weatherInput,
    outputSchema: weatherOutput,
    view: { name: "weather-card" },
    annotations: {
      readOnlyHint: true,
      destructiveHint: false,
      openWorldHint: true,
    },
  },
  async ({ city }) => {
    const weather = {
      city,
      temperature: 22,
      conditions: "Sunny",
    };

    return {
      content: [
        {
          type: "text",
          text: `Weather in ${city}: ${weather.conditions}, ${weather.temperature}°C`,
        },
      ],
      structuredContent: weather,
    };
  },
);

export default server;

探索 MCP 服务工具 →

为工具添加视图

创建 views/weather-card/view.tsx。目录名称与工具上的 view.name 相匹配：

import { useCallTool, useToolContext } from "mcp-use/react";

export default function WeatherCard() {
  const { status, toolOutput, toolInput } =
    useToolContext<"get-weather">();
  const refresh = useCallTool("get-weather");

  if (status === "pending") {
    return <p>Checking the weather in {toolInput?.city ?? "your city"}…</p>;
  }
  if (status === "error") return <p>Could not load the weather.</p>;

  const weather = refresh.data?.structuredContent ?? toolOutput;

  return (
    <main style={{ padding: 24 }}>
      <h2>{weather.city}</h2>
      <p>
        {weather.temperature}°C · {weather.conditions}
      </p>
      <button
        disabled={refresh.isPending}
        onClick={() => void refresh.callTool({ city: weather.city })}
      >
        {refresh.isPending ? "Refreshing…" : "Refresh"}
      </button>
      {refresh.error && <p>{refresh.error.message}</p>}
    </main>
  );
}

_{使用 mcp-use 在 ChatGPT 中打造交互式 UI 体验。}

构建你的第一个 MCP App →

创建 ChatGPT 插件扩展

通过交互式视图构建 ChatGPT 插件扩展，让用户可以在对话旁边打开这些视图。使用 useModelContext，让用户将视图中的内容添加到对话中，例如要讨论的书籍或要探索的分析数据。

import { useModelContext } from "mcp-use/react";

export default function AddBook() {
  const { add, pending, error } = useModelContext();

  async function shareBook() {
    try {
      await add("selected-book", {
        type: "text",
        title: "The Great Gatsby",
        text: "Selected book: The Great Gatsby by F. Scott Fitzgerald",
      });
    } catch (error) {
      console.error("Could not share the book", error);
    }
  }

  return (
    <>
      <button disabled={pending} onClick={shareBook}>
        {pending ? "Adding…" : "Add book to chat"}
      </button>
      {error && <p role="alert">{error.message}</p>}
    </>
  );
}

小书店

https://github.com/user-attachments/assets/2f9b56c1-f149-430e-b5b6-a258c08491e6

Manufact Analytics

https://github.com/user-attachments/assets/e488c66e-8f65-4930-8e08-711bdf12ec6e

探索 ChatGPT 插件扩展 →

构建

创建生产构建：

npm run build

检查

启动开发模式，在 http://localhost:3000/mcp 提供 MCP 端点。Inspector 会自动在 http://localhost:3000/mcp/inspector 启动：

npm run dev

_{在同一个开发周期中调用工具、验证输入并检查交互式视图。}

在 Inspector UI 中启动隧道，或运行 mcp-use dev --tunnel，获取本地 MCP 服务的公开 URL，并在部署前使用 ChatGPT 和 Claude 进行测试。了解隧道的更多信息 →

也可以直接在终端中无头检查同一服务、调用具有代表性的工具并截取视图：

npm install --save-dev @mcp-use/client
npx mcp-use client connect local http://localhost:3000/mcp
npx mcp-use client local tools list
npx mcp-use client local tools call get-weather city=Tokyo
npx mcp-use screenshot \
  --server local \
  --tool get-weather \
  city=Tokyo \
  --output weather-card.png

部署

部署到 Manufact，即可免费获得可观测性、分析、评估、提交准备情况，以及基于 Git 的预览环境。

npm run deploy

想要自行运行？请参阅自托管指南 →。

mcp-use 对比

mcp-use 基于官方 TypeScript SDK v2 构建，并提供一流的视图、类型化的工具到 UI 契约、经过优化的无状态运行时、Inspector、截图验证、Agent 优先的命令行工作流以及部署功能。

block-beta
  columns 7

  metric["Metric"] mcp["mcp-use v2"] fastmcp["FastMCP TS"] official["Official SDK v2*"] xmcp["xmcp"] skybridge["Skybridge"] handler["mcp-handler"]

  speed["Speed"] speedMcp["10,982 ops/s"] speedFast["6,628 ops/s"] speedOfficial["8,050 ops/s"] speedXmcp["6,585 ops/s"] speedSkybridge["8,116 ops/s"] speedHandler["6,324 ops/s"]
  install["MCP App<br/>dev stack"] installMcp["74.4 MiB"] installFast["122.5 MiB"] installOfficial["99.0 MiB"] installXmcp["121.9 MiB"] installSkybridge["137.5 MiB"] installHandler["388.0 MiB"]
  packages["Installed<br/>packages"] packagesMcp["51"] packagesFast["180"] packagesOfficial["119"] packagesXmcp["171"] packagesSkybridge["300"] packagesHandler["130"]
  views["Views"] viewsMcp["✅"] viewsFast["✅"] viewsOfficial["◐ Extension"] viewsXmcp["✅"] viewsSkybridge["✅"] viewsHandler["❌"]
  nativeViews["Native Views<br/>on MCP 2026"] nativeViewsMcp["✅"] nativeViewsFast["✅"] nativeViewsOfficial["❌"] nativeViewsXmcp["❌"] nativeViewsSkybridge["❌"] nativeViewsHandler["❌"]
  oauth["One-line<br/>OAuth adapters"] oauthMcp["✅"] oauthFast["◐ Provider/proxy"] oauthOfficial["◐ Primitives"] oauthXmcp["✅"] oauthSkybridge["✅"] oauthHandler["❌"]
  protocol["MCP 2026<br/>protocol"] protocolMcp["✅"] protocolFast["✅"] protocolOfficial["✅"] protocolXmcp["❌"] protocolSkybridge["❌"] protocolHandler["❌"]
  screenshot["Built-in View<br/>screenshot CLI"] screenshotMcp["✅"] screenshotFast["❌"] screenshotOfficial["❌"] screenshotXmcp["❌"] screenshotSkybridge["❌"] screenshotHandler["❌"]
  tunnel["Built-in<br/>tunneling"] tunnelMcp["✅"] tunnelFast["❌"] tunnelOfficial["❌"] tunnelXmcp["❌"] tunnelSkybridge["✅"] tunnelHandler["❌"]
  inspector["Built-in<br/>Inspector"] inspectorMcp["✅"] inspectorFast["✅"] inspectorOfficial["❌"] inspectorXmcp["❌"] inspectorSkybridge["◐ Limited"] inspectorHandler["❌"]

  classDef metricLabel fill:#6e76811a,font-weight:bold
  classDef brand fill:#2ea04333,stroke:#2da44e,stroke-width:3px,font-weight:bold
  classDef header fill:#6e76811a,font-weight:bold
  classDef value fill:#6e76810f,stroke-width:1px
  classDef leader fill:#2ea0432e,stroke:#2da44e,stroke-width:2px,font-weight:bold
  classDef partial fill:#bb80092e,stroke:#bf8700,stroke-width:2px,font-weight:bold
  classDef unavailable fill:#6e76810f,opacity:0.72

  class metric,speed,install,packages,views,nativeViews,oauth,protocol,screenshot,tunnel,inspector metricLabel
  class mcp brand
  class fastmcp,official,xmcp,skybridge,handler header
  class speedFast,speedOfficial,speedXmcp,speedSkybridge,speedHandler,installFast,installOfficial,installXmcp,installSkybridge,installHandler,packagesFast,packagesOfficial,packagesXmcp,packagesSkybridge,packagesHandler value
  class speedMcp,installMcp,packagesMcp,viewsMcp,viewsFast,viewsXmcp,viewsSkybridge,nativeViewsMcp,nativeViewsFast,oauthMcp,oauthXmcp,oauthSkybridge,protocolMcp,protocolFast,protocolOfficial,screenshotMcp,tunnelMcp,tunnelSkybridge,inspectorMcp,inspectorFast leader
  class oauthFast,viewsOfficial,oauthOfficial,inspectorSkybridge partial
  class viewsHandler,nativeViewsOfficial,nativeViewsXmcp,nativeViewsSkybridge,nativeViewsHandler,oauthHandler,protocolXmcp,protocolSkybridge,protocolHandler,screenshotFast,screenshotOfficial,screenshotXmcp,screenshotSkybridge,screenshotHandler,tunnelFast,tunnelOfficial,tunnelXmcp,tunnelHandler,inspectorOfficial,inspectorXmcp,inspectorHandler unavailable

_{* 包含 @modelcontextprotocol/ext-apps、Vite 和 zod，可用于构建支持 MCP Apps 的技术栈。}

_{安装行比较的是自定义 React MCP App 开发技术栈。因此，FastMCP 包含 Apps 扩展、React、Vite React 插件、Vite、TypeScript 和 zod，而不只是范围更窄的服务端组件工作流。大小为常规 npm 安装后 node_modules 的实际磁盘占用，包括必需的对等依赖项。}

阅读详细基准测试报告 →

示例

复刻完整的 MCP App、检查源代码，或将其部署为起点：

预览	应用	展示内容
	图表构建器	将结构化数据渲染为交互式图表 · 打开演示
	图表构建器	通过 MCP 工具创建和编辑图表 · 打开演示
	地图探索器	搜索、详情工具和交互式地图视图 · 打开演示

浏览所有 TypeScript 示例 →

生态系统

• TypeScript 文档
• Python 文档
• 检查器文档
• Agent 文档
• 客户端文档

协议一致性

• 安全政策
• 贡献指南
• GitHub 问题
• Discord 社区
• Manufact
• MIT 许可证

贡献者

由 Pietro、Luigi、Enrico 和 mcp-use 社区共同打造。