Website Builder

Website Builder Plugin

AI-powered website builder for creating modern websites with Astro, MDX, AI content generation, Supabase CMS, and component integration.

Overview

The website-builder plugin provides comprehensive support for building production-ready websites using:

• Astro 4.x - Modern static site generator with Islands architecture
• AI Content Generation - Google Imagen 3/4, Veo 2/3, Claude Sonnet 4, Gemini 2.0
• Supabase CMS - Headless CMS with PostgreSQL and real-time updates
• Component Integration - React, MDX, shadcn/ui, Tailwind CSS
• SEO Optimization - Meta tags, sitemaps, structured data
• Deployment - Optimized Vercel deployment

Features

10 Slash Commands

1. /website-builder:init - Initialize new Astro website with AI features
2. /website-builder:add-page - Add static page with MDX and AI content
3. /website-builder:add-blog - Add blog with content collections and RSS
4. /website-builder:add-component - Add React components from shadcn/Tailwind UI
5. /website-builder:integrate-supabase-cms - Setup Supabase CMS backend
6. /website-builder:integrate-content-generation - Setup AI content/image generation
7. /website-builder:generate-content - Generate AI marketing copy and blog posts
8. /website-builder:generate-images - Generate AI images with Google Imagen
9. /website-builder:optimize-seo - Add comprehensive SEO configuration
10. /website-builder:deploy - Deploy to Vercel with optimization

5 Specialized Agents

1. website-setup - Initialize and configure Astro projects
2. website-architect - Design schemas, SEO, and architecture
3. website-content - Create pages, blog posts, and MDX components
4. website-ai-generator - Generate AI content and images
5. website-verifier - Validate SEO, accessibility, and deployment readiness

5 Comprehensive Skills

1. astro-patterns - Astro best practices and routing patterns
2. content-collections - Content collections setup and management
3. component-integration - React, MDX, and Tailwind integration
4. supabase-cms - Supabase CMS integration and RLS policies
5. ai-content-generation - AI-powered content and image generation

Quick Start

1. Initialize a New Website

/website-builder:init my-website

This creates:

• Astro project with TypeScript
• React and MDX integration
• Tailwind CSS styling
• Content collections setup
• MCP server configuration

2. Add AI Content Generation

/website-builder:integrate-content-generation

Configures:

• content-image-generation MCP server
• Google Cloud credentials
• Anthropic API key
• Image/video output directory

3. Generate Content

/website-builder:generate-content hero

Generates:

• Marketing copy with Claude Sonnet 4 or Gemini 2.0
• Hero sections, blog posts, product descriptions
• Customizable tone, style, and length

4. Generate Images

/website-builder:generate-images hero

Generates:

• Images with Google Imagen 3/4
• Multiple aspect ratios (1:1, 16:9, 4:3, 9:16)
• SD or HD quality
• Batch generation support

5. Add Supabase CMS

/website-builder:integrate-supabase-cms

Sets up:

• Content tables (pages, posts, media)
• RLS policies for security
• Draft/publish workflows
• Real-time updates

6. Deploy to Vercel

/website-builder:deploy

Deploys with:

• Optimized build configuration
• Environment variables
• SEO meta tags
• Sitemap and robots.txt

MCP Server Setup

Content & Image Generation

The plugin uses the content-image-generation MCP server for AI features.

Configuration:

1. Copy .mcp.json.example to your project root as .mcp.json
2. Set environment variables:

GOOGLE_CLOUD_PROJECT=your-google-cloud-project-id
ANTHROPIC_API_KEY=sk-ant-...
GOOGLE_AI_API_KEY=... # Optional, for Gemini

1. Available MCP tools: - generate_image_imagen3 - Generate single image
   • batch_generate_images - Generate multiple images
   • generate_video_veo3 - Generate videos
   • generate_marketing_content - Generate text content
   • calculate_cost_estimate - Estimate campaign costs

Architecture

Static vs Dynamic

Astro supports multiple rendering modes:

• Static (SSG): Pre-built at build time, fast but requires rebuild
• Server-rendered (SSR): Rendered on request, dynamic data
• Hybrid: Mix static and server-rendered pages
• Islands: Static with interactive React components

Recommendation: Start with static (default), add SSR for dynamic features.

Content Management

Two options:

1. Content Collections (File-based)

   • Git-versioned markdown/MDX files
   • Type-safe with Zod schemas
   • Fast builds, simple deployment

2. Supabase CMS (Database-based)

   • Real-time updates
   • Multi-author workflows
   • Draft/publish states
   • Content versioning

Recommendation: Content collections for blogs, Supabase for complex CMS needs.

Cost Estimation

AI generation costs (approximate):

• Images: $0.020-0.050 per image (SD vs HD)
• Videos: $0.15-0.20 per video
• Content: $0.0005-0.003 per request (Gemini vs Claude)

Use /website-builder:generate-content with cost estimation before generating.

Examples

Create a Marketing Landing Page

# 1. Initialize project
/website-builder:init landing-page

# 2. Setup AI generation
/website-builder:integrate-content-generation

# 3. Generate hero content
/website-builder:generate-content hero

# 4. Generate hero image
/website-builder:generate-images hero

# 5. Add components
/website-builder:add-component button
/website-builder:add-component card

# 6. Optimize SEO
/website-builder:optimize-seo

# 7. Deploy
/website-builder:deploy

Create a Blog with CMS

# 1. Initialize project
/website-builder:init my-blog

# 2. Add blog functionality
/website-builder:add-blog

# 3. Setup Supabase CMS
/website-builder:integrate-supabase-cms

# 4. Generate blog posts
/website-builder:generate-content blog

# 5. Generate blog images
/website-builder:generate-images blog

# 6. Deploy
/website-builder:deploy

Troubleshooting

MCP Server Not Found

Ensure the content-image-generation MCP server is installed:

cd ../../mcp-servers/content-image-generation-mcp
uv pip install -e .

Build Errors

Run validation before deploying:

npm run build
npm run typecheck

AI Generation Fails

Check environment variables:

# Verify credentials set
echo $GOOGLE_CLOUD_PROJECT
echo $ANTHROPIC_API_KEY

Contributing

This plugin is part of the AI Dev Marketplace. For issues or feature requests, please see the main repository.

License

MIT License - See LICENSE file for details