This complete dashboard was generated by the server's own engines — see examples/dashboard.html
### ▶️ Watch it in action https://github.com/user-attachments/assets/a4c7c7d7-4366-475d-8bff-2d084cbe50ccLive demo: the AI searches real Tabler icons and generates pages through the server's tools — no hallucinated classes.
## Why? [Tabler](https://tabler.io) is one of the most popular open-source dashboard UI kits (41k+ ⭐, Bootstrap 5, MIT). This server teaches your AI assistant to use it *correctly*: exact icon names, canonical component markup, official color palette, real CDN links — instead of hallucinated class names. Icon search and component snippets work **fully offline** (data ships with the package). Documentation search uses docs.tabler.io live. ## Tools | Tool | Description | |---|---| | `search_icons` | Search 5,000+ Tabler icons by keyword, tag or category | | `get_icon` | Get an icon as SVG (custom size/stroke/color), React, Vue, Svelte, webfont or data URI | | `list_icon_categories` | All icon categories with counts | | `list_components` | Catalogue of ~40 UI components (alerts, cards, modals, tables, forms…) | | `get_component` | Ready-to-paste HTML snippets for a component, Tabler 1.4 markup | | `get_page_layout` | Complete HTML page: horizontal / vertical / condensed / fluid layout, login, register, forgot-password, 404, 500, blank | | `get_starter_template` | Minimal starter HTML with CDN links, dark mode, plugin stylesheets | | `get_colors` | Official color palette with hex, CSS variables and utility classes | | `get_theme_info` | Dark mode, theme persistence and CSS-variable customization | | `search_docs` | Search docs.tabler.io pages (UI, icons, emails, illustrations) | | `get_docs_page` | Read any docs.tabler.io page as clean text | | `get_installation` | Up-to-date CDN links and npm packages for Tabler UI & Icons | ## Quick start Requires **Node.js ≥ 18**. ### Claude Code ```bash claude mcp add tabler -- npx -y tabler-mcp-server ``` ### Claude Desktop Add to `claude_desktop_config.json` (Settings → Developer → Edit Config): ```json { "mcpServers": { "tabler": { "command": "npx", "args": ["-y", "tabler-mcp-server"] } } } ``` ### Cursor / Windsurf / VS Code (MCP) ```json { "mcpServers": { "tabler": { "command": "npx", "args": ["-y", "tabler-mcp-server"] } } } ``` ### ChatGPT and other remote-only clients ChatGPT connectors require a remote server. Expose this stdio server over HTTP with a gateway, e.g.: ```bash npx -y supergateway --stdio "npx -y tabler-mcp-server" --port 8000 ``` ### From source ```bash git clone https://github.com/MaFady/tabler-mcp-server.git cd tabler-mcp-server npm install && npm run build node dist/index.js # stdio MCP server ``` Then point your client at `node /path/to/tabler-mcp-server/dist/index.js`. 📘 **New here? Follow the step-by-step [Getting Started guide](docs/GETTING_STARTED.md)** (English & français) — a task-by-task walkthrough of every tool. ## Example prompts - *"Build me a Tabler login page in dark mode for 'Acme Cloud'"* - *"Find a Tabler icon for invoices and give me the React component"* - *"Create a dashboard card with a ribbon and a progress bar using Tabler"* - *"What's the exact hex of Tabler's danger color?"* - *"Show me the Tabler docs about form validation"* ## Demo [`examples/dashboard.html`](examples/dashboard.html) is a complete dashboard **generated by this server's own engines** (icon engine + template builder) — open it in a browser, or regenerate it: ```bash npm run build && node examples/generate-demo.mjs ``` ## Development ```bash npm install npm run dev # run from TypeScript (tsx) npm test # vitest npm run build # compile to dist/ ``` Project layout: ``` src/ index.ts # stdio entry point server.ts # MCP server + 12 tool registrations icons.ts # offline icon search/render engine (@tabler/icons data) docs.ts # live docs.tabler.io search & page reader template.ts # HTML document builder data/ components.ts # curated component snippets (Tabler 1.4 markup) layouts.ts # full-page layout skeletons colors.ts # official palette (extracted from tabler.min.css) ``` ## Security note Generated templates reference the official jsDelivr CDN. For production apps, pin versions and consider adding [Subresource Integrity](https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity) attributes to CDN tags. ## Credits & license - Server code: [MIT](LICENSE) © 2026 **Mafady AI Studio** — Supervised by **Dr Maher** - [Tabler](https://tabler.io), [Tabler Icons](https://tabler.io/icons) © [Paweł Kuna](https://github.com/codecalm) and contributors (MIT) - This is an independent community project, not affiliated with or endorsed by Tabler --- ## 🇫🇷 Version française **Serveur MCP pour [Tabler.io](https://tabler.io)** — apportez plus de 5 000 icônes Tabler, le catalogue complet de composants UI, les layouts de pages, les thèmes et la documentation en direct dans Claude, Cursor et tout assistant IA compatible MCP. ### Pourquoi ? Tabler est l'un des kits UI de dashboard open source les plus populaires (41k+ ⭐, Bootstrap 5, MIT). Ce serveur apprend à votre assistant IA à l'utiliser *correctement* : noms d'icônes exacts, markup canonique des composants, palette officielle, vrais liens CDN — au lieu de classes CSS hallucinées. La recherche d'icônes et les snippets fonctionnent **entièrement hors-ligne** ; la recherche documentaire interroge docs.tabler.io en direct. ### Démarrage rapide (Claude Desktop) ```json { "mcpServers": { "tabler": { "command": "npx", "args": ["-y", "tabler-mcp-server"] } } } ``` 📘 **Nouveau ? Suivez le [guide de démarrage pas à pas](docs/GETTING_STARTED.md)** (anglais & français) — un parcours tâche par tâche de chaque outil. ### Exemples de prompts - *« Crée-moi une page de connexion Tabler en mode sombre pour "Acme Cloud" »* - *« Trouve une icône Tabler pour les factures et donne-moi le composant React »* - *« Quel est le hex exact de la couleur danger de Tabler ? »* ### Crédits Créé par le **studio IA Mafady** — Supervisé par **Dr Maher** · Licence [MIT](LICENSE) · Projet communautaire indépendant, non affilié à Tabler.