{
  "markdown": "<div align=\"center\">\n  <a href=\"https://mcp-use.com\">\n    <img alt=\"mcp-use\" src=\"https://raw.githubusercontent.com/mcp-use/mcp-use/main/docs/logo/banner-mcp-use.webp\" width=\"100%\">\n  </a>\n  <br /><br />\n\n<div id=\"user-content-toc\">\n  <ul align=\"center\" style=\"list-style: none;\">\n    <summary>\n      <h1>The TypeScript framework for MCP</h1>\n    <h3>Build, test, and ship MCP servers, ChatGPT plugins, Claude connectors</h3>\n    </summary>\n  </ul>\n</div>\n\n\n  <p>\n    Fully Typed, native Views and MCP Apps support, built-in Inspector and first class Agent experience.\n  </p>\n\n  <p>\n    <a href=\"https://docs.mcp-use.com/v2/typescript/getting-started/welcome\"><strong>Documentation</strong></a>\n    · <a href=\"https://inspector.mcp-use.com/inspector\"><strong>Inspector</strong></a>\n    · <a href=\"#examples\"><strong>Examples</strong></a>\n    · <a href=\"https://manufact.com\"><strong>Deploy</strong></a>\n  </p>\n\n  <p>\n    <a href=\"https://www.npmjs.com/package/mcp-use\">\n      <img src=\"https://img.shields.io/npm/v/mcp-use.svg?label=npm&amp;color=orange\" alt=\"npm version\">\n    </a>\n    <a href=\"https://www.npmjs.com/package/mcp-use\">\n      <img src=\"https://img.shields.io/npm/dw/mcp-use.svg\" alt=\"npm downloads\">\n    </a>\n    <a href=\"https://manufact.com\">\n      <img src=\"https://img.shields.io/badge/made%20by-manufact.com-blue\" alt=\"made by manufact.com\">\n    </a>\n    <a href=\"https://github.com/mcp-use/mcp-use/blob/main/LICENSE\">\n      <img src=\"https://img.shields.io/github/license/mcp-use/mcp-use\" alt=\"MIT license\">\n    </a>\n    <a href=\"https://discord.gg/XkNkSkMz3V\">\n      <img src=\"https://dcbadge.limes.pink/api/server/XkNkSkMz3V?style=flat\" alt=\"Discord\">\n    </a>\n  </p>\n  <br /><br />\n</div>\n\n> [!NOTE]\n> **Migrating from v1? Give it to your agent:**\n>\n> ```text\n> Migrate this mcp-use project to v2 following\n> https://docs.mcp-use.com/v2/typescript/server/migration\n> ```\n>\n> [Read the migration guide →](https://docs.mcp-use.com/v2/typescript/server/migration)\n\n## Get started\n\n### Start with your agent\n\n```text\nBuild an MCP server: https://mcp-use.com/prompt.md\n```\n\n[Read the prompt →](https://mcp-use.com/prompt.md)\n\n### Start with code\n\n```bash\nnpx -y create-mcp-use-app@latest\n```\n\nRun `npm run dev` in the generated project · open [`http://localhost:3000/mcp/inspector`](http://localhost:3000/mcp/inspector)\n\n[TS Docs](https://docs.mcp-use.com/v2/typescript/getting-started/welcome)\n\n## Everything you need to ship MCP\n\n<table>\n  <tr>\n    <td width=\"50%\" valign=\"top\">\n      <h3>Fully typed</h3>\n      <p>Zod schemas flow from tools to structured results, View props, and tool calls.</p>\n    </td>\n    <td width=\"50%\" valign=\"top\">\n      <h3>Native Views</h3>\n      <p>Bind React Views directly to tools and ship interactive apps without custom extension wiring.</p>\n    </td>\n  </tr>\n  <tr>\n    <td width=\"50%\" valign=\"top\">\n      <h3>Agent-first and headless</h3>\n      <p>Scaffold, invoke, inspect, screenshot, and deploy through your agent.</p>\n    </td>\n    <td width=\"50%\" valign=\"top\">\n      <h3>Built-in debugging tools</h3>\n      <p>Inspect tools and Views in the browser or headlessly through the CLI.</p>\n    </td>\n  </tr>\n</table>\n\n## Quickstart\n\nThe 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.\n\nReplace its `index.ts` with a view-bound tool like this:\n\n<table><tr><td>\n<details>\n<summary><strong><code>index.ts</code></strong> — Server entry file for tool definition and metadata</summary>\n\n```typescript\nimport { MCPServer } from \"mcp-use\";\nimport { z } from \"zod\";\n\nconst server = new MCPServer({\n  name: \"weather-app\",\n  title: \"Weather App\",\n  version: \"1.0.0\",\n});\n\nconst weatherInput = z.object({\n  city: z.string().describe(\"City to look up\"),\n});\n\nconst weatherOutput = z.object({\n  city: z.string(),\n  temperature: z.number(),\n  conditions: z.string(),\n});\n\nexport const getWeather = server.tool(\n  {\n    name: \"get-weather\",\n    title: \"Get weather\",\n    description: \"Get the current weather for a city\",\n    inputSchema: weatherInput,\n    outputSchema: weatherOutput,\n    view: { name: \"weather-card\" },\n    annotations: {\n      readOnlyHint: true,\n      destructiveHint: false,\n      openWorldHint: true,\n    },\n  },\n  async ({ city }) => {\n    const weather = {\n      city,\n      temperature: 22,\n      conditions: \"Sunny\",\n    };\n\n    return {\n      content: [\n        {\n          type: \"text\",\n          text: `Weather in ${city}: ${weather.conditions}, ${weather.temperature}°C`,\n        },\n      ],\n      structuredContent: weather,\n    };\n  },\n);\n\nexport default server;\n```\n\n</details>\n</td></tr></table>\n\n[Explore MCP server tools →](https://mcp-use.com/docs/typescript/server/tools)\n\n## Add Views to your tools\n\nCreate `views/weather-card/view.tsx`. The directory name matches `view.name` on the tool:\n\n<table><tr><td>\n<details>\n<summary><strong><code>view.tsx</code></strong> — Return a view from your tools: React weather card</summary>\n\n```tsx\nimport { useCallTool, useToolContext } from \"mcp-use/react\";\n\nexport default function WeatherCard() {\n  const { status, toolOutput, toolInput } =\n    useToolContext<\"get-weather\">();\n  const refresh = useCallTool(\"get-weather\");\n\n  if (status === \"pending\") {\n    return <p>Checking the weather in {toolInput?.city ?? \"your city\"}…</p>;\n  }\n  if (status === \"error\") return <p>Could not load the weather.</p>;\n\n  const weather = refresh.data?.structuredContent ?? toolOutput;\n\n  return (\n    <main style={{ padding: 24 }}>\n      <h2>{weather.city}</h2>\n      <p>\n        {weather.temperature}°C · {weather.conditions}\n      </p>\n      <button\n        disabled={refresh.isPending}\n        onClick={() => void refresh.callTool({ city: weather.city })}\n      >\n        {refresh.isPending ? \"Refreshing…\" : \"Refresh\"}\n      </button>\n      {refresh.error && <p>{refresh.error.message}</p>}\n    </main>\n  );\n}\n```\n\n</details>\n</td></tr></table>\n\n<p align=\"center\">\n  <img src=\"https://raw.githubusercontent.com/mcp-use/mcp-use/main/static/readme/chatgpt-hello-world.jpg\" alt=\"Hello World MCP App rendered in a ChatGPT conversation\" width=\"100%\" />\n  <br />\n  <sub>Build interactive UI experiences within ChatGPT with mcp-use.</sub>\n</p>\n\n[Build your first MCP App →](https://mcp-use.com/docs/typescript/mcp-apps/quickstart)\n\n## Build\n\nCreate the production build:\n\n```bash\nnpm run build\n```\n\n## Inspect\n\nStart development mode to serve the MCP endpoint at [`http://localhost:3000/mcp`](http://localhost:3000/mcp). The Inspector is automatically available at [`http://localhost:3000/mcp/inspector`](http://localhost:3000/mcp/inspector):\n\n```bash\nnpm run dev\n```\n\n<p align=\"center\">\n  <img src=\"https://raw.githubusercontent.com/mcp-use/mcp-use/main/static/readme/inspector-hello-world.jpg\" alt=\"Hello World MCP App rendered in the mcp-use Inspector\" width=\"100%\" />\n  <br />\n  <sub>Invoke tools, validate inputs, and inspect interactive Views in the same development loop.</sub>\n</p>\n\nStart 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 →](https://docs.mcp-use.com/tunneling)\n\nInspect the same server headlessly from the terminal, invoke representative tools, and capture a View screenshot:\n\n```bash\nnpm install --save-dev @mcp-use/client\nnpx mcp-use client connect local http://localhost:3000/mcp\nnpx mcp-use client local tools list\nnpx mcp-use client local tools call get-weather city=Tokyo\nnpx mcp-use screenshot \\\n  --server local \\\n  --tool get-weather \\\n  city=Tokyo \\\n  --output weather-card.png\n```\n\n## Deploy\n\nShip to [Manufact](https://manufact.com) and get observability, analytics, evals, submission readiness, and Git-based preview environments for free.\n\n```bash\nnpm run deploy\n```\n\nPrefer to run it yourself? Follow the [self-hosting guide →](https://docs.mcp-use.com/typescript/server/deployment/runtime-patterns).\n\n## How mcp-use compares\n\nmcp-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.\n\n```mermaid\nblock-beta\n  columns 7\n\n  metric[\"Metric\"] mcp[\"mcp-use v2\"] fastmcp[\"FastMCP TS\"] official[\"Official SDK v2*\"] xmcp[\"xmcp\"] skybridge[\"Skybridge\"] handler[\"mcp-handler\"]\n\n  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\"]\n  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\"]\n  packages[\"Installed<br/>packages\"] packagesMcp[\"51\"] packagesFast[\"180\"] packagesOfficial[\"119\"] packagesXmcp[\"171\"] packagesSkybridge[\"300\"] packagesHandler[\"130\"]\n  views[\"Views\"] viewsMcp[\"✅\"] viewsFast[\"✅\"] viewsOfficial[\"◐ Extension\"] viewsXmcp[\"✅\"] viewsSkybridge[\"✅\"] viewsHandler[\"❌\"]\n  nativeViews[\"Native Views<br/>on MCP 2026\"] nativeViewsMcp[\"✅\"] nativeViewsFast[\"✅\"] nativeViewsOfficial[\"❌\"] nativeViewsXmcp[\"❌\"] nativeViewsSkybridge[\"❌\"] nativeViewsHandler[\"❌\"]\n  oauth[\"One-line<br/>OAuth adapters\"] oauthMcp[\"✅\"] oauthFast[\"◐ Provider/proxy\"] oauthOfficial[\"◐ Primitives\"] oauthXmcp[\"✅\"] oauthSkybridge[\"✅\"] oauthHandler[\"❌\"]\n  protocol[\"MCP 2026<br/>protocol\"] protocolMcp[\"✅\"] protocolFast[\"✅\"] protocolOfficial[\"✅\"] protocolXmcp[\"❌\"] protocolSkybridge[\"❌\"] protocolHandler[\"❌\"]\n  screenshot[\"Built-in View<br/>screenshot CLI\"] screenshotMcp[\"✅\"] screenshotFast[\"❌\"] screenshotOfficial[\"❌\"] screenshotXmcp[\"❌\"] screenshotSkybridge[\"❌\"] screenshotHandler[\"❌\"]\n  tunnel[\"Built-in<br/>tunneling\"] tunnelMcp[\"✅\"] tunnelFast[\"❌\"] tunnelOfficial[\"❌\"] tunnelXmcp[\"❌\"] tunnelSkybridge[\"✅\"] tunnelHandler[\"❌\"]\n  inspector[\"Built-in<br/>Inspector\"] inspectorMcp[\"✅\"] inspectorFast[\"✅\"] inspectorOfficial[\"❌\"] inspectorXmcp[\"❌\"] inspectorSkybridge[\"◐ Limited\"] inspectorHandler[\"❌\"]\n\n  classDef metricLabel fill:#6e76811a,font-weight:bold\n  classDef brand fill:#2ea04333,stroke:#2da44e,stroke-width:3px,font-weight:bold\n  classDef header fill:#6e76811a,font-weight:bold\n  classDef value fill:#6e76810f,stroke-width:1px\n  classDef leader fill:#2ea0432e,stroke:#2da44e,stroke-width:2px,font-weight:bold\n  classDef partial fill:#bb80092e,stroke:#bf8700,stroke-width:2px,font-weight:bold\n  classDef unavailable fill:#6e76810f,opacity:0.72\n\n  class metric,speed,install,packages,views,nativeViews,oauth,protocol,screenshot,tunnel,inspector metricLabel\n  class mcp brand\n  class fastmcp,official,xmcp,skybridge,handler header\n  class speedFast,speedOfficial,speedXmcp,speedSkybridge,speedHandler,installFast,installOfficial,installXmcp,installSkybridge,installHandler,packagesFast,packagesOfficial,packagesXmcp,packagesSkybridge,packagesHandler value\n  class speedMcp,installMcp,packagesMcp,viewsMcp,viewsFast,viewsXmcp,viewsSkybridge,nativeViewsMcp,nativeViewsFast,oauthMcp,oauthXmcp,oauthSkybridge,protocolMcp,protocolFast,protocolOfficial,screenshotMcp,tunnelMcp,tunnelSkybridge,inspectorMcp,inspectorFast leader\n  class oauthFast,viewsOfficial,oauthOfficial,inspectorSkybridge partial\n  class viewsHandler,nativeViewsOfficial,nativeViewsXmcp,nativeViewsSkybridge,nativeViewsHandler,oauthHandler,protocolXmcp,protocolSkybridge,protocolHandler,screenshotFast,screenshotOfficial,screenshotXmcp,screenshotSkybridge,screenshotHandler,tunnelFast,tunnelOfficial,tunnelXmcp,tunnelHandler,inspectorOfficial,inspectorXmcp,inspectorHandler unavailable\n```\n\n<sub>* Includes `@modelcontextprotocol/ext-apps`, Vite, and zod for an MCP Apps-capable stack.</sub>\n\n<sub>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.</sub>\n\n**[Read the detailed benchmark report →](https://github.com/mcp-use/mcp-use/blob/main/benchmark.md)**\n\n## Examples\n\nRemix a complete MCP App, inspect the source, or deploy it as a starting point:\n\n| Preview | App | What it demonstrates |\n| --- | --- | --- |\n| <img src=\"https://raw.githubusercontent.com/mcp-use/mcp-chart-builder/main/repo-assets/demo.gif\" alt=\"Chart Builder demo\" width=\"280\"> | [Chart Builder](https://github.com/mcp-use/mcp-chart-builder) | Structured data rendered as interactive charts · [Open demo](https://yellow-shadow-21833.run.mcp-use.com/mcp) |\n| <img src=\"https://raw.githubusercontent.com/mcp-use/mcp-diagram-builder/main/repo-assets/demo.gif\" alt=\"Diagram Builder demo\" width=\"280\"> | [Diagram Builder](https://github.com/mcp-use/mcp-diagram-builder) | Create and edit diagrams through MCP tools · [Open demo](https://lucky-darkness-402ph.run.mcp-use.com/mcp) |\n| <img src=\"https://raw.githubusercontent.com/mcp-use/mcp-maps-explorer/main/repo-assets/demo.gif\" alt=\"Maps Explorer demo\" width=\"280\"> | [Maps Explorer](https://github.com/mcp-use/mcp-maps-explorer) | Search, detail tools, and an interactive map view · [Open demo](https://super-night-ttde2.run.mcp-use.com/mcp) |\n\n[Browse all TypeScript examples →](https://github.com/mcp-use/mcp-use/tree/main/libraries/typescript/packages/server/examples)\n\n## Ecosystem\n\n| Package | Use it for |\n| --- | --- |\n| [`mcp-use`](https://www.npmjs.com/package/mcp-use) | TypeScript v2 server framework, React views, and CLI |\n| [`@mcp-use/client`](https://www.npmjs.com/package/@mcp-use/client) | Connect to MCP servers from Node.js, browsers, React, and sandboxes |\n| [`@mcp-use/agent`](https://www.npmjs.com/package/@mcp-use/agent) | Build model-powered agents on top of MCP clients |\n| [`@mcp-use/inspector`](https://www.npmjs.com/package/@mcp-use/inspector) | Inspect and debug MCP servers and apps |\n| [`@mcp-use/tunnel`](https://www.npmjs.com/package/@mcp-use/tunnel) | Expose local HTTP, WebSocket, and MCP servers through the managed relay |\n| [`create-mcp-use-app`](https://www.npmjs.com/package/create-mcp-use-app) | Scaffold servers and interactive apps |\n| [`mcp-use` for Python](https://pypi.org/project/mcp-use/) | Build Python MCP servers, clients, and agents |\n\n- [TypeScript documentation](https://mcp-use.com/docs/typescript)\n- [Python documentation](https://mcp-use.com/docs/python)\n- [Inspector documentation](https://mcp-use.com/docs/inspector/index)\n- [Agent documentation](https://mcp-use.com/docs/typescript/agent/index)\n- [Client documentation](https://mcp-use.com/docs/typescript/client/index)\n\n## Protocol conformance\n\n<div align=\"center\">\n  <a href=\"https://github.com/mcp-use/mcp-use/actions/workflows/conformance.yml\">\n    <img src=\"https://img.shields.io/endpoint?url=https://gist.githubusercontent.com/tonxxd/6edf670f0446dc9f7a1f32d6bfda2b70/raw/python-conformance.json\" alt=\"Python MCP conformance\">\n  </a>\n  <a href=\"https://github.com/mcp-use/mcp-use/actions/workflows/conformance.yml\">\n    <img src=\"https://img.shields.io/endpoint?url=https://gist.githubusercontent.com/tonxxd/6edf670f0446dc9f7a1f32d6bfda2b70/raw/python-client-conformance.json\" alt=\"Python MCP client conformance\">\n  </a>\n  <a href=\"https://github.com/mcp-use/mcp-use/actions/workflows/conformance.yml\">\n    <img src=\"https://img.shields.io/endpoint?url=https://gist.githubusercontent.com/tonxxd/6edf670f0446dc9f7a1f32d6bfda2b70/raw/typescript-conformance.json\" alt=\"TypeScript MCP conformance\">\n  </a>\n  <a href=\"https://github.com/mcp-use/mcp-use/actions/workflows/conformance.yml\">\n    <img src=\"https://img.shields.io/endpoint?url=https://gist.githubusercontent.com/tonxxd/6edf670f0446dc9f7a1f32d6bfda2b70/raw/typescript-node-client-conformance.json\" alt=\"TypeScript MCP client conformance\">\n  </a>\n</div>\n\n## Security and community\n\n- [Security policy](https://github.com/mcp-use/mcp-use/blob/main/SECURITY.md)\n- [Contribution guide](https://github.com/mcp-use/mcp-use/blob/main/CONTRIBUTING.md)\n- [GitHub issues](https://github.com/mcp-use/mcp-use/issues)\n- [Discord community](https://discord.gg/XkNkSkMz3V)\n- [Manufact](https://manufact.com)\n- [MIT license](https://github.com/mcp-use/mcp-use/blob/main/LICENSE)\n\n## Contributors\n\nBuilt by [Pietro](https://github.com/pietrozullo), [Luigi](https://github.com/pederzh), [Enrico](https://github.com/tonxxd), and the mcp-use community.\n\n<a href=\"https://github.com/mcp-use/mcp-use/graphs/contributors\">\n  <img src=\"https://contrib.rocks/image?repo=mcp-use/mcp-use\" alt=\"mcp-use contributors\">\n</a>\n",
  "bytes": 16710,
  "sha": "278f2f9b00237ecdafa9282fce21c60126c6d889d631c420f030f60a2cc6bd1d",
  "repo_slug": "mcp-use/mcp-use",
  "fonte": "repo",
  "truncated": false,
  "api": "https://agentalog.com/api/listings/skl_mcp_use_mcp_use_mcp_apps_builder_fb6ab3f9/readme"
}