The Webpixels MCP Server enables AI assistants to search, retrieve, and assemble Bootstrap 5 UI components from the Webpixels library.
Search Components (
search_components): Find components by name, description, tags, category, or type (component, section, card, screen, layout, page, form, chart), with optional filtering for free components and a configurable result limit.Get Component (
get_component): Retrieve the full HTML code and metadata for a specific component using its UUID or slug (e.g.,section-hero-1).List Categories (
list_categories): Browse all available component categories (e.g., Banners, Hero, Pricing, Navbars, Forms, Layouts, Pages) along with component counts, optionally filtered by type.Assemble Page (
assemble_page): Combine multiple components into a complete HTML page by providing an ordered list of component IDs, with options to wrap content in a layout and include Bootstrap CSS/JS assets.Get Component Dependencies (
get_component_dependencies): Explore a component's dependency tree — see what components it depends on, what depends on it, or both directions at once.
Enables searching, retrieving, and assembling Bootstrap UI components from the Webpixels library, allowing for the discovery of components by category or type and the generation of complete HTML pages from individual components.
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., "@Webpixels MCP Serverfind a hero section and a pricing table for my SaaS landing page"
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.
Webpixels MCP Server
MCP server for Webpixels Bootstrap 5 components. This server enables AI assistants like Claude to search, retrieve, and assemble Bootstrap UI components from the Webpixels library.
Installation
Via npx (Recommended)
Add to your Claude desktop configuration (~/.config/claude/claude_desktop_config.json on macOS):
{
"mcpServers": {
"webpixels": {
"command": "npx",
"args": ["-y", "@webpixels/mcp"]
}
}
}Via Global Install
npm install -g @webpixels/mcpThen add to your configuration:
{
"mcpServers": {
"webpixels": {
"command": "webpixels-mcp"
}
}
}Available Tools
search_components
Search Bootstrap components by name, category, type, or description.
Parameters:
query(string): Search query (matches name, description, tags)type(string): Filter by component type (component, section, card, screen, layout, page, form, chart)category(string): Category or subcategory slug (e.g., 'sections', 'hero', 'pricing')is_free(boolean): Filter for free components onlylimit(number): Maximum number of results (default: 20)
get_component
Get the HTML code and metadata for a specific component.
Parameters:
id(string, required): Component UUID or slug (e.g., "section-hero-1")
list_categories
List all component categories with component counts.
Parameters:
type(string): Filter categories by component type
assemble_page
Assemble multiple components into a complete HTML page.
Parameters:
components(array, required): Array of component IDs or slugs in display orderlayout(string): Optional layout component ID to wrap the contentincludeAssets(boolean): Include CSS/JS links in a full HTML document (default: true)
get_component_dependencies
Get the dependency tree for a component.
Parameters:
id(string, required): Component UUID or slugdirection(string): "dependencies" (what this uses), "dependents" (what uses this), or "both"
Component Categories
The library includes components across several categories:
Components: Banners, Cards, Dropdowns, Headers, Modals, Navbars, Sidebars, Tables, etc.
Forms: Form groups, textareas, form layouts, form examples
Sections: Headers, Hero, Features, CTA, Pricing, FAQ, Team, Testimonials, Contact, Gallery, Logos, Blog, Footers
Layouts: Horizontal, Sidebar, Columns
Pages: Landings, Dashboard, CRUD, Settings, Auth, Profile, Messaging, etc.
Example Usage
User: I need a hero section for a SaaS landing page
Claude: [Uses search_components with query "hero saas"]
[Returns matching hero sections]
User: Show me the code for section-hero-1
Claude: [Uses get_component with id "section-hero-1"]
[Returns HTML and metadata]
User: Create a page with a hero and pricing section
Claude: [Uses assemble_page with components ["section-hero-1", "section-pricing-1"]]
[Returns complete HTML page]Development
Build
npm install
npm run buildRun locally
npm startGenerate component data
The component data is generated from the Webpixels library's compiled HTML snippets:
# From the library repository
# Option 1: Generate snippets first, then MCP data
npm run snippets
npm run mcp:generate
# Option 2: All-in-one command
npm run mcp:generate:fullThe script reads compiled HTML from library/snippets/ (not raw .njk files) to ensure all template includes are resolved.
License
MIT
Links
Resources
Unclaimed servers have limited discoverability.
Looking for Admin?
If you are the server author, to access and configure the admin panel.