HextaUI

MCP-Server

Verbinde Claude Code, Cursor, VS Code und andere KI-Assistenten mit HextaUI, damit sie die Docs durchsuchen, jede API lesen und Komponenten für dich installieren.

Der HextaUI-MCP-Server gibt Assistenten dieselben Docs, die du hier liest: wofür jede Komponente gedacht ist, ihre Props und Data-Attribute, Tastaturbedienung, funktionierende Beispiele und den Befehl zum Installieren. Assistenten raten nicht mehr bei shadcn/ui-Props, sondern nutzen, was HextaUI tatsächlich liefert.

Es ist ein gehosteter, schreibgeschützter Server unter https://hextaui.com/mcp. Es gibt nichts zu installieren und keinen API-Key. Er liest die Docs der Version auf dieser Seite und ist daher immer aktuell.

Einrichtung

Füge den Server deinem Assistenten hinzu und bitte ihn dann, etwas mit HextaUI zu bauen.

Claude Code

claude mcp add --transport http hextaui https://hextaui.com/mcp

Cursor

.cursor/mcp.json
{
  "mcpServers": {
    "hextaui": {
      "url": "https://hextaui.com/mcp"
    }
  }
}

VS Code

.vscode/mcp.json
{
  "servers": {
    "hextaui": {
      "type": "http",
      "url": "https://hextaui.com/mcp"
    }
  }
}

Codex

~/.codex/config.toml
[mcp_servers.hextaui]
url = "https://hextaui.com/mcp"

Windsurf

~/.codeium/windsurf/mcp_config.json
{
  "mcpServers": {
    "hextaui": {
      "serverUrl": "https://hextaui.com/mcp"
    }
  }
}

Andere Clients

Jeder Client, der Remote-Server über Streamable HTTP unterstützt, kann die URL direkt verwenden. Für einen Client, der nur lokale Server ausführt, überbrücke sie mit mcp-remote.

{
  "mcpServers": {
    "hextaui": {
      "command": "npx",
      "args": ["-y", "mcp-remote", "https://hextaui.com/mcp"]
    }
  }
}

Tools

Jedes Tool ist schreibgeschützt. Das Installieren überlässt du deinem Assistenten, der den shadcn-CLI-Befehl in deinem Projekt ausführt, so wie du es tun würdest.

  • search_docs findet Komponenten, Beispiele, Props und Data-Attribute aus natürlicher Sprache, etwa „vor dem Löschen bestätigen“ oder einem Prop-Namen.
  • list_components listet jede Komponente, jeden Hook und jedes Utility nach Kategorie auf.
  • get_component gibt die vollständigen Docs einer Seite zurück: Installationsbefehl, Verwendung, Beispiele, Tastatur, Barrierefreiheit und API-Referenz.
  • get_component_api gibt nur die API-Referenz und die Tastaturbedienung zurück.
  • get_examples gibt den Code beliebiger Beispiele einer Seite zurück.
  • get_component_source gibt die Quelldateien zurück, die die CLI installieren würde.
  • get_install_command baut einen einzigen shadcn-Befehl für mehrere Komponenten, für npm, pnpm, yarn oder bun.
  • get_setup gibt die Installationsanleitung und die Konventionen zurück, denen generierter Code folgen soll.

Der Server stellt außerdem jede Seite als hextaui://docs/{slug}-Ressource bereit sowie einen build-ui-Prompt, der einen Assistenten von der Auswahl der Komponenten bis zur Installation führt.

Ausprobieren

  • Baue eine Einstellungsseite mit HextaUI: Profilformular, Benachrichtigungs-Switches und eine Gefahrenzone.
  • Welche HextaUI-Komponente sollte ich für eine Dateiliste mit Checkboxen verwenden?
  • Ersetze dieses Modal durch den HextaUI-Dialog und lass das Formular weiter funktionieren.
  • Füge eine Chat-Ansicht mit HextaUI-Nachrichtenblasen hinzu, die zu neuen Nachrichten scrollt.

Lieber den shadcn-MCP-Server? Registriere den @hextaui-Namespace, dann kann er auch HextaUI-Komponenten und Beispiele durchsuchen und installieren.