How 24 MCP Tools Build Websites: A Technical Deep Dive
What is MCP?
MCP (Model Context Protocol) is a standard created by Anthropic that lets AI models connect to external tools. Think of it as a USB port for AI — Claude plugs into Vibesites and gets 24 tools it can call during conversation.
When you add Vibesites as a connector, Claude can see all 24 tools, understand their parameters, and call them based on what you ask.
The 6 tool categories
1. Site Management (6 tools)
vibesites_create_site is the starting point. It creates a GitHub repo, commits a template, builds and deploys to CDN, and returns a live URL. All in one call.
vibesites_migrate_site is the most complex — it fetches any URL, sends the HTML to Claude for analysis, and returns structured data: sections, colors, fonts, images, contact info, and navigation.
vibesites_clone_site duplicates an existing site, useful for agencies creating variations.
2. File Operations (5 tools)
The core editing loop: read_file → understand → write_file → published. Claude always reads before writing to preserve existing functionality.
write_files (batch) is more efficient when updating both HTML and CSS simultaneously.
3. Assets & Images (3 tools)
search_images queries free stock photo APIs by keyword. Claude searches for business-relevant photos ("yoga class", "coffee shop interior") and then uses upload_asset to download and host them on your site's CDN.
Every uploaded image is automatically analyzed by Claude Vision, generating descriptions and tags that help Claude place images correctly.
4. Publishing & Deploy (4 tools)
write_file auto-publishes, but publish can be called explicitly. check_site fetches the live URL and verifies it renders correctly.
rollback reverts to any previous Git commit and re-deploys — essential for undoing mistakes.
5. SEO & Forms (4 tools)
check_seo runs a 12-point audit: title tag, meta description, OG tags, heading hierarchy, alt text, canonical URL, robots meta, structured data, mobile viewport, and page size.
add_form generates HTML with the correct POST action URL baked in. Submissions go to the Vibesites API and are viewable in the dashboard.
6. Domains & DNS (2 tools)
set_domain writes a KV mapping and adds the domain to the Cloudflare Worker. check_dns verifies CNAME propagation.
How Claude uses the tools
Claude doesn't call tools randomly. The MCP server includes a "constitution" — instructions that tell Claude *how* to use the tools effectively:
- Always ask 5 questions before building
- Always use the landing template (never blank)
- Always read existing files before editing
- Always search and upload images (never hotlink)
- Always customize the template (never rewrite from scratch)
This constitution is the difference between a mediocre site and a professional one.
Try it yourself
Add the MCP URL to Claude and ask it to list the available tools. Then build something — the tools are free on the free plan.