UI Kit MCP lokal einrichten

So funktioniert die Verbindung#

Die aiw CLI ist zugleich ein MCP-Server. MCP, das Model Context Protocol, ist der offene Standard, über den KI-Assistenten Werkzeuge nutzen. Claude, Cursor, GitHub Copilot, Windsurf, Codex, Gemini und viele andere sprechen ihn, und alle starten denselben Server mit npx -y ai-website mcp.

Der Server läuft auf deinem Rechner, im Ordner deines Projekts. Der Assistent sucht damit Components, installiert sie als Quellcode, baut die Seite und prüft sie im Browser. Dein Code bleibt auf dem Rechner, nur die Components kommen aus der Registry des Kits.

npx -y ai-website mcp

Node 22.12 oder neuer reicht, siehe Voraussetzungen. Mit globaler Installation (npm i -g ai-website) heißt der Command kürzer aiw mcp.

Deinen Assistenten einrichten#

Wähle deinen Assistenten. Einmal eingetragen, steht das Kit in jedem Gespräch bereit.

Claude Code#

Anthropic

Ein Command im Terminal trägt den Server für alle Projekte auf diesem Rechner ein.

claude mcp add ai-website --scope user -- npx -y ai-website mcp

In Claude Code zeigt /mcp danach den Server ai-website mit seinen Tools.

Claude Desktop#

Anthropic

Einstellungen, Entwickler, Konfiguration bearbeiten öffnet claude_desktop_config.json. Trag den Server unter mcpServers ein und starte die App neu.

{
  "mcpServers": {
    "ai-website": {
      "command": "npx",
      "args": [
        "-y",
        "ai-website",
        "mcp"
      ]
    }
  }
}

Die Tools von ai-website stehen danach im Tool-Menü eines neuen Chats.

Cursor#

Anysphere

Trag den Server in ~/.cursor/mcp.json für alle Projekte ein oder in .cursor/mcp.json für ein einzelnes Projekt.

{
  "mcpServers": {
    "ai-website": {
      "command": "npx",
      "args": [
        "-y",
        "ai-website",
        "mcp"
      ]
    }
  }
}

Unter Settings, MCP zeigt der Server einen grünen Punkt und seine Tools. Der Agent nutzt sie im Chat.

GitHub Copilot in VS Code#

GitHub, in VS Code

VS Code liest die Server eines Projekts aus .vscode/mcp.json, unter dem Schlüssel servers. Copilot nutzt sie im Agent-Modus.

{
  "servers": {
    "ai-website": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "ai-website",
        "mcp"
      ]
    }
  }
}

Stell den Copilot-Chat auf Agent, der Tools-Knopf listet dann die Tools von ai-website.

Windsurf#

Windsurf

Cascade führt seine Server in ~/.codeium/windsurf/mcp_config.json, unter mcpServers.

{
  "mcpServers": {
    "ai-website": {
      "command": "npx",
      "args": [
        "-y",
        "ai-website",
        "mcp"
      ]
    }
  }
}

Aktualisiere die Serverliste in Cascade, danach erscheint ai-website mit seinen Tools.

Codex von OpenAI#

OpenAI

Die Codex CLI und die Codex-Erweiterung teilen sich ~/.codex/config.toml. Ein Command schreibt den Eintrag für dich.

codex mcp add ai-website -- npx -y ai-website mcp

In der config.toml steht der Eintrag dann unter [mcp_servers.ai-website], codex mcp list zeigt ihn.

Gemini CLI#

Google

Die Gemini CLI liest ihre Server aus ~/.gemini/settings.json oder aus .gemini/settings.json im Projekt.

{
  "mcpServers": {
    "ai-website": {
      "command": "npx",
      "args": [
        "-y",
        "ai-website",
        "mcp"
      ]
    }
  }
}

In der Gemini CLI zeigt /mcp danach ai-website mit seinen Tools.

ChatGPT#

OpenAI

ChatGPT verbindet sich mit MCP-Servern im Internet, nicht mit Programmen auf deinem Rechner. Das Kit bekommt es über den öffentlichen Server von ai-website.com, der gerade entsteht.

codex mcp add ai-website -- npx -y ai-website mcp

Bis dahin nutzt Codex, der Coding-Agent von OpenAI, jedes Tool lokal.

Jeder andere MCP-Client#

Zed, Cline, Continue, JetBrains AI and more

Jeder Client, der MCP über stdio spricht, startet denselben Command. Trag npx als Command und -y ai-website mcp als Argumente ein.

