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 pageslimit(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!