mcp-use

mcp-useとは

多くのMCPサーバーは文字列を返し、見せ方はクライアント任せです。mcp-useはその逆を前提にしています。ツールにReactの画面を持たせられるため、ChatGPTやClaudeの中で利用者が目にするのは文章ではなく操作できる画面になります。ツールの入出力はZodのスキーマで宣言し、その型が画面の受け取る値まで通るので、片方を変えるともう片方が型エラーとして知らせてきます。雛形から作った構成には、作業しながらツールを呼んだり画面を確かめたりできる検査画面がローカルに用意され、実際のクライアントから試すためのトンネル機能も付いています。バージョン2はこのサーバーと画面の組み合わせを軸にした作り直しで、以前のPython製クライアントライブラリは主眼から外れています。

mcp-useで何ができますか？

空のファイルではなく動くサーバーから始める — コマンド1つでサーバー、ビルド設定、サンプルのツール、検査画面までが揃うため、設計を決める前にまず動かせます。
スキーマは1か所、検査は全体に効く — ツールの入出力をZodで一度だけ宣言すると、その型が構造化された結果にも画面の受け取る値にも届きます。食い違えば型エラーになります。
文章ではなく画面を返す — ツールにReactの画面を指定すると、クライアントがその画面をツールの結果とともに表示します。利用者は読むのではなく操作できます。
クライアントに出す前に試す — ブラウザの検査画面から、動いているサーバーに対してツールを呼び、画面の表示を確認できます。同じ確認は自動実行のために端末からも行えます。
トンネル経由で本物のクライアントから試す — ローカルのサーバーに公開URLを割り当てられるため、何も配置しないままChatGPTやClaudeから作りかけの状態を試せます。

mcp-useを選ぶ前に

バージョン2は改良ではなく作り直しです。移行手引きが用意されていますが、バージョン1向けのコードや解説、Python製クライアントライブラリはそのままでは通用しません。
配置の手順は開発元が運営するホスティングに向いており、可観測性や分析機能もそちらにあります。別の環境で動かすこともできますが、手順として整備されているのはこの経路です。

よくある質問

mcp-useは商用利用できますか?

mcp-useはMITライセンスで公開されています。OSI承認のオープンソースライセンスで、商用利用が認められています。

mcp-useはどの形で使えますか?

mcp-useはセルフホスト・ローカル実行・マネージドクラウドの形で利用できます。

ドキュメント

mcp-use/mcp-use のREADMEより転載（MIT）。原文を読む ↗

[!NOTE] Migrating from v1? Give it to your agent:
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 http://localhost:3000/mcp/inspector

TS Docs

Everything you need to ship MCP

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:

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:

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

Build your first MCP App →

Build

Create the production build:

npm run build

Inspect

Start development mode to serve the MCP endpoint at http://localhost:3000/mcp. The Inspector is automatically available at http://localhost:3000/mcp/inspector:

npm run dev

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

Package	Use it for
`mcp-use`	TypeScript v2 server framework, React views, and CLI
`@mcp-use/client`	Connect to MCP servers from Node.js, browsers, React, and sandboxes
`@mcp-use/agent`	Build model-powered agents on top of MCP clients
`@mcp-use/inspector`	Inspect and debug MCP servers and apps
`@mcp-use/tunnel`	Expose local HTTP, WebSocket, and MCP servers through the managed relay
`create-mcp-use-app`	Scaffold servers and interactive apps
`mcp-use` for Python	Build Python MCP servers, clients, and agents

mcp-useとは

mcp-useで何ができますか？

mcp-useを選ぶ前に

よくある質問

ドキュメント

Get started

Start with your agent

Start with code

Everything you need to ship MCP

Quickstart

Add Views to your tools

Build

Inspect

Deploy

How mcp-use compares

Examples

Ecosystem

Protocol conformance

Security and community

mcp-useとは

mcp-useで何ができますか？

mcp-useを選ぶ前に

よくある質問

Get started

Start with your agent

Start with code

Everything you need to ship MCP

Quickstart

Add Views to your tools

Build

Inspect

Deploy

How mcp-use compares

Examples

Ecosystem

Protocol conformance

Security and community

プロトコル / 相互運用の他の選択肢