Zum Inhalt springen
UI Kit
Accent
MCP-Server für CursorAnysphere · Editor mit Agent-Chat

Websites mit Cursor bauen, über MCP

Ein Klick auf den Installationsknopf oder eine Zeile in mcp.json. Danach baut dein Assistent mit 350 Components des UI Kit.

Zu Cursor hinzufügenKonfiguration kopieren

Adresse des Servers

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

Was Cursor mit dem UI Kit kann

Cursor installiert den MCP-Server des UI Kit mit einem Klick. Der Knopf unten öffnet Cursor mit fertig ausgefülltem Eintrag, du bestätigst, und der Agent im Chat sucht unter 350 Components, liest ihren Code und plant die Seiten deines Projekts.

Im Editor zahlt sich das Kit doppelt aus. Der Agent schreibt Components, die er bis zu jeder Prop kennt, und übernimmt Plan, Texthinweise und Prüfliste direkt in die Dateien deines Projekts, Seite für Seite.

Der Server liest nur und braucht keinen Schlüssel. Soll der Agent Components selbst ins Projekt installieren, trägst du den lokalen Server der aiw CLI als zweiten Eintrag ein, er schreibt mit deiner Freigabe.

  • Schreibt die Components direkt in die Dateien deines Projekts
  • Liest mit get_component Props und Code, bevor er eine Seite ändert
  • Folgt get_install_steps für Astro, Next.js oder Vite

Einrichtung

Cursor 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, Klick auf Zu Cursor hinzufügen

    Der Knopf öffnet Cursor mit fertig eingetragenem Server. Bestätige mit Install, und der Eintrag gilt für alle Projekte.

  2. Schritt 2, Oder schreib die Datei

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

  3. Schritt 3, Achte auf den grünen Punkt

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

Konfiguration

Fertig zum Kopieren

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

~/.cursor/mcp.json oder .cursor/mcp.json
{  "mcpServers": {    "ai-website-ui-kit": {      "url": "https://ai-website.com/mcp"    }  }}

Beispiel-Prompts

Probier es in Cursor 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.

Ablauf

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.

Ablauf

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.

Ablauf

Werkzeuge

Was Cursor aufrufen kann

Cursor 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

  • Trag den lokalen Server der aiw CLI als zweiten Eintrag ein, dann installiert der Agent Components mit aiw_add.
  • Schreib „nutze das UI Kit“ in deine Projektregeln, dann fragt der Agent das Kit, bevor er Markup schreibt.
  • Nutze den Agent-Modus, der einfache Chat ruft keine MCP-Werkzeuge auf.

Wenn es hakt

Der Installationsknopf tut nichts
Der Link braucht die Cursor-App auf diesem Rechner. Ohne sie kopierst du das JSON in ~/.cursor/mcp.json.
Der Punkt bleibt rot
Prüf, ob der Schlüssel url heißt und die Adresse ohne Schrägstrich auf /mcp endet. Speichere die Datei und schalte den Server aus und wieder an.
Der Agent ignoriert die Werkzeuge
Stell sicher, dass der Chat im Agent-Modus läuft und die Werkzeuge des Servers unter Settings, MCP aktiv sind.

FAQ

Fragen zu Cursor

Zur Übersicht des MCP-Servers
Global oder pro Projekt?

Beides geht. ~/.cursor/mcp.json macht das Kit überall verfügbar, .cursor/mcp.json nur in einem Projekt, und die Datei wandert mit dem Repository.

Kann der Server Dateien in mein Projekt schreiben?

Der öffentliche Server liest nur. Dein Assistent schreibt die Dateien selbst, oder du trägst den lokalen Server der aiw CLI mit npx -y ai-website mcp ein, der Components mit deiner Freigabe installiert.

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 Cursor

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

Zu Cursor hinzufügenAlle Components

Oft gesucht

Direkt zu

In die Zwischenablage kopiert