WebCraft
by mggger
Web builder AI-Agent
147stars
13forks
TypeScript
Added 12/27/2025
AI Agentsai-agentcloudflare-agentscloudflare-workerfull-stack
Installation
# Add to your Claude Code skills
git clone https://github.com/mggger/WebCraftWeb Design AI Agent
An AI-powered web design agent that dynamically generates web pages and provides real-time interactive editing capabilities for each component.
Documentation
- English (current)
- 中文文档
Demo
<a href="https://www.youtube.com/watch?v=RVpkhKiDSg4" target="_blank"> View demo </a>Installation
Prerequisites
- Cloudflare account (for R2 storage and deployment)
- Anthropic API key (for Claude AI model access)
Setup Instructions
-
Install dependencies
npm install -
Configure Cloudflare R2
Modify
wrangler.tomlto bind your Cloudflare R2 bucket:[[r2_buckets]] binding = "R2_BUCKET" bucket_name = "your-bucket-name" -
Configure Environment Variables
Update the variables in
wrangler.toml:[vars] ANTHROPIC_API_KEY = "your-anthropic-api-key" R2_ENDPOINT_URL = "https://your-r2-custom-domain.com"IMPORTANT: Ensure your
R2_ENDPOINT_URLallows cross-origin access (CORS). This is critical as the generated web pages will need to access images from this endpoint. Without proper CORS configuration, the images won't display correctly.