> ## Documentation Index
> Fetch the complete documentation index at: https://docs.mcp-use.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Welcome

> Build MCP servers, apps, clients, and agents with mcp-use for TypeScript.

For the complete documentation index, see
[llms.txt](https://mcp-use.com/docs/llms.txt).

**mcp-use** is the full-stack MCP framework for TypeScript. Build MCP servers,
MCP Apps that render interactive Views in ChatGPT and Claude, MCP clients, and
tool-calling agents with end-to-end type safety.

## Get started

Scaffold an mcp-use app with the release of `create-mcp-use-app`:

```bash theme={null}
npx create-mcp-use-app@beta my-mcp-app
```

### Build a server and View

<CodeGroup>
  ```typescript index.ts theme={null}
  import { MCPServer } from "mcp-use";
  import { z } from "zod";

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

  export const greet = server.tool(
    {
      name: "greet",
      description: "Greet someone by name",
      inputSchema: z.object({
        name: z.string().describe("Name of the person to greet"),
      }),
      outputSchema: z.object({
        greeting: z.string(),
      }),
      view: { name: "greeting" },
    },
    async ({ name }) => {
      const data = { greeting: `Hello, ${name}!` };

      return {
        content: [{ type: "text", text: data.greeting }],
        structuredContent: data,
      };
    },
  );

  export default server;
  ```

  ```tsx views/greeting/view.tsx theme={null}
  import { useToolContext } from "mcp-use/react";

  export default function Greeting() {
    const view = useToolContext<"greet">();

    if (view.status === "pending") return <p>Loading…</p>;
    if (view.status === "error") return <p>{view.error.message}</p>;

    return <h1>👋 {view.toolOutput.greeting}</h1>;
  }
  ```
</CodeGroup>

The default server export lets `mcp-use dev`, `mcp-use build`, and
`mcp-use start` manage the server lifecycle. The View directory name must match
the tool's `view.name`.

<Callout color="#bccad1" icon={<svg xmlns="http://www.w3.org/2000/svg" className='min-w-[20px] mt-0 flex-shrink-0' viewBox="0 0 128 128"><linearGradient id="python-original-a" gradientUnits="userSpaceOnUse" x1="70.252" y1="1237.476" x2="170.659" y2="1151.089" gradientTransform="matrix(.563 0 0 -.568 -29.215 707.817)"><stop offset="0" stop-color="#5A9FD4"/><stop offset="1" stop-color="#306998"/></linearGradient><linearGradient id="python-original-b" gradientUnits="userSpaceOnUse" x1="209.474" y1="1098.811" x2="173.62" y2="1149.537" gradientTransform="matrix(.563 0 0 -.568 -29.215 707.817)"><stop offset="0" stop-color="#FFD43B"/><stop offset="1" stop-color="#FFE873"/></linearGradient><path fill="url(https://mintlify.s3.us-west-1.amazonaws.com/mcpuse/v2/typescript/getting-started#python-original-a)" d="M63.391 1.988c-4.222.02-8.252.379-11.8 1.007-10.45 1.846-12.346 5.71-12.346 12.837v9.411h24.693v3.137H29.977c-7.176 0-13.46 4.313-15.426 12.521-2.268 9.405-2.368 15.275 0 25.096 1.755 7.311 5.947 12.519 13.124 12.519h8.491V67.234c0-8.151 7.051-15.34 15.426-15.34h24.665c6.866 0 12.346-5.654 12.346-12.548V15.833c0-6.693-5.646-11.72-12.346-12.837-4.244-.706-8.645-1.027-12.866-1.008zM50.037 9.557c2.55 0 4.634 2.117 4.634 4.721 0 2.593-2.083 4.69-4.634 4.69-2.56 0-4.633-2.097-4.633-4.69-.001-2.604 2.073-4.721 4.633-4.721z" transform="translate(0 10.26)"/><path fill="url(https://mintlify.s3.us-west-1.amazonaws.com/mcpuse/v2/typescript/getting-started#python-original-b)" d="M91.682 28.38v10.966c0 8.5-7.208 15.655-15.426 15.655H51.591c-6.756 0-12.346 5.783-12.346 12.549v23.515c0 6.691 5.818 10.628 12.346 12.547 7.816 2.297 15.312 2.713 24.665 0 6.216-1.801 12.346-5.423 12.346-12.547v-9.412H63.938v-3.138h37.012c7.176 0 9.852-5.005 12.348-12.519 2.578-7.735 2.467-15.174 0-25.096-1.774-7.145-5.161-12.521-12.348-12.521h-9.268zM77.809 87.927c2.561 0 4.634 2.097 4.634 4.692 0 2.602-2.074 4.719-4.634 4.719-2.55 0-4.633-2.117-4.633-4.719 0-2.595 2.083-4.692 4.633-4.692z" transform="translate(0 10.26)"/><radialGradient id="python-original-c" cx="1825.678" cy="444.45" r="26.743" gradientTransform="matrix(0 -.24 -1.055 0 532.979 557.576)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#B8B8B8" stop-opacity=".498"/><stop offset="1" stop-color="#7F7F7F" stop-opacity="0"/></radialGradient><path opacity=".444" fill="url(https://mintlify.s3.us-west-1.amazonaws.com/mcpuse/v2/typescript/getting-started#python-original-c)" d="M97.309 119.597c0 3.543-14.816 6.416-33.091 6.416-18.276 0-33.092-2.873-33.092-6.416 0-3.544 14.815-6.417 33.092-6.417 18.275 0 33.091 2.872 33.091 6.417z"/></svg>}>
  Looking for the **Python** docs? Start with the [Python quickstart](/python/getting-started/quickstart).
</Callout>

<Card title="New to MCP?" icon="brain" href="/home/mcp101">
  Learn how MCP clients, servers, agents, tools, resources, and prompts fit
  together.
</Card>

## Choose your next step

<CardGroup cols={2}>
  <Card title="Build your first project" icon="rocket" href="/v2/typescript/getting-started/quickstart">
    Scaffold an MCP App, run it locally, and test its View.
  </Card>

  <Card title="MCP Server" icon="server" href="/v2/typescript/server">
    Define tools, resources, prompts, authentication, and deployment.
  </Card>

  <Card title="MCP Apps" icon="app-window-mac" href="/v2/typescript/mcp-apps">
    Build interactive Views for ChatGPT, Claude, and other MCP hosts.
  </Card>

  <Card title="MCP Client" icon="router" href="/v2/typescript/client/index">
    Connect to MCP servers programmatically.
  </Card>

  <Card title="MCP Agent" icon="brain" href="/v2/typescript/agent/index">
    Build agents that call tools through MCP connections.
  </Card>
</CardGroup>

<Tip>
  **Need help?** Join our [Discord](https://discord.gg/XkNkSkMz3V) or visit
  [GitHub](https://github.com/mcp-use/mcp-use).
</Tip>
