Overview

​

What the mcp-use framework provides

• Stateless request handling: each MCP request runs independently, so server state belongs in your application storage instead of an MCP session.
• Typed server primitives: tool inputs, tool outputs, and prompt arguments accept Standard Schema-compatible validators with JSON Schema conversion.
• MCP App Views: bind React Views to tools and render interactive results in Claude and ChatGPT.
• Authentication and middleware: verify callers with OAuth and apply shared behavior around HTTP requests or MCP operations.
• Inspector-first development: run, inspect, and hot-reload tools, resources, prompts, and Views locally.

​

How an MCP App fits together

1. MCPServer registers tools, resources, prompts, authentication, and middleware.
2. An AI client such as Claude or ChatGPT calls a tool.
3. The tool returns model-readable content and optional typed structuredContent.
4. When the tool has a view binding, the client renders the matching React View with the tool result.

npx create-mcp-use-app@beta inventory-app --template mcp-apps

​

Build the server foundation

import { MCPServer } from "mcp-use";
import { z } from "zod";

const server = new MCPServer({
  name: "weather-server",
  version: "1.0.0",
  description: "Look up the weather for a city",
  legacy: "stateless",
});

export const getWeather = server.tool(
  {
    name: "get-weather",
    description: "Return the current weather for a city",
    inputSchema: z.object({
      city: z.string().describe("City name, such as Paris"),
    }),
    annotations: {
      readOnlyHint: true,
      destructiveHint: false,
      openWorldHint: true,
    },
  },
  async ({ city }) => ({
    content: [
      {
        type: "text",
        text: `The weather in ${city} is sunny.`,
      },
    ],
  }),
);

export default server;

​

Choose protocol compatibility

​

Explore server capabilities

​

Develop locally

npm run dev

npm run typecheck

​

Next steps