Tabler MCP Server

Tabler MCP Server

MCP server for 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.

Created by Mafady AI Studio — Supervised by Dr Maher · Version française ci-dessous 🇫🇷

---

▶️ Watch it in action

https://github.com/user-attachments/assets/a4c7c7d7-4366-475d-8bff-2d084cbe50cc

Why?

Tabler 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

Quick start

Requires Node.js ≥ 18.

Claude Code

claude mcp add tabler -- npx -y tabler-mcp-server

Claude Desktop

Add to claude_desktop_config.json (Settings → Developer → Edit Config):

{
  "mcpServers": {
    "tabler": {
      "command": "npx",
      "args": ["-y", "tabler-mcp-server"]
    }
  }
}

Cursor / Windsurf / VS Code (MCP)

{
  "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.:

npx -y supergateway --stdio "npx -y tabler-mcp-server" --port 8000

From source

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 (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 is a complete dashboard generated by this server's own engines (icon engine + template builder) — open it in a browser, or regenerate it:

npm run build && node examples/generate-demo.mjs

Development

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 attributes to CDN tags.

Credits & license

• Server code: MIT © 2026 Mafady AI Studio — Supervised by Dr Maher
• Tabler, Tabler Icons © Paweł Kuna and contributors (MIT)
• This is an independent community project, not affiliated with or endorsed by Tabler

---

🇫🇷 Version française

Serveur MCP pour 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)

{
  "mcpServers": {
    "tabler": {
      "command": "npx",
      "args": ["-y", "tabler-mcp-server"]
    }
  }
}

📘 Nouveau ? Suivez le guide de démarrage pas à pas (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 · Projet communautaire indépendant, non affilié à Tabler.