Skip to main content
Glama

WebForge MCP Server

npm version License: MIT

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-mcp

Add to your Claude configuration:

{
  "mcpServers": {
    "webforge": {
      "command": "webforge-mcp",
      "args": []
    }
  }
}

Cursor

  1. Install the package: npm install -g @joytorm/webforge-mcp

  2. Add to Cursor's MCP settings:

    {
      "webforge": {
        "command": "webforge-mcp"
      }
    }

Google Antigravity

  1. Install: npm install -g @joytorm/webforge-mcp

  2. Configure 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 seed

Installation

npm install -g @joytorm/webforge-mcp

Local Development

git clone https://github.com/joytorm/webforge-mcp.git
cd webforge-mcp
npm install
npm run build
npm link

Available Tools

Design Discovery

  • webforge_list_styles - List all 100 available design styles

  • webforge_list_palettes - List all 40 available color palettes

  • webforge_recommend_design - Get top 5 style+palette recommendations for a business type

Design Details

  • webforge_get_style_details - Get complete style information including CSS tokens

  • webforge_get_palette_details - Get complete palette information including all colors

Project Management

  • webforge_create_project - Create a new website project

  • webforge_list_projects - List existing projects with filtering

  • webforge_get_project - Get detailed project information

  • webforge_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.pro

  • Authentication: 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 format

API 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

  1. Fork the repository

  2. Create your feature branch: git checkout -b feature/amazing-feature

  3. Commit your changes: git commit -m 'Add amazing feature'

  4. Push to the branch: git push origin feature/amazing-feature

  5. Open a Pull Request

License

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

Support


Built with โค๏ธ by the Joytorm team

Available Tools

9 tools
webforge_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

    A3.5/5.0

    Scored across 9 tools

    Disambiguation5/5

    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.

    Naming Consistency5/5

    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.

    Tool Count5/5

    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.

    Completeness4/5

    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

    Related MCP Servers

    • A
      license
      Not graded
      quality
      D
      maintenance
      Enables AI IDEs to query Figma design tokens, component specs, and audit issues via MCP tools, without cloud subscriptions.
      MIT
    • A
      license
      Not graded
      quality
      C
      maintenance
      Enables 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.
      67
      AGPL 3.0
    • A
      license
      A
      quality
      C
      maintenance
      A 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.
      48
      554
      MIT