---
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/index"
    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/server/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, text } from "mcp-use/server";
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",
  schema: z.object({ city: z.string() }),
}, async ({ city }) => {
  return text(`Temperature: 72°F, Condition: sunny, City: ${city}`);
});

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

<Card title="Full TypeScript Server Documentation" icon="arrow-right" href="/typescript/server/index" 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 widgets that work across Claude, ChatGPT, and other MCP clients  -  write once, run everywhere.

```typescript
import { MCPServer, widget } from "mcp-use/server";
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",
  schema: z.object({ city: z.string() }),
  widget: "weather-display", // references resources/weather-display/widget.tsx
}, async ({ city }) => {
  return widget({
    props: { city, temperature: 22, conditions: "Sunny" },
    message: `Weather in ${city}: Sunny, 22°C`,
  });
});

await server.listen(3000);
```

Widgets in `resources/` are **auto-discovered**  -  no manual registration needed.

<CardGroup cols={2}>
  <Card title="MCP Apps Guide" icon="app-window-mac" href="/typescript/server/mcp-apps">
    Build widgets with React, auto-discovery, and client-side hooks.
  </Card>
  <Card title="ChatGPT Apps Flow" icon="message-square" href="/guides/chatgpt-apps-flow">
    Step-by-step: ship an MCP App to 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/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";
    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>
