Development
Plugin
mcp-use
The fullstack MCP framework to develop MCP Apps for ChatGPT / Claude & MCP Servers for AI Agents.
Plugin Signal79/100Solid
maintained100
capable37
documented100
adopted86
Install on Claude Code
> /plugin marketplace add mcp-use/mcp-use
Stats
10,468
Stars
1,408
Forks
Active
Maintenance
TypeScript
Language
MIT
License
11h ago
Last commit
1y ago
Created
Repo: mcp-use/mcp-use
What's inside
Skills
4/chatgpt-app-builderBuild, modify, debug, or review ChatGPT Apps with mcp-use./mcp-apps-builderBuild, modify, debug, migrate, or review TypeScript MCP servers and interactive MCP Apps using mcp-use v2. Use for tools, resources, prompts, Views, React host interactions, OAuth, middleware, Inspector workflows, package-boundary migrations, and release-ready verification in an/mcp-builderBuild, modify, debug, or review TypeScript MCP servers with mcp-use./openapi-to-mcpBuild and deploy an MCP server from an OpenAPI / Swagger spec using the mcp-use TypeScript SDK. Use this skill whenever the user wants to "turn this OpenAPI spec into an MCP server", "make this API usable from Claude/ChatGPT", "wrap this Swagger doc as MCP tools", "expose this
MCP
1Badges
1
README
1[!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
Get started
Start with your agent
Build an MCP server: https://mcp-use.com/prompt.md
Start with code
npx -y create-mcp-use-app@latest
Run npm run dev in the generated project · open http://localhost:3000/mcp/inspector
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;
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
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 |
- TypeScript documentation
- Python documentation
- Inspector documentation
- Agent documentation
- Client documentation
Protocol conformance
Security and community
Contributors
File tree
1660mcp-use/mcp-useView on GitHub
.claude-plugin/
marketplace.json
.github/
ISSUE_TEMPLATE/
bug_report.md
pull_request_template.md
scripts/
generate-python-release-notes.sh
workflows/
approve-fork-pr.yml
auto-label.json5
auto-label.yml
bump-mcp-use-reusable.yml
ci.yml
claude.yml
conformance-comment.yml
conformance.yml
create-app-e2e-canary.yml
dependabot-changesets.yml
docs.yml
everything-typecheck.yml
inspector-e2e-sequential.yml
inspector-e2e.yml
links.yml
pr-labeler.yml
publish-inspector-docker.yml
python-release.yml
railway-deploy.yml
sdk-evals-synthesis.yml
sdk-evals.yml
server-examples.yml
stale.yml
sync-inspector.yml
test-release-notifications.yml
typescript-pr-preview.yml
typescript-release.yml
.gitignore
.mcp.json
.pre-commit-config.yaml
.worktreeinclude
benchmark.md
CODE_OF_CONDUCT.md
context7.json
CONTRIBUTING.md
docs/
context7.json
docs.json
favicon.svg
fonts.css
generate_docs.py
guides/
chatgpt-apps-flow.mdx
home/
index.mdx
mcp101.mdx
redirects/
inspector.mdx
python.mdx
tunneling.mdx
typescript.mdx
images/
01.png
02.png
agent_white.png
agent.jpg
anthropic.svg
client_white.png
client.jpg
code_mode.mp4
codemode.gif
codemode.png
configuration-dark.png
configuration-light.png
DeploySmall.svg
dockerbutton.svg
examples-dark.png
examples-light.png
google.svg
hero-dark.png
hero-light.png
icons/
auth0.svg
better-auth.svg
clerk.svg
keycloak.svg
redis.svg
supabase.svg
inspector/
inspector-logo.svg
add-to-client-dropdown.png
chat-active.png
chat-api-modal.png
chat-configure.png
chat-interaction.png
cmd-k-add-to-client.png
command-palette-empty.png
command-palette-search.png
connect-form.png
dashboard.png
inspector-dashboard.jpg
oauth-linear.png
prompts-empty.png
prompts-selected.png
prompts-selection.png
quick-search.png
resources-empty.png
rpc-logs-detail.png
rpc-logs-full-screen.png
server-connected.png
server-detail.png
tools-list.png
installation-dark.png
installation-light.png
logo-mcp-use.svg
mcp_use.svg
mcp-useverticalsolution.png
Middleware.jpg
openai.svg
py_welcome.png
pythonlogo.svg
quickstart-dark.png
quickstart-light.png
railway-button.svg
railway.svg
server_white.png
server.jpg
stores/
chat.png
claude.png
cursor.png
TryNowSmall.svg
ts-helpers.png
ts-welcome.png
typescriptlogo.svg
UseLiveSmall.svg
view.mp4
widget.mp4
workos.svg
xlogo.svg
inspector/
changelog.mdx
cli.mdx
command-palette.mdx
connection-settings.mdx
debugging-chatgpt-apps.mdx
index.mdx
integration.mdx
keyboard-shortcuts.mdx
self-hosting.mdx
url-parameters.mdx
logo/
banner-mcp-use.webp
dark.svg
light.svg
python/
agent/
agent-configuration.mdx
building-custom-agents.mdx
interactive-chat-patterns.mdx
llm-integration.mdx
memory-management.mdx
observability.mdx
server-manager.mdx
streaming.mdx
structured-output.mdx
api-reference/
mcp_use_agents_adapters_anthropic.mdx
mcp_use_agents_adapters_base.mdx
mcp_use_agents_adapters_google.mdx
mcp_use_agents_adapters_langchain_adapter.mdx
mcp_use_agents_adapters_openai.mdx
mcp_use_agents_base.mdx
mcp_use_agents_display.mdx
mcp_use_agents_managers_base.mdx
mcp_use_agents_managers_server_manager.mdx
mcp_use_agents_managers_tools_base_tool.mdx
mcp_use_agents_managers_tools_connect_server.mdx
mcp_use_agents_managers_tools_disconnect_server.mdx
mcp_use_agents_managers_tools_get_active_server.mdx
mcp_use_agents_managers_tools_list_servers_tool.mdx
mcp_use_agents_managers_tools_search_tools.mdx
mcp_use_agents_mcpagent.mdx
mcp_use_agents_middleware_tool_error_middleware.mdx
mcp_use_agents_observability_callbacks_manager.mdx
mcp_use_agents_observability_laminar.mdx
mcp_use_agents_observability_langfuse.mdx
mcp_use_agents_prompts_system_prompt_builder.mdx
mcp_use_agents_prompts_templates.mdx
mcp_use_agents_remote.mdx
mcp_use_client_auth_bearer.mdx
mcp_use_client_auth_oauth_callback.mdx
mcp_use_client_auth_oauth.mdx
mcp_use_client_client.mdx
mcp_use_client_code_executor.mdx
mcp_use_client_config.mdx
mcp_use_client_connectors_base.mdx
mcp_use_client_connectors_code_mode.mdx
mcp_use_client_connectors_http.mdx
mcp_use_client_connectors_sandbox.mdx
mcp_use_client_connectors_stdio.mdx
mcp_use_client_connectors_utils.mdx
mcp_use_client_connectors_websocket.mdx
mcp_use_client_exceptions.mdx
mcp_use_client_middleware_logging.mdx
mcp_use_client_middleware_metrics.mdx
mcp_use_client_middleware_middleware.mdx
mcp_use_client_prompts.mdx
mcp_use_client_session.mdx
mcp_use_client_task_managers_base.mdx
mcp_use_client_task_managers_sse.mdx
mcp_use_client_task_managers_stdio.mdx
mcp_use_client_task_managers_streamable_http.mdx
mcp_use_client_task_managers_websocket.mdx
mcp_use_client.mdx
mcp_use_errors_error_formatting.mdx
mcp_use_logging.mdx
mcp_use_server_auth_bearer.mdx
mcp_use_server_auth_dependencies.mdx
mcp_use_server_auth_middleware.mdx
mcp_use_server_auth_models.mdx
mcp_use_server_context.mdx
mcp_use_server_logging_config.mdx
mcp_use_server_logging_formatters.mdx
mcp_use_server_logging_middleware.mdx
mcp_use_server_logging_startup.mdx
mcp_use_server_logging_state.mdx
mcp_use_server_middleware_middleware.mdx
mcp_use_server_middleware_server_session.mdx
mcp_use_server_router.mdx
mcp_use_server_runner.mdx
mcp_use_server_server.mdx
mcp_use_server_templates_cli.mdx
mcp_use_server_types.mdx
mcp_use_server_utils_inspector.mdx
mcp_use_server_utils_json_schema.mdx
mcp_use_server_utils_openmcp.mdx
mcp_use_server_utils_routes.mdx
mcp_use_server_utils_utils.mdx
mcp_use_utils.mdx
changelog/
1_3_11.mdx
1_3_12.mdx
1_3_13.mdx
1_4_0.mdx
1_4_1.mdx
1_5_0.mdx
1_5_2.mdx
1_6_0.mdx
1_7_0.mdx
changelog.mdx
client/
authentication/
bearer.mdx
custom.mdx
index.mdx
oauth.mdx
client-configuration.mdx
code-mode.mdx
connection-types.mdx
direct-tool-calls.mdx
elicitation.mdx
logging.mdx
middleware.mdx
multi-server-setup.mdx
notifications.mdx
prompts.mdx
resources.mdx
roots.mdx
sampling.mdx
sandbox.mdx
tools.mdx
community/
showcase.mdx
development/
development.mdx
logging.mdx
security.mdx
telemetry.mdx
getting-started/
installation.mdx
quickstart.mdx
welcome.mdx
integration/
anthropic.mdx
google.mdx
langchain.mdx
openai.mdx
server/
auth/
bearer.mdx
compatibility.mdx
elicitation.mdx
fastapi_mount.mdx
index.mdx
inspector.mdx
logging.mdx
middleware.mdx
notifications.mdx
openmcp.mdx
prompts.mdx
resources.mdx
roots.mdx
router.mdx
running.mdx
sampling.mdx
sessions.mdx
tools.mdx
README.md
snippets/
codesandbox.jsx
contributors.jsx
gradient.jsx
simple-split-card.jsx
snippet-intro.mdx
youtube-embed.mdx
tunneling/
index.mdx
typescript/
agent/
index.mdx
llm-integration.mdx
memory-management.mdx
observability.mdx
server-manager.mdx
streaming.mdx
structured-output.mdx
api-reference/
agent/
mcp-agent.mdx
cli-reference.mdx
client/
code-mode.mdx
inspector-chat-components.mdx
mcp-client.mdx
mcp-session.mdx
react-client.mdx
overview.mdx
react/
errorboundary.mdx
image.mdx
mcpuseprovider.mdx
modelcontext.mdx
themeprovider.mdx
usecalltool.mdx
usefiles.mdx
useviewstate.mdx
usewidget.mdx
widgetcontrols.mdx
server/
auth-providers.mdx
auth.mdx
elicitation-schemas.mdx
mcp-server.mdx
middleware.mdx
prompts.mdx
resources.mdx
response-helpers.mdx
server-config.mdx
sessions.mdx
tool-context.mdx
tools.mdx
widgets.mdx
changelog/
changelog.mdx
client/
authentication.mdx
code-mode.mdx
completion.mdx
elicitation.mdx
environments.mdx
index.mdx
migration.mdx
notifications.mdx
prompts.mdx
resources.mdx
sampling.mdx
tools.mdx
usemcp.mdx
context7.json
getting-started/
installation.mdx
quickstart.mdx
welcome.mdx
mcp-apps/
mcp-apps.mdx
apps-sdk-compatibility.mdx
content-security-policy.mdx
interactivity.mdx
model-context.mdx
quickstart.mdx
widgets.mdx
server/
authentication/
index.mdx
providers/
auth0.mdx
better-auth.mdx
clerk.mdx
custom.mdx
keycloak.mdx
... 1600 moreShowing a partial view of a very large repo.
FAQ
mcp-use is a Claude Code plugin with 4 hand-picked skills for development work, indexed on Flowy. Install it with the command on its page. It includes chatgpt-app-builder, mcp-apps-builder, mcp-builder. Its skills do not fire on their own yet. Request auto-invocation to have Flowy route them as you prompt. Free and open source.
- What is mcp-use?
- The fullstack MCP framework to develop MCP Apps for ChatGPT / Claude & MCP Servers for AI Agents.
- How do I install mcp-use?
- Run these in Claude Code: /plugin marketplace add mcp-use/mcp-use. Then prompt normally.
- Does mcp-use auto-invoke its skills?
- Not yet. It is indexed on Flowy as a plain plugin. Request auto-invocation on its page and Flowy will route its skills for you as you prompt.
- Is mcp-use free?
- Yes. Flowy is free and open source, with nothing gated. You can read every skill in full before you install.