Zum Inhalt springen
UI Kit
Accent
MCP-Server für ClaudeAnthropic · Web, Desktop, Cowork und Claude Code

Websites mit Claude bauen, über MCP

Ein eigener Connector in den Einstellungen oder ein Command für Claude Code. Danach baut dein Assistent mit 350 Components des UI Kit.

Zur EinrichtungKonfiguration kopieren

Adresse des Servers

https://ai-website.com/mcp
  • Streamable HTTP, ohne Anmeldung
  • 14 Werkzeuge, alle nur lesend
  • Kostenlos, Components unter MIT

Was Claude mit dem UI Kit kann

Claude verbindet sich mit dem UI Kit als eigener Connector. Du trägst einmal eine Adresse in den Einstellungen ein, und ab dann sucht Claude unter 350 Components, liest ihren Code, plant eine ganze Website und prüft eine fertige Seite, in der Web-App, in der Desktop-App und in Cowork.

Claude Code bekommt denselben Server mit einem Command im Terminal. Dort hilft das Kit bei dem, was Claude Code am besten kann, die Seite in dein Projekt schreiben, mit Components, die es bis zu jeder Prop versteht.

Die Verbindung liest nur und braucht kein Konto bei ai-website.com. Claude ruft den Server von den Servern von Anthropic aus auf, auf deinem Rechner muss also nichts laufen, und deine Gespräche bleiben bei Claude.

  • Plant mit plan_website eine ganze Website in einer Antwort und macht daraus Seiten
  • Baut Artifacts aus echten Kit-Components und ihren Props
  • Schreibt die Seiten in Claude Code in dein Projekt, mit denselben Werkzeugnamen

Einrichtung

Claude in 3 Schritten verbinden

Die Bilder zeigen, wo du klickst. Namen von Menüs können sich mit neuen Versionen leicht ändern, der Weg bleibt derselbe.

  1. Schritt 1, Öffne die Connectors

    Ö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. Schritt 2, Füge einen eigenen Connector hinzu

    Gib ihm den Namen UI Kit by ai-website.com, füge die Adresse ein und lass die Anmeldung leer. Der Server braucht keine.

  3. Schritt 3, Schalte ihn im Chat ein

    Ö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.

Konfiguration

Fertig zum Kopieren

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

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

Beispiel-Prompts

Probier es in Claude aus

Kopier einen Prompt, setz deine eigenen Fakten ein und schick ihn ab. Gute Prompts nennen Ziel, Inhalte und Sprache.

Eine Landingpage mit KI bauen

Nutze das UI Kit von ai-website.com. Bau eine Landingpage für Nordlicht Yoga, ein kleines Studio in Bremen, das im Januar einen Anfängerkurs startet. Ziel sind Anmeldungen für eine kostenlose Probestunde. Plane zuerst die Sections, nimm dann Components und Varianten aus dem Kit, schreib alle Texte auf Deutsch und prüf die Seite am Ende mit review_page.

In Claude öffnenAblauf

Eine ganze Website mit KI neu aufsetzen

Nutze das UI Kit von ai-website.com. Plane einen Relaunch der Website der Tischlerei Hansen, einer Tischlerei in Kiel mit acht Leuten. Seiten für Start, Leistungen, Projekte, Über uns und Kontakt. Nutze plan_website mit dem Bauplan für Handwerk, gib jeder Seite Titel und Beschreibung, wähle für jede Section Component und Variante und nenn mir den Installationsbefehl. Texte auf Deutsch.

In Claude öffnenAblauf

Eine Section mit KI neu gestalten

Nutze das UI Kit von ai-website.com. Unsere Pricing-Section zeigt drei Pläne in schlichten Kästen, und kaum jemand klickt. Vergleiche die Varianten der Pricing-Component, wähle die, die am besten zu Monats- und Jahrespreisen passt, behalte unsere Preise und Texte und gib mir den neuen Code. Sag mir, warum du sie gewählt hast.

In Claude öffnenAblauf

Werkzeuge

Was Claude aufrufen kann

