WebForge MCP Server
Connects to a Supabase database to manage website projects, browse professionally crafted design styles and color palettes, and retrieve AI-powered design recommendations for local businesses.
Click on "Deploy Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type
@followed by the MCP server name and your instructions, e.g., "@WebForge MCP Server suggest a design style and color palette for a local pet grooming shop"
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
WebForge MCP Server
Model Context Protocol (MCP) server for WebForge - Create and manage websites for local businesses through any MCP-compatible IDE.
Features
๐จ 100 Design Styles - Access to professionally crafted design styles
๐ญ 40 Color Palettes - Curated color schemes for different business types
๐ค Smart Recommendations - AI-powered style+palette combinations based on business type
๐ Project Management - Create and manage website projects
๐ Compatibility Matrix - Intelligent scoring system for design combinations
๐ง MCP Protocol - Works with Claude Code, Cursor, Google Antigravity, and other MCP clients
Related MCP server: ai-ready-ds-auditor
Compatible IDEs
Claude Code
npm install -g @joytorm/webforge-mcpAdd to your Claude configuration:
{
"mcpServers": {
"webforge": {
"command": "webforge-mcp",
"args": []
}
}
}Cursor
Install the package:
npm install -g @joytorm/webforge-mcpAdd to Cursor's MCP settings:
{ "webforge": { "command": "webforge-mcp" } }
Google Antigravity
Install:
npm install -g @joytorm/webforge-mcpConfigure in Antigravity's MCP servers section:
{ "name": "webforge", "command": "webforge-mcp", "transport": "stdio" }
Prerequisites
1. Supabase Setup
You need to create the required database tables in your Supabase instance. Execute this SQL in your Supabase SQL Editor:
-- WebForge MCP Database Setup
-- Execute this SQL in the Supabase SQL Editor
-- 1. Create design_styles table
CREATE TABLE IF NOT EXISTS design_styles (
id TEXT PRIMARY KEY,
name TEXT NOT NULL,
industry TEXT NOT NULL,
style_dna JSONB NOT NULL,
dos TEXT[] NOT NULL DEFAULT '{}',
donts TEXT[] NOT NULL DEFAULT '{}',
tokens TEXT NOT NULL,
raw_length INTEGER NOT NULL DEFAULT 0,
businesses TEXT[] NOT NULL DEFAULT '{}',
category TEXT NOT NULL,
category_label TEXT NOT NULL,
created_at TIMESTAMP WITH TIME ZONE DEFAULT TIMEZONE('utc'::TEXT, NOW()) NOT NULL,
updated_at TIMESTAMP WITH TIME ZONE DEFAULT TIMEZONE('utc'::TEXT, NOW()) NOT NULL
);
-- 2. Create design_palettes table
CREATE TABLE IF NOT EXISTS design_palettes (
id TEXT PRIMARY KEY,
name TEXT NOT NULL,
mood TEXT[] NOT NULL DEFAULT '{}',
industries TEXT[] NOT NULL DEFAULT '{}',
category TEXT NOT NULL,
primary_light TEXT NOT NULL,
primary_dark TEXT NOT NULL,
accent_light TEXT NOT NULL,
heading_font TEXT NOT NULL,
body_font TEXT NOT NULL,
border_radius TEXT NOT NULL,
created_at TIMESTAMP WITH TIME ZONE DEFAULT TIMEZONE('utc'::TEXT, NOW()) NOT NULL,
updated_at TIMESTAMP WITH TIME ZONE DEFAULT TIMEZONE('utc'::TEXT, NOW()) NOT NULL
);
-- 3. Create style_palette_compatibility table
CREATE TABLE IF NOT EXISTS style_palette_compatibility (
style_id TEXT NOT NULL REFERENCES design_styles(id) ON DELETE CASCADE,
palette_id TEXT NOT NULL REFERENCES design_palettes(id) ON DELETE CASCADE,
score INTEGER NOT NULL CHECK (score >= 1 AND score <= 5),
created_at TIMESTAMP WITH TIME ZONE DEFAULT TIMEZONE('utc'::TEXT, NOW()) NOT NULL,
PRIMARY KEY (style_id, palette_id)
);
-- 4. Create indexes for better performance
CREATE INDEX IF NOT EXISTS idx_design_styles_category ON design_styles(category);
CREATE INDEX IF NOT EXISTS idx_design_styles_industry ON design_styles(industry);
CREATE INDEX IF NOT EXISTS idx_design_styles_businesses ON design_styles USING GIN(businesses);
CREATE INDEX IF NOT EXISTS idx_design_palettes_category ON design_palettes(category);
CREATE INDEX IF NOT EXISTS idx_design_palettes_mood ON design_palettes USING GIN(mood);
CREATE INDEX IF NOT EXISTS idx_design_palettes_industries ON design_palettes USING GIN(industries);
CREATE INDEX IF NOT EXISTS idx_compatibility_style_score ON style_palette_compatibility(style_id, score DESC);
CREATE INDEX IF NOT EXISTS idx_compatibility_palette_score ON style_palette_compatibility(palette_id, score DESC);
CREATE INDEX IF NOT EXISTS idx_compatibility_score ON style_palette_compatibility(score DESC);
-- 5. Enable Row Level Security
ALTER TABLE design_styles ENABLE ROW LEVEL SECURITY;
ALTER TABLE design_palettes ENABLE ROW LEVEL SECURITY;
ALTER TABLE style_palette_compatibility ENABLE ROW LEVEL SECURITY;
-- 6. Create RLS policies for read access
DROP POLICY IF EXISTS "Allow read access to design_styles" ON design_styles;
CREATE POLICY "Allow read access to design_styles" ON design_styles FOR SELECT USING (true);
DROP POLICY IF EXISTS "Allow read access to design_palettes" ON design_palettes;
CREATE POLICY "Allow read access to design_palettes" ON design_palettes FOR SELECT USING (true);
DROP POLICY IF EXISTS "Allow read access to style_palette_compatibility" ON style_palette_compatibility;
CREATE POLICY "Allow read access to style_palette_compatibility" ON style_palette_compatibility FOR SELECT USING (true);
-- 7. Create trigger function for updated_at
CREATE OR REPLACE FUNCTION update_updated_at_column()
RETURNS TRIGGER AS $$
BEGIN
NEW.updated_at = TIMEZONE('utc'::TEXT, NOW());
RETURN NEW;
END;
$$ LANGUAGE plpgsql;
-- 8. Create triggers for automatic updated_at
DROP TRIGGER IF EXISTS update_design_styles_updated_at ON design_styles;
CREATE TRIGGER update_design_styles_updated_at
BEFORE UPDATE ON design_styles
FOR EACH ROW
EXECUTE FUNCTION update_updated_at_column();
DROP TRIGGER IF EXISTS update_design_palettes_updated_at ON design_palettes;
CREATE TRIGGER update_design_palettes_updated_at
BEFORE UPDATE ON design_palettes
FOR EACH ROW
EXECUTE FUNCTION update_updated_at_column();2. Seed the Database
After creating the tables, run the seeding script to populate them with WebForge's design data:
npm run seedInstallation
Global Installation (Recommended)
npm install -g @joytorm/webforge-mcpLocal Development
git clone https://github.com/joytorm/webforge-mcp.git
cd webforge-mcp
npm install
npm run build
npm linkAvailable Tools
Design Discovery
webforge_list_styles- List all 100 available design styleswebforge_list_palettes- List all 40 available color paletteswebforge_recommend_design- Get top 5 style+palette recommendations for a business type
Design Details
webforge_get_style_details- Get complete style information including CSS tokenswebforge_get_palette_details- Get complete palette information including all colors
Project Management
webforge_create_project- Create a new website projectwebforge_list_projects- List existing projects with filteringwebforge_get_project- Get detailed project informationwebforge_update_project- Update project settings
Usage Examples
Get Design Recommendations
// Ask for recommendations for a restaurant
await webforge_recommend_design({ business_type: "restaurant" })Create a New Project
// Create a project for a dental clinic
await webforge_create_project({
name: "Smile Dental Clinic",
business_type: "dental clinic",
description: "Modern dental practice website",
style_id: "S15", // Optional: assign a style
palette_id: "P08" // Optional: assign a palette
})Get Style Details
// Get complete details for a specific style
await webforge_get_style_details({ style_id: "S01" })Environment Variables
The MCP server connects to the WebForge Supabase instance automatically. No additional environment configuration is required.
Supabase URL:
https://supabase.optihost.proAuthentication: Handled automatically via service keys
Development
# Install dependencies
npm install
# Run in development mode
npm run dev
# Build for production
npm run build
# Run tests
npm test
# Lint code
npm run lint
# Format code
npm run formatAPI Reference
Recommendation Engine
The recommendation system uses a compatibility matrix that scores style+palette combinations from 1-5 based on:
Industry alignment - How well the style fits the business type
Visual harmony - Color theory and design compatibility
Brand perception - Mood and professional appropriateness
User experience - Usability for the target audience
Style Categories
Minimalist - Clean, modern designs with lots of whitespace
Creative - Bold, artistic layouts with unique elements
Professional - Traditional business-focused designs
E-commerce - Product-focused layouts with strong CTAs
Local Business - Community-oriented designs with local appeal
Palette Moods
Professional - Conservative colors for business credibility
Friendly - Warm, welcoming colors for service businesses
Modern - Contemporary color schemes for tech/startups
Elegant - Sophisticated palettes for premium brands
Energetic - Vibrant colors for fitness/entertainment
Contributing
Fork the repository
Create your feature branch:
git checkout -b feature/amazing-featureCommit your changes:
git commit -m 'Add amazing feature'Push to the branch:
git push origin feature/amazing-featureOpen a Pull Request
License
This project is licensed under the MIT License - see the LICENSE file for details.
Support
GitHub Issues: https://github.com/joytorm/webforge-mcp/issues
Email: contact@joytorm.com
Documentation: WebForge MCP Docs
Built with โค๏ธ by the Joytorm team
Available Tools
9 toolswebforge_create_projectC
Create a new website project in WebForge
Inputs: name (required), business_type (required), description, style_id, +2 more.
webforge_get_palette_detailsB
Get complete details for a specific color palette including all colors
Inputs: palette_id (required).
webforge_get_projectC
Get detailed information about a specific project
Inputs: project_id (required).
webforge_get_style_detailsC
Get complete details for a specific design style including CSS tokens
Inputs: style_id (required).
webforge_list_palettesB
List all available color palettes with basic information
Inputs: no named parameters.
webforge_list_projectsC
List website projects with optional filtering
Inputs: status, business_type, limit, offset.
webforge_list_stylesB
List all available design styles with basic information
Inputs: no named parameters.
webforge_recommend_designC
Get top 5 design recommendations (style + palette combinations) for a business type
Inputs: business_type (required).
webforge_update_projectC
Update an existing website project
Inputs: project_id (required), name, business_type, description, +4 more.
Tool Schema Changelog
Recent tool additions, removals, and schema changes observed during successful MCP inspections.
TDQS
Scored across 9 tools
Each tool has a clearly distinct purpose with no ambiguity. The tools cleanly separate into project management (create/get/list/update), palette operations (get/list), style operations (get/list), and design recommendations, with no overlapping functionality.
All tools follow a perfect verb_noun pattern with consistent webforge_ prefix. The naming convention is completely uniform across all 9 tools, making them predictable and easy to understand.
With 9 tools, this server is well-scoped for website design/creation. Each tool earns its place by covering distinct aspects of the domain without being overwhelming or too sparse.
The toolset provides excellent coverage for project management and design element discovery. Minor gaps include the inability to create/update palettes or styles, and no direct deployment/publishing tools, but core workflows are well-supported.
Related MCP Connectors
Agent-native website builder: create, edit, and host websites via MCP
Create, edit, preview, publish, and manage web pages from MCP-capable AI clients.
Lets your AI build and edit websites in Xodia, a visual website builder for real code (Vite, React, Tailwind CSS or plain HTML in your own git repo): read and write site files, create pages and CMS collections, run typecheck, design and link checks, take screenshots, manage forms and translations, and pick up change requests the user sends from the visual editor. Sign in once with your Xodia account (OAuth). Free plan, no card needed. Setup: https://xodia.ai/ai/mcp
Local business leads and website intelligence for AI agents: lead lists, contacts, tracking, SEO and
Related MCP Servers
AlicenseAqualityDmaintenanceEnables AI assistants to discover and book local service businesses like barbers, plumbers, and mechanics directly through MCP-compatible tools.973 npmMIT- AlicenseNot gradedqualityDmaintenanceEnables AI IDEs to query Figma design tokens, component specs, and audit issues via MCP tools, without cloud subscriptions.MIT

@seldonframe/mcpofficial
AlicenseNot gradedqualityCmaintenanceEnables MCP-compatible agents to build and operate complete AI front offices for local businessesโbranded websites, booking, intake, CRM, and AI agents in one workspace.67AGPL 3.0- AlicenseAqualityCmaintenanceA design harness for AI coding agents. Better Design gives an agent design systems, UI and UX principles, icons and UI review: it finds or creates a design system that fits the product and installs its components, explains how sign-up, forms and onboarding should work, and reviews finished screens for readability, accessibility and unclear copy.48554MIT