{
  "mcpServers": {
    "ai-website": {
      "command": "npx",
      "args": [
        "-y",
        "ai-website",
        "mcp"
      ]
    }
  }
}

Mit globaler Installation (npm i -g ai-website) lautet der Command einfach aiw mcp.

{
  "mcpServers": {
    "ai-website": {
      "command": "cmd",
      "args": [
        "/c",
        "npx",
        "-y",
        "ai-website",
        "mcp"
      ]
    }
  }
}

Öffentlicher Server#

Ohne Installation verbindest du jeden Assistenten mit https://ai-website.com/mcp. Die Einrichtung je Client mit Bildern steht auf der Seite des MCP-Servers.

Ein Projekt verbinden#

aiw mcp init schreibt die .mcp.json eines Projekts mit allen Servern, die die Arbeit braucht, also Playwright und Chrome DevTools für den Browser, Context7 und Astro Docs für aktuelle Doku und die CLI selbst. Claude Code liest diese Datei direkt, andere Assistenten übernehmen dieselben Einträge in ihre eigene Datei. Die Regeln des Stacks kommen als eigener Abschnitt in die CLAUDE.md, die du auch anderen Assistenten als Regeldatei gibst. Deine eigenen Texte darin bleiben stehen.

aiw mcp init

aiw new erledigt das beim Anlegen gleich mit. Optionen wie --servers und --no-rules stehen bei aiw mcp init.

Die Tools#

Jeder Command ist auch ein Tool, mit aiw_ davor. Der Assistent wählt sie selbst, du musst sie nicht nennen.

• aiw_doctoraiw doctor
• aiw_newaiw new
• aiw_addaiw add
• aiw_outdatedaiw outdated
• aiw_updateaiw update
• aiw_componentsaiw components
• aiw_registry_buildaiw registry build
• aiw_themeaiw theme
• aiw_fonts_addaiw fonts add
• aiw_fonts_subsetaiw fonts subset
• aiw_media_optimizeaiw media optimize
• aiw_media_ogaiw media og
• aiw_media_videoaiw media video
• aiw_lintaiw lint
• aiw_checkaiw check
• aiw_seo_auditaiw seo audit
• aiw_search_buildaiw search build
• aiw_researchaiw research
• aiw_deployaiw deploy
• aiw_previewaiw preview
• aiw_mcp_initaiw mcp init

Prompts, die funktionieren#

Gute Prompts nennen Inhalt, Components und Varianten so konkret wie möglich. Sie wirken in jedem Assistenten gleich. Kopier dir einen und pass ihn an.

Bau eine Startseite für die Zahnarztpraxis Dr. Albers in Lüneburg. Hero in der Variante split, drei Leistungen als Features, Pricing als price-list für Prophylaxe und Bleaching, ein FAQ mit fünf Fragen und ein Kontaktformular. Nutze nur Components aus dem UI Kit und die Texte in deutscher Sprache.

Füge unter dem Hero eine Pricing-Section in der Variante toggle ein, mit den Plänen Start für 19 Euro und Pro für 49 Euro im Monat, jährlich 20 Prozent günstiger. Pro ist hervorgehoben.

Setze unsere Markenfarbe #0f766e mit aiw theme als Akzent für hell und dunkel, binde theme.css nach kit.css ein und entferne data-accent vom html-Element.

Bau die Seite, prüfe dist mit aiw check bei 390, 768 und 1440 und mit aiw seo audit. Sieh dir jeden Screenshot an und behebe, was auffällt, bis beide ohne Fund durchlaufen.

Arbeitsweise#

1. Beschreiben

   Sag, für wen die Seite ist, welche Abschnitte sie hat und in welcher Sprache. Echte Inhalte ergeben bessere Seiten als Platzhalter.

2. Finden und installieren

   Der Assistent sucht mit aiw_components die passenden Varianten und holt sie mit aiw_add ins Projekt.

3. Bauen

   Die Seite entsteht aus Components mit deinen Inhalten in den Props. Die Regeln des Stacks halten Tokens, Schrift und Abstände einheitlich.

4. Prüfen

   aiw_check öffnet jede Seite bei 390, 768 und 1440 Pixeln, macht Screenshots, prüft Barrierefreiheit, Links und Lighthouse. aiw_seo_audit prüft Titel, Beschreibung und strukturierte Daten.

5. Ansehen

   Lass dir die Screenshots zeigen und sag, was sich ändern soll. Jede Runde endet wieder mit einer Prüfung.