|
| 1 | +--- |
| 2 | +alwaysApply: true |
| 3 | +--- |
| 4 | +# Astro MCP Template Development Guide |
| 5 | + |
| 6 | +## Project Overview |
| 7 | + |
| 8 | +This is a **Deco MCP (Model Context Protocol) server** template with an **Astro documentation site**. It provides a full-stack development environment where: |
| 9 | +- The `/server` folder contains the MCP server (Cloudflare Workers + Deco runtime) |
| 10 | +- The `/view` folder contains the Astro documentation site (Starlight theme) |
| 11 | +- The server serves both MCP endpoints AND the built documentation assets |
| 12 | + |
| 13 | +## Project Structure |
| 14 | + |
| 15 | +``` |
| 16 | +astro-docs-view/ |
| 17 | +├── package.json # Root workspace with dev/gen/deploy scripts |
| 18 | +├── server/ # MCP Server (Cloudflare Workers + Deco) |
| 19 | +│ ├── main.ts # Main server entry point |
| 20 | +│ ├── deco.gen.ts # Generated types for integrations |
| 21 | +│ ├── wrangler.toml # Cloudflare Workers config |
| 22 | +│ └── package.json # Server dependencies |
| 23 | +└── view/ # Astro Documentation Site (Starlight theme + Tailwind CSS) |
| 24 | + ├── src/ |
| 25 | + │ ├── content/docs/ # Documentation content (MDX/Markdown) |
| 26 | + │ ├── assets/ # Static assets |
| 27 | + │ ├── styles/ # Tailwind CSS styles and theming |
| 28 | + │ └── content.config.ts # Content configuration |
| 29 | + ├── astro.config.mjs # Astro configuration with Starlight |
| 30 | + └── package.json # Frontend dependencies |
| 31 | +``` |
| 32 | + |
| 33 | +## Development Workflow |
| 34 | + |
| 35 | +### Root Commands (npm workspace) |
| 36 | +- `npm run dev` - **Primary development command** |
| 37 | + - Starts Astro dev server in watch mode |
| 38 | + - Starts MCP server on port 8787 |
| 39 | + - Server serves both API endpoints + documentation assets |
| 40 | + - Hot reload for both frontend and backend |
| 41 | + |
| 42 | +- `npm run gen` - **Type generation** |
| 43 | + - Generates TypeScript types for deco integrations |
| 44 | + - Creates `server/deco.gen.ts` with typed RPC interfaces |
| 45 | + - Run this after adding new integrations in deco.chat |
| 46 | + |
| 47 | +- `npm run gen:self` - **Self-type generation for your own tools** |
| 48 | + - Generates TypeScript types for your own server's tools and workflows |
| 49 | + - Requires the server to be running (`npm run dev`) |
| 50 | + - Copy the development URL from server logs (e.g., "https://localhost-48d64e92.deco.host") |
| 51 | + - Add /mcp to the path. So, for the URL https://localhost-48d64e92.deco.host you should set DECO_SELF_URL as https://localhost-48d64e92.deco.host/mcp. |
| 52 | + - Run: `DECO_SELF_URL=<your-dev-url> npm run gen:self` |
| 53 | + - Creates typed RPC interfaces for your own tools/workflows |
| 54 | + - Run this after adding new tools or workflows to your server |
| 55 | + |
| 56 | +- `npm run deploy` - **Production deployment** |
| 57 | + - Builds Astro site for production |
| 58 | + - Deploys to Cloudflare Workers |
| 59 | + - Makes app available at public URL |
| 60 | + |
| 61 | +### Server Architecture (`/server`) |
| 62 | + |
| 63 | +**Key Files:** |
| 64 | +- `main.ts` - Main server with tools, workflows, and asset serving |
| 65 | +- `deco.gen.ts` - Generated types for integrations (auto-generated) |
| 66 | +- `wrangler.toml` - Cloudflare Workers config with asset binding |
| 67 | + |
| 68 | +**Server Pattern:** |
| 69 | +```typescript |
| 70 | +// server/main.ts structure |
| 71 | +import { withRuntime } from "@deco/workers-runtime"; |
| 72 | + |
| 73 | +// 1. Define tools (functions the MCP can call) |
| 74 | +const createMyTool = (env: Env) => createTool({ |
| 75 | + id: "MY_TOOL", |
| 76 | + description: "Tool description", |
| 77 | + inputSchema: z.object({ /* input schema */ }), |
| 78 | + outputSchema: z.object({ /* output schema */ }), |
| 79 | + execute: async ({ context }) => { |
| 80 | + // Tool logic here |
| 81 | + return { /* result */ }; |
| 82 | + }, |
| 83 | +}); |
| 84 | + |
| 85 | +// 2. Define workflows (multi-step processes) |
| 86 | +const createMyWorkflow = (env: Env) => { |
| 87 | + const step = createStepFromTool(createMyTool(env)); |
| 88 | + return createWorkflow({ |
| 89 | + id: "MY_WORKFLOW", |
| 90 | + inputSchema: z.object({ /* input */ }), |
| 91 | + outputSchema: z.object({ /* output */ }), |
| 92 | + }).then(step).commit(); |
| 93 | +}; |
| 94 | + |
| 95 | +// 3. Setup runtime with fallback to serve documentation |
| 96 | +const { Workflow, ...runtime } = withRuntime<Env>({ |
| 97 | + workflows: [createMyWorkflow], |
| 98 | + tools: [createMyTool], |
| 99 | + fetch: fallbackToView("/"), // Serves documentation assets |
| 100 | +}); |
| 101 | + |
| 102 | +export { Workflow }; |
| 103 | +export default runtime; |
| 104 | +``` |
| 105 | + |
| 106 | +### Astro Documentation Architecture (`/view`) |
| 107 | + |
| 108 | +**Key Files:** |
| 109 | +- `astro.config.mjs` - Astro configuration with Starlight theme |
| 110 | +- `src/content/docs/` - Documentation content in MDX/Markdown |
| 111 | +- `src/assets/` - Static assets (images, etc.) |
| 112 | +- `src/styles/global.css` - Tailwind CSS configuration and theming |
| 113 | +- `src/content.config.ts` - Content configuration |
| 114 | + |
| 115 | +**Starlight Configuration:** |
| 116 | +```javascript |
| 117 | +// view/astro.config.mjs |
| 118 | +import starlight from '@astrojs/starlight'; |
| 119 | + |
| 120 | +export default defineConfig({ |
| 121 | + integrations: [ |
| 122 | + starlight({ |
| 123 | + title: 'My Documentation', |
| 124 | + social: [ |
| 125 | + { icon: 'github', label: 'GitHub', href: 'https://github.com/your-repo' } |
| 126 | + ], |
| 127 | + sidebar: [ |
| 128 | + { |
| 129 | + label: 'Guides', |
| 130 | + items: [ |
| 131 | + { label: 'Getting Started', slug: 'guides/getting-started' }, |
| 132 | + ], |
| 133 | + }, |
| 134 | + { |
| 135 | + label: 'Reference', |
| 136 | + autogenerate: { directory: 'reference' }, |
| 137 | + }, |
| 138 | + ], |
| 139 | + }), |
| 140 | + ], |
| 141 | +}); |
| 142 | +``` |
| 143 | + |
| 144 | +**Content Structure:** |
| 145 | +```mdx |
| 146 | +// view/src/content/docs/guides/getting-started.md |
| 147 | +--- |
| 148 | +title: Getting Started |
| 149 | +description: Learn how to get started with our platform |
| 150 | +--- |
| 151 | + |
| 152 | +# Getting Started |
| 153 | + |
| 154 | +Welcome to our documentation! This guide will help you get started. |
| 155 | + |
| 156 | +## Prerequisites |
| 157 | + |
| 158 | +- Node.js >=18.0.0 |
| 159 | +- Basic knowledge of TypeScript |
| 160 | + |
| 161 | +## Installation |
| 162 | + |
| 163 | +```bash |
| 164 | +npm install my-package |
| 165 | +``` |
| 166 | +``` |
| 167 | + |
| 168 | +## Development Best Practices |
| 169 | + |
| 170 | +### When Adding New Tools: |
| 171 | +1. Add tool definition in `server/main.ts` |
| 172 | +2. Include in `withRuntime` tools array |
| 173 | +3. Run `npm run gen` to update external integration types |
| 174 | +4. Start server with `npm run dev` and copy the development URL from logs |
| 175 | +5. Run `DECO_SELF_URL=<your-dev-url> npm run gen:self` to generate self-types |
| 176 | + |
| 177 | +### When Adding New Workflows: |
| 178 | +1. Create workflow in `server/main.ts` |
| 179 | +2. Include in `withRuntime` workflows array |
| 180 | +3. Run `npm run gen` to update external integration types |
| 181 | +4. Start server with `npm run dev` and copy the development URL from logs |
| 182 | +5. Run `DECO_SELF_URL=<your-dev-url> npm run gen:self` to generate self-types |
| 183 | + |
| 184 | +### When Adding New Documentation: |
| 185 | +1. Create MDX files in `view/src/content/docs/` |
| 186 | +2. Use frontmatter for metadata (title, description, etc.) |
| 187 | +3. Update sidebar configuration in `astro.config.mjs` |
| 188 | +4. Use Starlight components for enhanced documentation features |
| 189 | + |
| 190 | +### When Customizing the Theme: |
| 191 | +1. Edit `view/astro.config.mjs` for basic configuration |
| 192 | +2. Edit `view/src/styles/global.css` for Tailwind CSS theming (fonts, colors, etc.) |
| 193 | +3. Use Starlight's built-in components for consistent design |
| 194 | +4. Leverage Astro's component system for custom functionality |
| 195 | +5. Use Tailwind CSS classes directly in MDX content |
| 196 | +6. Use Starlight's CSS custom properties for theming |
| 197 | + |
| 198 | +## Environment Setup |
| 199 | + |
| 200 | +### Prerequisites: |
| 201 | +- Node.js >=18.0.0 |
| 202 | +- npm >=8.0.0 |
| 203 | +- Deno >=2.0.0 |
| 204 | +- Deco CLI installed: `deno install -Ar -g -n deco jsr:@deco/cli` |
| 205 | + |
| 206 | +### Initial Setup: |
| 207 | +1. `deco login` - Authenticate with deco.chat |
| 208 | +2. `npm install` - Install all dependencies |
| 209 | +3. `npm run configure` - Configure the app with the desired name and select its workspace |
| 210 | +4. `npm run dev` - Start development |
| 211 | + |
| 212 | +## Integration with Deco Platform |
| 213 | + |
| 214 | +### Adding External Integrations: |
| 215 | +1. Go to deco.chat dashboard |
| 216 | +2. Add integrations (APIs, databases, etc.) |
| 217 | +3. Run `npm run gen` to get typed interfaces |
| 218 | +4. Use typed clients in your tools/workflows |
| 219 | + |
| 220 | +### Deployment: |
| 221 | +- `npm run deploy` deploys to Cloudflare Workers |
| 222 | +- App becomes available at public URL |
| 223 | +- Can be used as MCP server by AI agents |
| 224 | + |
| 225 | +## Common Patterns |
| 226 | + |
| 227 | +### Error Handling: |
| 228 | +```typescript |
| 229 | +// In tools |
| 230 | +execute: async ({ context }) => { |
| 231 | + const result = await someAsyncOperation(context); |
| 232 | + if (!result.ok) { |
| 233 | + throw new Error("...") |
| 234 | + } |
| 235 | + return result; |
| 236 | +} |
| 237 | +``` |
| 238 | + |
| 239 | +### Documentation Best Practices: |
| 240 | +- Use clear, descriptive titles and descriptions |
| 241 | +- Structure content with proper headings (H1, H2, H3) |
| 242 | +- Include code examples with syntax highlighting |
| 243 | +- Use Starlight components for enhanced features |
| 244 | +- Apply Tailwind CSS classes for custom styling in MDX content |
| 245 | +- Keep documentation up-to-date with code changes |
| 246 | + |
| 247 | +### Content Organization: |
| 248 | +- Group related content in directories |
| 249 | +- Use consistent naming conventions |
| 250 | +- Leverage Starlight's auto-generated sidebar |
| 251 | +- Include search-friendly keywords in frontmatter |
| 252 | + |
| 253 | +## Debugging Tips |
| 254 | + |
| 255 | +- Server logs appear in terminal during `npm run dev` |
| 256 | +- Astro dev server runs on port 4000 by default |
| 257 | +- Use browser dev tools for frontend debugging |
| 258 | +- Check Astro and Starlight documentation for troubleshooting |
| 259 | + |
| 260 | +This template provides a complete full-stack development environment for building MCP servers with beautiful documentation sites. Focus on adding your business logic in tools and workflows while leveraging Astro, Starlight, and Tailwind CSS for professional documentation. |
0 commit comments