{"id":50666691,"url":"https://github.com/decocms/mcp-app","last_synced_at":"2026-06-08T07:04:19.389Z","repository":{"id":341936249,"uuid":"1172027180","full_name":"decocms/mcp-app","owner":"decocms","description":"Official template for creating MCP Apps on deco","archived":false,"fork":false,"pushed_at":"2026-05-05T04:35:17.000Z","size":211,"stargazers_count":2,"open_issues_count":1,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-05-05T06:28:36.387Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/decocms.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":"AGENTS.md","dco":null,"cla":null}},"created_at":"2026-03-03T21:44:50.000Z","updated_at":"2026-05-05T04:35:20.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/decocms/mcp-app","commit_stats":null,"previous_names":["decocms/mcp-app"],"tags_count":0,"template":true,"template_full_name":null,"purl":"pkg:github/decocms/mcp-app","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/decocms%2Fmcp-app","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/decocms%2Fmcp-app/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/decocms%2Fmcp-app/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/decocms%2Fmcp-app/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/decocms","download_url":"https://codeload.github.com/decocms/mcp-app/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/decocms%2Fmcp-app/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34051773,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-08T02:00:07.615Z","response_time":111,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2026-06-08T07:04:02.351Z","updated_at":"2026-06-08T07:04:19.384Z","avatar_url":"https://github.com/decocms.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# MCP App Template\n\nOfficial starter for building MCP Apps on deco — interactive UIs powered by the Model Context Protocol.\n\n## Quick Start\n\n```bash\n# Clone the template\ngit clone https://github.com/decocms/mcp-app.git my-mcp-app\ncd my-mcp-app\n\n# Install dependencies\nbun install\n\n# Start development\nbun run dev\n```\n\n## Project Structure\n\n```\n├── api/                        # MCP server (platform-agnostic)\n│   ├── app.ts                  # App core — tools, resources, middleware\n│   ├── main.bun.ts             # Bun entrypoint (local dev)\n│   ├── tools/\n│   │   ├── index.ts            # Tool registry\n│   │   └── hello.ts            # Example tool (hello_world)\n│   ├── resources/\n│   │   └── hello.ts            # MCP App resource (serves HTML)\n│   └── types/\n│       └── env.ts              # StateSchema + Env type\n├── web/                        # React UI (MCP App)\n│   ├── tools/                  # One folder per tool UI (folder-based routing)\n│   │   └── hello/              # hello_world tool UI\n│   │       ├── main.tsx        # React entry point\n│   │       ├── bridge.ts       # MCP App SDK integration\n│   │       ├── context.tsx     # React context for MCP state\n│   │       ├── router.tsx      # TanStack Router with UI\n│   │       └── types.ts        # UI state types\n│   ├── entry.tsx               # Build entry (imports @tool/main.tsx)\n│   ├── components/ui/          # shadcn/ui components\n│   ├── lib/utils.ts            # cn() helper\n│   └── globals.css             # Tailwind base styles\n├── index.html                  # Single Vite entry (shared by all tools)\n├── package.json\n├── tsconfig.json\n├── biome.json\n├── vite.config.ts\n├── components.json             # shadcn/ui config\n├── app.json                    # Deco mesh config\n└── .mcp.json                   # Local MCP server config\n```\n\n## Development\n\n```bash\n# Run API server + web build concurrently\nbun run dev\n\n# API server only (port 3001)\nbun run dev:api\n\n# Web build only (watch mode)\nbun run dev:web\n```\n\n### Adding a New Tool with UI\n\nEach tool UI lives in `web/tools/\u003cname\u003e/`. The `TOOL` env var tells Vite which folder to build — one build per tool, output as `dist/client/\u003cname\u003e.html`.\n\n1. **Create the tool** — `api/tools/my-tool.ts` using `createTool`\n2. **Register it** — add to the `tools` array in `api/tools/index.ts`\n3. **Create the UI** — `web/tools/my-tool/` with `main.tsx`, `bridge.ts`, `context.tsx`, `router.tsx`, `types.ts`\n4. **Create the resource** — `api/resources/my-tool.ts` serving `dist/client/my-tool.html`\n5. **Update build scripts**:\n   ```json\n   \"build:web\": \"TOOL=hello vite build \u0026\u0026 TOOL=my-tool vite build\",\n   \"dev:web\": \"concurrently \\\"TOOL=hello vite build --watch\\\" \\\"TOOL=my-tool vite build --watch\\\"\"\n   ```\n\n### How the Tool Router Works\n\n```\nTOOL=hello vite build\n  → resolves @tool/* → web/tools/hello/*\n  → index.html imports web/entry.tsx imports @tool/main.tsx\n  → outputs dist/client/hello.html (single-file bundle)\n```\n\n## Tech Stack\n\n- **Runtime**: [Bun](https://bun.sh) (default), deployable to any Web Standard runtime\n- **Server**: [@decocms/runtime](https://github.com/decocms/runtime) MCP server\n- **UI**: React 19 + [TanStack Router](https://tanstack.com/router) (hash-based) + [TanStack Query](https://tanstack.com/query)\n- **Styling**: [Tailwind CSS](https://tailwindcss.com) v4 + [shadcn/ui](https://ui.shadcn.com)\n- **MCP Apps**: [@modelcontextprotocol/ext-apps](https://www.npmjs.com/package/@modelcontextprotocol/ext-apps) SDK\n- **Build**: [Vite](https://vitejs.dev) + [vite-plugin-singlefile](https://github.com/nickreese/vite-plugin-singlefile)\n- **Linting**: [Biome](https://biomejs.dev)\n\n## How It Works\n\n1. The **app core** (`api/app.ts`) defines tools, resources, and middleware as a platform-agnostic `fetch` handler\n2. A **platform entrypoint** (`api/main.bun.ts`) starts the server using the platform's API\n3. **Tools** perform actions and can link to a UI via `_meta.ui.resourceUri`\n4. **Resources** serve single-file HTML bundles with `mimeType: \"text/html;profile=mcp-app\"`\n5. The **MCP App UI** connects to the host via `@modelcontextprotocol/ext-apps`, receives tool input/results, and renders an interactive display\n6. Vite builds each tool UI into a self-contained HTML file (CSS + JS inlined) using the `TOOL` env var to select which `web/tools/\u003cname\u003e/` folder to bundle\n\n## Deployment\n\n### Multi-Platform\n\nThe app uses a factory pattern that separates business logic (`api/app.ts`) from platform wiring. To deploy to a new platform, add a thin entrypoint file — see the [`add-deploy-target` skill](.claude/skills/add-deploy-target/SKILL.md) for step-by-step instructions.\n\nSupported targets out of the box:\n- **Bun** — `api/main.bun.ts` (default, used for local dev)\n\nEasy to add:\n- **Cloudflare Workers** — ~5 lines + `wrangler.toml`\n- **Deno** — ~5 lines\n- **Node.js** — ~5 lines + `@hono/node-server`\n- **AWS Lambda** — ~5 lines + `hono/aws-lambda`\n\n### Publish to deco\n\n1. Update `app.json` with your app's name, description, and connection URL\n2. Push to your repository — CI will validate the build\n3. Follow deco mesh publishing instructions to deploy\n\n## CI\n\nGitHub Actions runs on every push and pull request:\n\n- `bun run ci:check` — Biome lint + format check\n- `bun run check` — TypeScript type checking\n- `bun test` — Unit tests\n- `bun run build` — Production build\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdecocms%2Fmcp-app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdecocms%2Fmcp-app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdecocms%2Fmcp-app/lists"}