mcp-use__mcp-use/docs/home/index.mdx

---
title: "Welcome"
icon: "/images/mcp_use.svg"
mode: "frame"
---

import { SimpleSplitCard } from "/snippets/simple-split-card.jsx";

<Visibility for="agents">
  For the complete documentation index, see
  [llms.txt](https://mcp-use.com/docs/llms.txt).
</Visibility>

<div className="px-4 py-8 mt-24 lg:pb-24 max-w-5xl mx-auto">

<div className="text-center">
  <img
    noZoom
    src="/logo/light.svg"
    className="block dark:hidden mx-auto h-16 w-auto"
    alt="mcp_use"
  />
  <img
    noZoom
    src="/logo/dark.svg"
    className="hidden dark:block mx-auto h-16 w-auto"
    alt="mcp_use"
  />
</div>

<p className="max-w-2xl mx-auto px-4 mt-6 text-center">
  <p className="text-xl">The fullstack MCP framework</p>
  <p className="mt-3">
    Build <b>MCP Apps</b> for ChatGPT / Claude and <b>MCP Servers</b> for AI
    Agents - in <b>TypeScript</b> and <b>Python</b>.
  </p>
</p>

<div className="mt-10 grid sm:grid-cols-3 gap-4 max-w-2xl mx-auto text-center text-sm">
  <div>
    <b>Build</b>
    <br />
    <span className="text-zinc-500">with the mcp-use SDK</span>
  </div>
  <div>
    <b>Preview</b>
    <br />
    <span className="text-zinc-500">with the MCP Inspector</span>
  </div>
  <div>
    <b>Deploy</b>
    <br />
    <span className="text-zinc-500">to production in one command</span>
  </div>
</div>

<div className="px-6 lg:px-0 mt-14 grid sm:grid-cols-2 gap-x-6 gap-y-6">
  <SimpleSplitCard
    imgDark="https://cdn.mcp-use.com/docs/server.jpg"
    imgLight="https://cdn.mcp-use.com/docs/server_white.png"
    title="Build an MCP Server"
    description="Expose tools, resources, and prompts to any AI agent."
    leftHref="/typescript/server"
    rightHref="/python/server/index"
    leftLogo="https://cdn.mcp-use.com/docs/typescriptlogo.svg"
    rightLogo="https://cdn.mcp-use.com/docs/pythonlogo.svg"
  />
  <SimpleSplitCard
    imgDark="https://cdn.mcp-use.com/docs/agent.jpg"
    imgLight="https://cdn.mcp-use.com/docs/agent_white.png"
    title="Build an MCP App"
    description="Interactive widgets that run in Claude, ChatGPT, and any MCP client."
    leftHref="/typescript/mcp-apps"
    rightHref="/python/server/index"
    leftLogo="https://cdn.mcp-use.com/docs/typescriptlogo.svg"
    rightLogo="https://cdn.mcp-use.com/docs/pythonlogo.svg"
  />
</div>

</div>

<div className="max-w-5xl mx-auto px-6">

## Quickstart

<Tabs>
  <Tab title="TypeScript">
```bash
npx create-mcp-use-app@latest
```

Or create a server manually:

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

const server = new MCPServer({
  name: "my-server",
  version: "1.0.0",
});

server.tool(
  {
    name: "get_weather",
    description: "Get weather for a city",
    inputSchema: z.object({ city: z.string() }),
    outputSchema: z.object({
      temperature: z.number(),
      conditions: z.string(),
      city: z.string(),
    }),
  },
  async ({ city }) => {
    const weather = { temperature: 72, conditions: "Sunny", city };
    return {
      content: [{ type: "text", text: JSON.stringify(weather) }],
      structuredContent: weather,
    };
  },
);

export default server;
```

<Card title="Full TypeScript Server Documentation" icon="arrow-right" href="/typescript/server" horizontal />
  </Tab>
  <Tab title="Python">
```bash
pip install mcp-use
```

```python
from typing import Annotated
from mcp.types import ToolAnnotations
from pydantic import Field
from mcp_use import MCPServer

server = MCPServer(name="Weather Server", version="1.0.0")

@server.tool(
    name="get_weather",
    description="Get current weather information for a location",
    annotations=ToolAnnotations(readOnlyHint=True, openWorldHint=True),
)
async def get_weather(
    city: Annotated[str, Field(description="City name")],
) -> str:
    return f"Temperature: 72°F, Condition: sunny, City: {city}"

server.run(transport="streamable-http", port=8000)
# Inspector at http://localhost:8000/inspector
```

<Card title="Full Python Server Documentation" icon="arrow-right" href="/python/server/index" horizontal />
  </Tab>
</Tabs>

## MCP Apps

MCP Apps let you build interactive views that work across Claude, ChatGPT, and other MCP clients—write once, run everywhere.

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

const server = new MCPServer({ name: "weather-app", version: "1.0.0" });

server.tool(
  {
    name: "get-weather",
    description: "Get weather for a city",
    inputSchema: z.object({ city: z.string() }),
    outputSchema: z.object({
      city: z.string(),
      temperature: z.number(),
      conditions: z.string(),
    }),
    view: { name: "weather-display" }, // views/weather-display/view.tsx
  },
  async ({ city }) => {
    const weather = { city, temperature: 22, conditions: "Sunny" };
    return {
      content: [{ type: "text", text: `Weather in ${city}: Sunny, 22°C` }],
      structuredContent: weather,
    };
  },
);

export default server;
```

Views in `views/` are auto-discovered and receive typed tool results through `useToolContext()`.

<CardGroup cols={2}>
  <Card
    title="MCP Apps Guide"
    icon="app-window-mac"
    href="/typescript/mcp-apps"
  >
    Build views with React, auto-discovery, and client-side hooks.
  </Card>
  <Card
    title="Apps SDK compatibility"
    icon="message-square"
    href="/typescript/mcp-apps/apps-sdk-compatibility"
  >
    Understand how MCP Apps run in ChatGPT.
  </Card>
</CardGroup>

## Templates

Ready-to-use MCP Apps and Servers you can deploy in one click or remix as your own.

<CardGroup cols={3}>
  <Card
    title="Chart Builder"
    icon="chart-column"
    href="https://github.com/mcp-use/mcp-chart-builder"
  >
    Natural-language chart generation.
  </Card>
  <Card
    title="Diagram Builder"
    icon="sitemap"
    href="https://github.com/mcp-use/mcp-diagram-builder"
  >
    Conversational diagramming.
  </Card>
  <Card
    title="Widget Gallery"
    icon="grid"
    href="https://github.com/mcp-use/mcp-widget-gallery"
  >
    Reference patterns for every widget type.
  </Card>
</CardGroup>

<Card
  title="Browse all templates"
  icon="layout-template"
  href="/home/templates"
  horizontal
>
  Full gallery with demo URLs and one-click deploy buttons.
</Card>

## Inspector

Test and debug your MCP servers interactively. The Inspector is **auto-included** in every server:

```typescript
server.listen(3000);
// Inspector at http://localhost:3000/mcp/inspector
```

Or use the hosted inspector at [inspector.mcp-use.com](https://inspector.mcp-use.com), or standalone:

```bash
npx @mcp-use/inspector --url http://localhost:3000/mcp
```

<Card
  title="Inspector Documentation"
  icon="bug-play"
  href="/inspector/index"
  horizontal
/>

## Deploy

Ship to production in one command:

```bash
npx @mcp-use/cli login
npx @mcp-use/cli deploy
```

Or connect a GitHub repo on [manufact.com](https://manufact.com) - production-ready with observability, metrics, logs, and branch deployments.

## Also: MCP Agent & MCP Client

mcp-use is fullstack. Alongside MCP Servers and MCP Apps, it ships a full **MCP Agent** and **MCP Client** implementation.

<AccordionGroup>
  <Accordion title="MCP Agent  -  Build AI agents that use MCP servers" icon="brain">
    Connect any LLM (OpenAI, Anthropic, Google, LangChain) to any MCP server.

    ```python
    from langchain_openai import ChatOpenAI
    from mcp_use import MCPAgent, MCPClient

    client = MCPClient.from_dict({ "mcpServers": { "fs": { "command": "npx", "args": ["-y", "@modelcontextprotocol/server-filesystem", "/tmp"] } } })
    agent = MCPAgent(llm=ChatOpenAI(model="gpt-5.5"), client=client)
    result = await agent.run("List all files in the directory")
    ```

    <CardGroup cols={2}>
      <Card title="Python Agent" icon="/images/pythonlogo.svg" href="/python/agent/agent-configuration" />
      <Card title="TypeScript Agent" icon="/images/typescriptlogo.svg" href="/typescript/agent/index" />
    </CardGroup>

  </Accordion>

  <Accordion title="MCP Client  -  Connect to any MCP server programmatically" icon="router">
    Fully spec-compliant: tools, resources, prompts, sampling, elicitation, logging, notifications.

    ```typescript
    import { MCPClient } from "@mcp-use/client";
    const client = new MCPClient({ mcpServers: { calculator: { command: "npx", args: ["-y", "@modelcontextprotocol/server-everything"] } } });
    await client.createAllSessions();
    const result = await client.getSession("calculator").callTool("add", { a: 5, b: 3 });
    ```

    <CardGroup cols={2}>
      <Card title="Python Client" icon="/images/pythonlogo.svg" href="/python/client/client-configuration" />
      <Card title="TypeScript Client" icon="/images/typescriptlogo.svg" href="/typescript/client/index" />
    </CardGroup>

  </Accordion>
</AccordionGroup>

## Learn More

<CardGroup cols={2}>
  <Card title="MCP 101" icon="brain" href="/home/mcp101">
    Principles of MCP: hosts, clients, servers, and the three primitives.
  </Card>
  <Card
    title="Examples on GitHub"
    icon="github"
    href="https://github.com/mcp-use/mcp-use/tree/main/examples"
  >
    Runnable samples for Python and TypeScript.
  </Card>
  <Card
    title="Join the Discord"
    icon="discord"
    href="https://discord.gg/XkNkSkMz3V"
  >
    Chat with the community and the team.
  </Card>
  <Card
    title="Report an Issue"
    icon="github"
    href="https://github.com/mcp-use/mcp-use/issues"
  >
    Bugs, feature requests, and questions.
  </Card>
</CardGroup>

</div>

{/* preview rebuild trigger */}