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:

>

> Migrate this mcp-use project to v2 following

> 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 interactive UI experiences within ChatGPT with mcp-use.}

Build your first MCP App →

Create ChatGPT Plugin Extensions

Build ChatGPT Plugin Extensions with interactive Views that users can open alongside their conversation. Use useModelContext to let them add content from a View to the conversation, such as a book to discuss or analytics to explore.

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

Little Bookshop

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

Manufact Analytics

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

Explore ChatGPT Plugin Extensions →

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

_{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

| 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 |

• TypeScript documentation
• Python documentation
• Inspector documentation
• Agent documentation
• Client documentation

Protocol conformance

Security and community

• Security policy
• Contribution guide
• GitHub issues
• Discord community
• Manufact
• MIT license

Contributors

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