Skip to content

Commit f2f9034

Browse files
chore: create /docs dir with a Deco mcp + astro project (#867)
* init docs from mcp template * config on CI * ignore docs server lint * ignore docs on check to skip typegen big file * remove .vscode
1 parent 2bdc3fa commit f2f9034

24 files changed

Lines changed: 6952 additions & 1 deletion

.github/workflows/deploy-docs.yaml

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
name: Deploy Docs
2+
3+
on:
4+
push:
5+
branches:
6+
- main
7+
paths:
8+
- "docs/**"
9+
10+
jobs:
11+
deploy:
12+
runs-on: ubuntu-latest
13+
14+
steps:
15+
- name: Checkout repository
16+
uses: actions/checkout@v4
17+
18+
- name: Set up Bun
19+
uses: oven-sh/setup-bun@v2
20+
21+
- name: Install dependencies
22+
run: bun install
23+
24+
- name: Deploy
25+
run: bun run docs:deploy
26+
env:
27+
DECO_DEPLOY_TOKEN: ${{ secrets.DECO_DEPLOY_TOKEN }}

docs/.cursor/rules/main.mdc

Lines changed: 260 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,260 @@
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.

docs/.gitignore

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
2+
# Environment files
3+
.env
4+
.dev.vars
5+
6+
# Build files
7+
view-build/
8+
9+
# Node modules
10+
node_modules
11+
12+
node_modules/
13+
14+
.DS_Store
15+
dist
16+
dist-ssr
17+
*.local
18+
count.txt
19+
.env
20+
.nitro
21+
.tanstack

docs/.npmrc

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
@jsr:registry=https://npm.jsr.io

0 commit comments

Comments
 (0)