SECTION · 01

关键指标一览

Stars 数

10,455

Forks 数

1,395

Watchers 数

10,455

Issue 数

89

主要语言

TypeScript

许可证

MIT

仓库所有者

mcp-use

创建时间

2025.03.28

更新时间

2026.08.05

主题标签

SECTION · 03

README 详细介绍

README 原文为英文,如需阅读完整中文内容,建议使用 浏览器翻译插件(如 Edge 浏览器自带翻译、Google 翻译扩展)进行整页翻译。

The TypeScript framework for MCP

Build, test, and ship MCP servers, ChatGPT plugins, Claude connectors

Fully Typed, native Views and MCP Apps support, built-in Inspector and first class Agent experience.

Documentation
· Inspector
· Examples
· Deploy

> [!NOTE]
> Migrating from v1? Give it to your agent: Read the migration guide →
>
>

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

>
> Read the migration guide →

Get started

Start with your agent

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

Read the prompt →

Start with code

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

Run npm run dev in the generated project · open <code class="ra0-md-code">http://localhost:3000/mcp/inspector</code>

TS Docs

Everything you need to ship MCP

Fully typed

Zod schemas flow from tools to structured results, View props, and tool calls.

Native Views

Bind React Views directly to tools and ship interactive apps without custom extension wiring.

Agent-first and headless

Scaffold, invoke, inspect, screenshot, and deploy through your agent.

Built-in debugging tools

Inspect tools and Views in the browser or headlessly through the CLI.

Quickstart

The scaffold gives you the server, TypeScript configuration, development scripts, Inspector, and a React view pipeline. Start it once and the MCP endpoint also serves a client-ready landing page with its connection URL and setup instructions.

Replace its index.ts with a view-bound tool like this:

index.ts — Server entry file for tool definition and metadata

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;

Explore MCP server tools →

Add Views to your tools

Create views/weather-card/view.tsx. The directory name matches view.name on the tool:

view.tsx — Return a view from your tools: React weather card

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>
  );
}

Hello World MCP App rendered in a ChatGPT conversation

_{Build interactive UI experiences within ChatGPT with mcp-use.}

Build your first MCP App →

Build

Create the production build:

npm run build

Inspect

Start development mode to serve the MCP endpoint at <code class="ra0-md-code">http://localhost:3000/mcp</code>. The Inspector is automatically available at <code class="ra0-md-code">http://localhost:3000/mcp/inspector</code>:

npm run dev

Hello World MCP App rendered in the mcp-use Inspector

_{Invoke tools, validate inputs, and inspect interactive Views in the same development loop.}

Start a tunnel from the Inspector UI or run mcp-use dev --tunnel to get a public URL for your local MCP server and test it with ChatGPT and Claude before deployment. Learn more about tunneling →

Inspect the same server headlessly from the terminal, invoke representative tools, and capture a View screenshot:

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

Deploy

Ship to Manufact and get observability, analytics, evals, submission readiness, and Git-based preview environments for free.

npm run deploy

Prefer to run it yourself? Follow the self-hosting guide →.

How mcp-use compares

mcp-use builds on the official TypeScript SDK v2 and adds first-class Views, typed tool-to-UI contracts, an optimized stateless runtime, the Inspector, screenshot verification, agent-first CLI workflows, and deployment.

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

_{* Includes @modelcontextprotocol/ext-apps, Vite, and zod for an MCP Apps-capable stack.}

_{Install rows compare custom React MCP App development stacks. FastMCP therefore includes the Apps extension, React, Vite React plugin, Vite, TypeScript, and zod rather than only its narrower server-side component workflow. Size is actual node_modules disk usage after a normal npm install, including required peer dependencies.}

Read the detailed benchmark report →

Examples

Remix a complete MCP App, inspect the source, or deploy it as a starting point:

Preview	App	What it demonstrates
	Chart Builder	Structured data rendered as interactive charts · Open demo
	Diagram Builder	Create and edit diagrams through MCP tools · Open demo
	Maps Explorer	Search, detail tools, and an interactive map view · Open demo

Browse all TypeScript examples →

Ecosystem

Protocol conformance

Package	Use it for
<code class="ra0-md-code">mcp-use</code>	TypeScript v2 server framework, React views, and CLI
<code class="ra0-md-code">@mcp-use/client</code>	Connect to MCP servers from Node.js, browsers, React, and sandboxes
<code class="ra0-md-code">@mcp-use/agent</code>	Build model-powered agents on top of MCP clients
<code class="ra0-md-code">@mcp-use/inspector</code>	Inspect and debug MCP servers and apps
<code class="ra0-md-code">create-mcp-use-app</code>	Scaffold servers and interactive apps
<code class="ra0-md-code">mcp-use</code> for Python	Build Python MCP servers, clients, and agents

Security and community

Contributors

Built by Pietro, Luigi, Enrico, and the mcp-use community.

mcp-use – mcp-use

关键指标一览

主题标签

README 详细介绍

The TypeScript framework for MCP

Build, test, and ship MCP servers, ChatGPT plugins, Claude connectors

Get started

Start with your agent

Start with code

Everything you need to ship MCP

Fully typed

Native Views

Agent-first and headless

Built-in debugging tools

Quickstart

Add Views to your tools

Build

Inspect

Deploy

How mcp-use compares

Examples

Ecosystem

Protocol conformance

Security and community

Contributors

返回GitHub项目列表

mcp-use – mcp-use

关键指标一览

主题标签

README 详细介绍

The TypeScript framework for MCP

Build, test, and ship MCP servers, ChatGPT plugins, Claude connectors

Get started

Start with your agent

Start with code

Everything you need to ship MCP

Fully typed

Native Views

Agent-first and headless

Built-in debugging tools

Quickstart

Add Views to your tools

Build

Inspect

Deploy

How mcp-use compares

Examples

Ecosystem

Protocol conformance

Security and community

Contributors

其他开源项目推荐

返回GitHub项目列表