Interactive tutorials and hands-on labs to build production-ready applications on Cloudflare's developer platform.

Cloudflare Workers

• Build serverless applications at the edge
• Create HTTP APIs with routing
• Integrate with KV storage and D1 databases
• Add AI-powered features with Workers AI

Model Context Protocol (MCP)

• Build intelligent AI assistants
• Connect to external systems and APIs
• Create custom AI tools and workflows
• Deploy MCP servers globally

• Node.js v18+ - Download here
• Cloudflare Account - Sign up free
• Wrangler CLI - Install with npm install -g wrangler

# Clone the repository
git clone https://github.com/lauragift21/developer-labs.git
cd developer-labs

# Install dependencies
npm install

# Start development server
npm run dev

Visit http://localhost:4321 to see the site locally.

# Login to Cloudflare (first time only)
wrangler login

# Deploy to production
npm run deploy

developer-labs/
├── public/                    # Static assets
│   ├── assets/
│   │   ├── css/              # Stylesheets
│   │   ├── js/               # JavaScript files
│   │   └── og-image.png      # Social media image
│   └── favicon.svg           # Site favicon
├── src/
│   ├── components/           # Reusable Astro components
│   │   ├── Alert.astro
│   │   ├── Callout.astro
│   │   └── CodeBlock.astro
│   ├── content/              # Markdown content
│   │   ├── mcp-steps/        # MCP tutorial steps
│   │   └── workers-steps/    # Workers tutorial steps
│   ├── layouts/
│   │   └── Layout.astro      # Main layout template
│   └── pages/                # Site pages
│       ├── labs/
│       │   ├── index.astro   # Labs overview
│       │   ├── mcp/          # MCP tutorial
│       │   └── workers/      # Workers tutorial
│       └── index.astro       # Homepage (redirects to /labs)
├── astro.config.mjs          # Astro configuration
├── wrangler.jsonc            # Cloudflare Workers config
└── package.json

• Interactive Tutorials: Step-by-step labs with hands-on coding
• Progressive Learning: From basics to advanced concepts
• Real Deployments: Every lab results in a working application
• Modern Stack: Built with Astro, deployed on Cloudflare Workers
• Responsive Design: Works perfectly on desktop and mobile
• SEO Optimized: Complete meta tags and structured data

1. Hello World - Your first Worker
2. HTTP APIs - Building REST endpoints
3. KV Storage - Persistent data storage
4. D1 Database - SQL database integration
5. Workers AI - AI-powered applications
6. Advanced Routing - Complex request handling
7. Production Deploy - Going live globally

1. MCP Basics - Understanding the protocol
2. First Server - Building your first MCP server
3. Custom Tools - Creating AI assistant tools
4. External APIs - Connecting to third-party services
5. Persistent State - Using KV for data storage
6. Advanced Features - Complex workflows and patterns

We welcome contributions! Here's how to get started:

1. Fork the repository
2. Create a feature branch: git checkout -b feature/amazing-feature
3. Make your changes and test thoroughly
4. Commit your changes: git commit -m 'Add amazing feature'
5. Push to the branch: git push origin feature/amazing-feature
6. Open a Pull Request

To add a new lab step:

1. Create a new markdown file in src/content/workers-steps/ or src/content/mcp-steps/
2. Follow the existing frontmatter format:

   ---
   stepNumber: 8
   title: "Your Lab Title"
   description: "Brief description of what students will learn"
   duration: "15 min"
   learningObjectives:
     - "Objective 1"
     - "Objective 2"
   ---

3. Write your tutorial content in markdown
4. Test locally with npm run dev

• Cloudflare Workers Docs
• MCP Documentation
• Astro Documentation
• Community Discord

This project is licensed under the MIT License - see the LICENSE file for details.

• Built by the Cloudflare Developer Relations team
• Powered by Astro and Cloudflare Workers
• Community feedback and contributions

Ready to start building? Visit developer-labs.examples.workers.dev and choose your first lab!