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