mcp-use/mcp-use

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:
> text
> 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
text
Build an MCP server: https://mcp-use.com/prompt.md
Read the prompt →
### Start with code
bash
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
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
typescript
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
tsx
import { useCallTool, useToolContext } from "mcp-use/react";
export default function WeatherCard() {
const { status, toolOutput, toolInput } =
useToolContext ();
const refresh = useCallTool("get-weather");
if (status === "pending") {
return Checking the weather in {toolInput?.city ?? "your city"}… ;
if (status === "error") return Could not load the weather. ;
const weather = refresh.data?.structuredContent ?? toolOutput;
return (
{weather.city}
{weather.temperature}°C · {weather.conditions}
void refresh.callTool({ city: weather.city })}
{refresh.isPending ? "Refreshing…" : "Refresh"}
{refresh.error && {refresh.error.message} }