Mit jeder KI echte Websites bauen

1. 1Öffne in Claude die Einstellungen und dort Connectors. In Team und Enterprise fügt ein Owner den Connector unter Organisationseinstellungen, Connectors hinzu, Mitglieder verbinden ihn danach.
2. 2Gib ihm den Namen UI Kit by ai-website.com, füge die Adresse ein und lass die Anmeldung leer. Der Server braucht keine.
3. 3Öffne in einem neuen Chat das Werkzeugmenü unter dem Eingabefeld und schalte das UI Kit ein. Claude ruft die Werkzeuge dann von selbst auf, wenn deine Anfrage sie braucht.

claude mcp add --transport http ai-website-ui-kit https://ai-website.com/mcp

Im Chat zeigt das Werkzeugmenü das UI Kit mit seinen Werkzeugen. In Claude Code zeigt /mcp den Server als verbunden.

1. 1Öffne Einstellungen, Apps und dann Erweiterte Einstellungen. Schalte den Entwicklermodus ein, damit kannst du Apps von eigenen MCP-Servern hinzufügen.
2. 2Wähle App erstellen. Gib ihr den Namen UI Kit by ai-website.com, füge die Adresse als MCP-Server-URL ein, wähle Keine Authentifizierung und setze das Häkchen bei I trust this application.
3. 3Wähle die App in einem neuen Chat über den Plus-Knopf neben dem Eingabefeld. ChatGPT ruft die Werkzeuge des Kits dann beim Antworten auf.

Die App erscheint unter dem Plus-Knopf, und eine Antwort zeigt die Werkzeugaufrufe, etwa search_components.

1. 1Der Knopf öffnet Cursor mit fertig eingetragenem Server. Bestätige mit Install, und der Eintrag gilt für alle Projekte.
2. 2Trag den Eintrag in ~/.cursor/mcp.json für alle Projekte ein oder in .cursor/mcp.json für ein einzelnes Projekt.
3. 3Unter Settings, MCP zeigt der Server einen grünen Punkt und seine Werkzeuge. Der Agent im Chat nutzt sie jetzt von selbst.

Der Server hat unter Settings, MCP einen grünen Punkt. Frag den Agenten, welche Werkzeuge er hat, er nennt search_components und die anderen.

1. 1Öffne die Befehlspalette mit Strg Umschalt P, auf dem Mac mit Cmd Umschalt P, und starte MCP: Add Server.
2. 2Wähle HTTP, füge die Adresse ein und gib ihr die ID ai-website-ui-kit. Wähle Global für alle Workspaces oder Workspace für diesen.
3. 3Stell den Copilot-Chat auf Agent. Der Tools-Knopf listet die Werkzeuge des UI Kit, und Copilot ruft sie beim Arbeiten auf.

MCP: List Servers zeigt den Server als laufend, und der Tools-Knopf im Agent-Modus listet seine Werkzeuge.

1. 1Öffne in Cascade die MCP-Server und wähle Konfiguration bearbeiten. Die Datei liegt in ~/.config/devin/mcp_config.json, unter Windows in %APPDATA%\devin, bei älteren Installationen in ~/.codeium/windsurf.
2. 2Trag den Eintrag unter mcpServers ein. Windsurf nennt die Adresse serverUrl.
3. 3Aktualisiere die Serverliste. Das UI Kit erscheint mit seinen Werkzeugen, und Cascade nutzt sie im nächsten Lauf.

Nach dem Aktualisieren zeigt die Serverliste das UI Kit mit 14 Werkzeugen.

1. 1Starte den Command im Terminal. Er schreibt den Eintrag in die Einstellungen der Gemini CLI.
2. 2Trag den Eintrag in ~/.gemini/settings.json für alle Projekte ein oder in .gemini/settings.json in einem Projekt. httpUrl steht für Streamable HTTP.
3. 3Starte gemini und tippe /mcp. Die Liste zeigt das UI Kit als verbunden, mit seinen Werkzeugen und Prompts.

/mcp zeigt das UI Kit als bereit, mit 14 Werkzeugen und 5 Prompts.

1. 1Starte den Command einmal. Er schreibt den Eintrag in ~/.codex/config.toml.
2. 2Zwei Zeilen in ~/.codex/config.toml tun dasselbe. CLI, IDE-Erweiterung und App lesen alle diese Datei.
3. 3codex mcp list zeigt den Server. In einer Sitzung listet /mcp seine Werkzeuge.

codex mcp list zeigt den Server als aktiv, und /mcp listet in einer Sitzung seine 14 Werkzeuge.

1. 1Öffne die Einstellungen von Zed mit Strg Komma, auf dem Mac mit Cmd Komma, oder starte zed: open settings aus der Befehlspalette.
2. 2Zed nennt MCP-Server Context Server. Trag den Eintrag unter context_servers ein.
3. 3In den Einstellungen des Agent Panels zeigt der Server einen grünen Punkt. Der Agent nutzt jetzt seine Werkzeuge.

Die Einstellungen des Agent Panels zeigen den Server mit grünem Punkt.

• Mistral Le Chat

  Intelligence, Connectors, Connector hinzufügen, Custom MCP connector, dann die Adresse https://ai-website.com/mcp.

• Cline

  cline_mcp_settings.json, Typ streamableHttp. { "mcpServers": { "ai-website-ui-kit": { "type": "streamableHttp", "url": "https://ai-website.com/mcp" } } }

• Goose

  Eine Sitzung mit dem Server als Erweiterung. goose session --with-streamable-http-extension "https://ai-website.com/mcp"

npx ai-website mcp init schreibt den lokalen Eintrag in die .mcp.json eines Projekts.