{
  "markdown": "# Tabler MCP Server\n\n> **MCP server for [Tabler.io](https://tabler.io)** — bring 5,000+ Tabler icons, the full UI component catalogue, page layouts, themes and live documentation into Claude, Cursor, and any MCP-compatible AI assistant.\n\n[![CI](https://github.com/MaFady/tabler-mcp-server/actions/workflows/ci.yml/badge.svg)](https://github.com/MaFady/tabler-mcp-server/actions/workflows/ci.yml)\n[![License: MIT](https://img.shields.io/badge/License-MIT-green.svg)](LICENSE)\n[![Tabler](https://img.shields.io/badge/Tabler-1.4.0-066fd1.svg)](https://tabler.io)\n[![MCP](https://img.shields.io/badge/Model_Context_Protocol-compatible-blueviolet.svg)](https://modelcontextprotocol.io)\n\nCreated by **Mafady AI Studio** — Supervised by **Dr Maher** · [Version française ci-dessous](#-version-française) 🇫🇷\n\n---\n\n![Demo dashboard generated by tabler-mcp-server](docs/assets/demo-dashboard.png)\n\n<p align=\"center\"><em>This complete dashboard was generated by the server's own engines — see <a href=\"examples/dashboard.html\">examples/dashboard.html</a></em></p>\n\n### ▶️ Watch it in action\n\nhttps://github.com/user-attachments/assets/a4c7c7d7-4366-475d-8bff-2d084cbe50cc\n\n<p align=\"center\"><em>Live demo: the AI searches real Tabler icons and generates pages through the server's tools — no hallucinated classes.</em></p>\n\n## Why?\n\n[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.\n\nIcon search and component snippets work **fully offline** (data ships with the package). Documentation search uses docs.tabler.io live.\n\n## Tools\n\n| Tool | Description |\n|---|---|\n| `search_icons` | Search 5,000+ Tabler icons by keyword, tag or category |\n| `get_icon` | Get an icon as SVG (custom size/stroke/color), React, Vue, Svelte, webfont or data URI |\n| `list_icon_categories` | All icon categories with counts |\n| `list_components` | Catalogue of ~40 UI components (alerts, cards, modals, tables, forms…) |\n| `get_component` | Ready-to-paste HTML snippets for a component, Tabler 1.4 markup |\n| `get_page_layout` | Complete HTML page: horizontal / vertical / condensed / fluid layout, login, register, forgot-password, 404, 500, blank |\n| `get_starter_template` | Minimal starter HTML with CDN links, dark mode, plugin stylesheets |\n| `get_colors` | Official color palette with hex, CSS variables and utility classes |\n| `get_theme_info` | Dark mode, theme persistence and CSS-variable customization |\n| `search_docs` | Search docs.tabler.io pages (UI, icons, emails, illustrations) |\n| `get_docs_page` | Read any docs.tabler.io page as clean text |\n| `get_installation` | Up-to-date CDN links and npm packages for Tabler UI & Icons |\n\n## Quick start\n\nRequires **Node.js ≥ 18**.\n\n### Claude Code\n\n```bash\nclaude mcp add tabler -- npx -y tabler-mcp-server\n```\n\n### Claude Desktop\n\nAdd to `claude_desktop_config.json` (Settings → Developer → Edit Config):\n\n```json\n{\n  \"mcpServers\": {\n    \"tabler\": {\n      \"command\": \"npx\",\n      \"args\": [\"-y\", \"tabler-mcp-server\"]\n    }\n  }\n}\n```\n\n### Cursor / Windsurf / VS Code (MCP)\n\n```json\n{\n  \"mcpServers\": {\n    \"tabler\": {\n      \"command\": \"npx\",\n      \"args\": [\"-y\", \"tabler-mcp-server\"]\n    }\n  }\n}\n```\n\n### ChatGPT and other remote-only clients\n\nChatGPT connectors require a remote server. Expose this stdio server over HTTP with a gateway, e.g.:\n\n```bash\nnpx -y supergateway --stdio \"npx -y tabler-mcp-server\" --port 8000\n```\n\n### From source\n\n```bash\ngit clone https://github.com/MaFady/tabler-mcp-server.git\ncd tabler-mcp-server\nnpm install && npm run build\nnode dist/index.js   # stdio MCP server\n```\n\nThen point your client at `node /path/to/tabler-mcp-server/dist/index.js`.\n\n📘 **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.\n\n## Example prompts\n\n- *\"Build me a Tabler login page in dark mode for 'Acme Cloud'\"*\n- *\"Find a Tabler icon for invoices and give me the React component\"*\n- *\"Create a dashboard card with a ribbon and a progress bar using Tabler\"*\n- *\"What's the exact hex of Tabler's danger color?\"*\n- *\"Show me the Tabler docs about form validation\"*\n\n## Demo\n\n[`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:\n\n```bash\nnpm run build && node examples/generate-demo.mjs\n```\n\n## Development\n\n```bash\nnpm install\nnpm run dev        # run from TypeScript (tsx)\nnpm test           # vitest\nnpm run build      # compile to dist/\n```\n\nProject layout:\n\n```\nsrc/\n  index.ts          # stdio entry point\n  server.ts         # MCP server + 12 tool registrations\n  icons.ts          # offline icon search/render engine (@tabler/icons data)\n  docs.ts           # live docs.tabler.io search & page reader\n  template.ts       # HTML document builder\n  data/\n    components.ts   # curated component snippets (Tabler 1.4 markup)\n    layouts.ts      # full-page layout skeletons\n    colors.ts       # official palette (extracted from tabler.min.css)\n```\n\n## Security note\n\nGenerated 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.\n\n## Credits & license\n\n- Server code: [MIT](LICENSE) © 2026 **Mafady AI Studio** — Supervised by **Dr Maher**\n- [Tabler](https://tabler.io), [Tabler Icons](https://tabler.io/icons) © [Paweł Kuna](https://github.com/codecalm) and contributors (MIT)\n- This is an independent community project, not affiliated with or endorsed by Tabler\n\n---\n\n## 🇫🇷 Version française\n\n**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.\n\n### Pourquoi ?\n\nTabler 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.\n\nLa recherche d'icônes et les snippets fonctionnent **entièrement hors-ligne** ; la recherche documentaire interroge docs.tabler.io en direct.\n\n### Démarrage rapide (Claude Desktop)\n\n```json\n{\n  \"mcpServers\": {\n    \"tabler\": {\n      \"command\": \"npx\",\n      \"args\": [\"-y\", \"tabler-mcp-server\"]\n    }\n  }\n}\n```\n\n📘 **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.\n\n### Exemples de prompts\n\n- *« Crée-moi une page de connexion Tabler en mode sombre pour \"Acme Cloud\" »*\n- *« Trouve une icône Tabler pour les factures et donne-moi le composant React »*\n- *« Quel est le hex exact de la couleur danger de Tabler ? »*\n\n### Crédits\n\nCréé par le **studio IA Mafady** — Supervisé par **Dr Maher** · Licence [MIT](LICENSE) · Projet communautaire indépendant, non affilié à Tabler.\n",
  "bytes": 7341,
  "sha": "b539cf1eb4eef67da39a9df7d0cf27529ebcbc4573c99cfcd31ddf3dd70c1288",
  "repo_slug": "mafady/tabler-mcp-server",
  "fonte": "repo",
  "truncated": false,
  "api": "https://agentalog.com/api/listings/mcp_io_github_mafady_tabler_mcp_server_3b3cd37c/readme"
}