Claude wählt die Werkzeuge selbst. Alle vierzehn lesen nur.

Finden

  • search_componentsFindet Components nach englischen oder deutschen Wörtern, gefiltert nach Kategorie und Gruppe.
  • list_categoriesGruppen und Kategorien mit Namen der Components und Zahl der Varianten.
  • searchDurchsucht Components, Baupläne, Leitfäden und Doku in der Form, die ChatGPT erwartet.
  • fetchHolt ein Ergebnis von search vollständig.

Bauen

  • get_componentBeschreibung, Varianten, Props, Barrierefreiheit, Abhängigkeiten und der Installationsbefehl.
  • get_component_codeDie Quelldatei mit Lizenzkopf, bei langen Dateien in Teilen.
  • get_variantFertiger Code einer Variante mit realistischen Props auf Deutsch oder Englisch.
  • get_themeTokens für hell und dunkel, sieben Akzente, Radius und Schriftskala.
  • get_install_stepsSchritte für Astro, Next.js oder Vite mit npm, pnpm oder bun, bis zur ersten Seite.
  • get_docsEine Seite der Doku als Markdown oder die Liste der Seiten.

Planen

  • plan_websiteEin kompletter Plan aus einem Briefing, Seiten, SEO-Felder, Sections mit Component, Variante und Texthinweisen.
  • get_blueprintBaupläne für 23 Arten von Websites, von der Bäckerei bis SaaS.

Prüfen

  • review_pageEine Prüfliste für eine fertige Seite nach Seitentyp und Bereich.
  • get_guidelinesLeitfäden zu Aufbau, Conversion, Text, Design, Barrierefreiheit, SEO, Tempo, Formularen und Recht.

Tipps

  • Starte mit dem Prompt build_website, Claude bietet ihn im Plus-Menü des Chats an, sobald der Connector an ist.
  • Bitte um deutsche oder englische Texte, das Kit antwortet in beiden Sprachen.
  • Trag in Claude Code auch den lokalen Server ein, dann landen Components mit einer Freigabe im Projekt.

Wenn es hakt

Der Connector erscheint nicht im Chat
Öffne das Werkzeugmenü eines neuen Chats und schalte ihn dort ein. In bestehenden Chats sind Connectors zuerst aus.
Ich kann keinen eigenen Connector hinzufügen
In einer Team- oder Enterprise-Organisation fügen nur Owner eigene Connectors hinzu. Bitte einen Owner, ihn in den Organisationseinstellungen einzutragen.
Claude Code zeigt den Server als fehlgeschlagen
Prüf, ob der Command --transport http enthält. Ohne das versucht Claude Code, die Adresse als Programm zu starten.

FAQ

Fragen zu Claude

Zur Übersicht des MCP-Servers
Funktioniert es im kostenlosen Plan von Claude?

Eigene Connectors hängen von deinem Plan bei Anthropic ab. Wo dein Plan sie anbietet, funktioniert das UI Kit wie jeder andere Connector, und Claude Code funktioniert mit jedem Plan, der es enthält.

Brauche ich dafür Claude Desktop?

Nein. Der Connector läuft auf den Servern von Anthropic, er funktioniert also in der Web-App, in der Desktop-App und in Cowork gleich.

Sieht der Server meinen Code oder meine Chats?

Nein. Dein Assistent schickt nur die Frage, die er dem Kit stellt, etwa die Suche nach einer Pricing-Section. Der Server antwortet und speichert nichts aus der Anfrage.

Was kostet der MCP-Server?

Nichts. Server, Components und CLI sind kostenlos, der Code steht unter der MIT-Lizenz. Du zahlst nur den KI-Assistenten, den du ohnehin nutzt.

Andere Clients

Dasselbe Kit in jeder KI

Eine Adresse, viele Assistenten. Such dir den nächsten aus oder richte dein ganzes Team ein.

Bau deine nächste Website mit Claude

Einmal verbinden, dann reicht ein Satz über dein Geschäft.

Jetzt einrichtenAlle Components

Oft gesucht

Direkt zu

In die Zwischenablage kopiert