EC Europa Component Library MCP Server

A Model Context Protocol (MCP) server that provides AI agents with access to the European Commission's Component Library documentation.

Features

• Full-text search across 159 documentation pages
• Structured data with categories and hierarchical paths
• Code examples extraction - 270 clean HTML examples from 85 pages
• Complete coverage of EC components, forms, media, navigation, utilities, and layouts

Installation

Install from GitHub:

npm install github:brownrl/ecl_mcp

Configuration

Charm Crush

Create a .crush.json file in your project root:

{
  "$schema": "https://charm.land/crush.json",
  "mcp": {
    "ecl": {
      "command": "npx",
      "type": "stdio",
      "args": [
        "ecl-mcp"
      ]
    }
  }
}

VSCode with MCP Extension

Create a .vscode/mcp.json file in your project root:

{
  "servers": {
    "ecl": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "ecl-mcp"
      ]
    }
  }
}

Claude Desktop

Add to your Claude Desktop configuration:

{
  "mcpServers": {
    "ecl": {
      "command": "npx",
      "type": "stdio",
      "args": [
        "ecl-mcp"
      ]
    }
  }
}

Available Tools

start_here

CALL THIS FIRST! Essential setup guide with asset download script and quick start instructions. Returns complete workflow for building ECL pages. ALL other tools assume you have to read this first.

Parameters: None

---

search_documentation_pages

Search the EC Europa Component Library documentation. Returns matching pages with their titles, URLs, categories, and hierarchy information.

Parameters:

• query (string, required): Search query to find relevant documentation pages
• limit (number, optional): Maximum number of results to return (default: 10)

---

get_documentation_page

Get the complete HTML content of a specific documentation page by URL. Use this after searching to retrieve full code examples and detailed documentation.

Parameters:

• url (string, required): The full URL of the page to retrieve (from search results)
• content (boolean, optional): If true (default), returns cleaned page content. If false, returns raw HTML.

---

get_documentation_page_examples

Get code examples from a specific documentation page by URL. Returns only the code blocks with their labels, making it faster than parsing full HTML.

Parameters:

• url (string, required): The full URL of the page to retrieve examples from (from search results)

---

get_starter_template

Get a basic HTML starter template with proper ECL local assets setup, ready to use. Use this as the foundation before adding ECL components. Returns a complete HTML page with correct script tags, CSS links, and local asset URLs.

Parameters:

• title (string, optional): Page title (optional, defaults to "ECL Page")

---

get_documentation_pages_list

Get the complete list of all pages in the ECL documentation database. Returns URL, title, category, and hierarchy information for all 159 pages.

Parameters: None

---

list_recipes

List all ECL recipes - pre-built component combinations and patterns. Returns all recipes sorted by ID with metadata. More comprehensive than individual component docs.

Parameters: None

---

get_recipe

Get the complete recipe by ID. Returns full markdown content with step-by-step instructions, code examples, and best practices. Use this after recipe_search to get implementation details.

Parameters:

• id (number, required): Recipe ID from recipe_search results

---

search_examples

Search all code examples using natural language queries. Returns matching examples with their code, labels, and source page URLs. Useful for finding specific HTML patterns, component implementations, or usage examples.

Parameters:

• query (string, required): Search query to find relevant code examples (e.g., "button primary", "checkbox required", "form validation")
• limit (number, optional): Maximum number of results to return (default: 10)

---

get_example

Get a specific code example by its ID. Use this after search_examples to retrieve the full code for a specific example.

Parameters:

• id (number, required): The example ID from search_examples results

---

Database

The server uses a SQLite database (ecl-database.sqlite, ~21MB) containing:

Documentation:

• 159 crawled documentation pages
• Full HTML content and cleaned content versions
• Metadata (titles, categories, hierarchical paths)
• FTS5 full-text search index

Code Examples:

• 270 extracted code examples from 85 pages
• Labeled examples with positions
• Separate FTS5 index for fast code search

Recipes:

• Curated implementation patterns and workflows
• Step-by-step guides with code
• Difficulty levels and component lists
• FTS5 indexed for search

Technical Details

MCP Protocol: Model Context Protocol v1.0
Transport: stdio
ECL Version: v4.11.1
Database: SQLite 3 with FTS5 full-text search
CDN: Official EC CDN (cdn1.fpfis.tech.ec.europa.eu)

License

None, I'm just sharing this as-is for educational purposes. please clone and use as you see fit!