mcp-mirage-brand-extract
Click on "Install 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., "@mcp-mirage-brand-extractextract brand identity from airbnb.com"
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.
mcp-mirage-brand-extract
An MCP (Model Context Protocol) server that extracts brand identity from any website and recreates it programmatically.
Features
Extract Brand - Analyze any website to extract colors, typography, spacing, and button styles
Generate Replica - Create HTML/CSS components using extracted brand data
Replicate Website - One-step extraction and generation
Compare Brands - Compare brand identities between two websites
Apply to Template - Generate pre-built templates with extracted branding
Related MCP server: design-copier
Requirements
Python 3.11+
Firecrawl API key (get one here)
Google Generative AI API key (get one here)
Installation
Using uv (recommended)
cd mcp-mirage-brand-extract
uv pip install -e .Using pip
cd mcp-mirage-brand-extract
pip install -e .Configuration
Copy the environment template:
cp .env.example .envAdd your API keys to
.env:
FIRECRAWL_API_KEY=your_firecrawl_key
GOOGLE_API_KEY=your_google_keyUsage
Running the Server
# With uv
uv run python server.py
# Or directly
python server.pyTesting with MCP Inspector
mcp dev server.pyAdding to Claude Desktop
Add to your claude_desktop_config.json:
{
"mcpServers": {
"mirage-brandextract": {
"command": "python",
"args": ["/path/to/mirage-brandextract-mcp/server.py"],
"env": {
"FIRECRAWL_API_KEY": "your_key",
"GOOGLE_API_KEY": "your_key"
}
}
}
}Tools
extract_brand
Extract complete brand identity from a website.
# Parameters
url: str # Target website URL
include_screenshots: bool # Include visual screenshots (default: False)
# Returns
{
"colors": {
"primary": "#FF5A5F",
"secondary": "#00A699",
"palette": [...]
},
"typography": {
"headings": "Circular",
"body": "Circular",
"weights": [400, 500, 700]
},
"spacing": {...},
"buttons": {...},
"url": "original_url"
}generate_replica
Generate HTML/CSS using extracted brand data.
# Parameters
brand_data: dict # Output from extract_brand
component_type: str # "landing_page", "email", "button", "card"
customization: str # Additional instructions
# Returns
{
"html": "<div>...</div>",
"css": "/* styles */",
"preview_url": "data:text/html;base64,..."
}replicate_website
Complete workflow: extract brand + generate replica in one step.
# Parameters
url: str # Target website URL
component_type: str # What to generate
customization: str # Additional instructions
# Returns
{
"brand_data": {...},
"generated": {
"html": "...",
"css": "..."
}
}compare_brands
Compare brand identities from two websites.
# Parameters
url1: str # First website URL
url2: str # Second website URL
# Returns
{
"site1": {...brand_data...},
"site2": {...brand_data...},
"comparison": {
"color_similarity": 0.85,
"typography_match": true,
"font_overlap": ["Inter"],
"differences": [...]
}
}apply_brand_to_template
Apply brand to pre-built templates.
# Parameters
url: str # Source website for branding
template_type: str # "hero_section", "pricing_table", "feature_grid", "testimonial", "cta"
# Returns
{
"html": "...",
"css": "...",
"preview_url": "...",
"template_type": "hero_section"
}Example Use Cases
1. Extract Airbnb branding and create a hero section
extract_brand(url="https://airbnb.com")
generate_replica(brand_data=result, component_type="landing_page", customization="Focus on hero section")2. Compare competitor websites
compare_brands(url1="https://airbnb.com", url2="https://vrbo.com")3. Quick template generation
apply_brand_to_template(url="https://stripe.com", template_type="pricing_table")Development
Running Tests
pytest tests/ -vCode Formatting
black src/ tests/
ruff check src/ tests/License
MIT
Built autonomously by GRIMLOCK - Autonomous MCP Server Factory
This server cannot be installed
Maintenance
Resources
Unclaimed servers have limited discoverability.
Looking for Admin?
If you are the server author, to access and configure the admin panel.
Latest Blog Posts
- Your AI Chatbot Just Exposed Your CEO's Salary to an InternBy Om-Shree-0709 on .Agent IdentityMCP SecurityOAuth Delegation
- Why MCP Servers Need Execution Sandboxing (And Why Your Current Stack Isn't Enough)By Om-Shree-0709 on .Agentic AiPrompt InjectionWebAssembly
MCP directory API
We provide all the information about MCP servers via our MCP API.
curl -X GET 'https://glama.ai/api/mcp/v1/servers/m2ai-mcp-servers/mcp-mirage-brand-extract'
If you have feedback or need assistance with the MCP directory API, please join our Discord server