# MCP App UI Quickstart

This repo contains the MCP Apps quickstart server copied from the official
[`modelcontextprotocol/ext-apps`](https://github.com/modelcontextprotocol/ext-apps)
repository.

## Run

```bash
pnpm install
pnpm build
pnpm start
```

The server exposes a basic MCP App UI resource and tool following the
[MCP Apps quickstart](https://github.com/modelcontextprotocol/ext-apps/blob/main/docs/quickstart.md).
Use the mcp-app-ui MCP server to get the current server time.

## Configure and Use in Claude Desktop

Add the MCP Server.  I used claude_desktop_config.json:
![MCP App UI](./claude_desktop_config.json.png)

```json
  "mcpServers": {
    "mcp-app-ui": {
      "command": "pnpm",
      "args": [
        "--dir",
        "/Users/brian/_code/github/brianpmccullough/mcp-app-ui",
        "exec",
        "tsx",
        "main.ts",
        "--stdio"
      ]
    }
  },
```

Restart Claude Desktop and ask to use the MCP:

![MCP App UI](./image.png)

## Upstream

- Original example: [`examples/quickstart`](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/quickstart)
- Quickstart docs: [`docs/quickstart.md`](https://github.com/modelcontextprotocol/ext-apps/blob/main/docs/quickstart.md)