Zum Inhalt springen
UI Kit
Accent
MCP-Server für VS CodeGitHub Copilot, Microsoft · Copilot im Agent-Modus

Websites mit GitHub Copilot bauen, über MCP

Der Befehl MCP Add Server, eine Zeile in mcp.json oder ein Command im Terminal. 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 VS Code mit dem UI Kit kann

GitHub Copilot in VS Code nutzt MCP-Server im Agent-Modus. Trag das UI Kit einmal ein, über den Befehl MCP Add Server, eine Zeile in mcp.json oder einen Command im Terminal, und Copilot sucht unter 350 Components, liest ihren Code und plant deine Seiten.

Copilot arbeitet dann mit echten Bausteinen, statt Markup zu raten. Es liest die Props einer Component, bevor es sie schreibt, folgt dem Bauplan für deine Art von Website und prüft die fertige Seite mit der Prüfliste des Kits.

Der Server liest nur und fragt nach keiner Anmeldung. Dein Workspace bleibt auf deinem Rechner, Copilot schickt nur die Fragen an das Kit, etwa die Suche nach einer Pricing-Section.

  • Baut im Agent-Modus Seiten über viele Dateien
  • Prüft eine fertige Seite mit review_page und behebt, was es findet
  • Übernimmt mit get_theme die Theme-Tokens in dein CSS

Einrichtung

VS Code 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, Starte MCP Add Server

    Öffne die Befehlspalette mit Strg Umschalt P, auf dem Mac mit Cmd Umschalt P, und starte MCP: Add Server.

  2. Schritt 2, Wähle HTTP und füge die Adresse ein

    Wä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. Schritt 3, Nutze ihn im Agent-Modus

    Stell den Copilot-Chat auf Agent. Der Tools-Knopf listet die Werkzeuge des UI Kit, und Copilot ruft sie beim Arbeiten auf.

Konfiguration

Fertig zum Kopieren

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

{  "servers": {    "ai-website-ui-kit": {      "type": "http",      "url": "https://ai-website.com/mcp"    }  }}

Schreibt den Eintrag in dein Benutzerprofil.

Beispiel-Prompts

Probier es in VS Code 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 VS Code aufrufen kann

VS Code 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

  • Der Schlüssel in .vscode/mcp.json heißt servers, nicht mcpServers. Portable Dateien wie .mcp.json nutzen mcpServers.
  • Leg .vscode/mcp.json ins Repository, und das ganze Team hat das Kit.
  • Nenn die Variante, etwa hero split, dann holt Copilot genau die mit get_variant.

Wenn es hakt

Die Werkzeuge erscheinen nicht
Stell den Chat von Ask oder Edit auf Agent. Nur der Agent-Modus ruft MCP-Werkzeuge auf.
VS Code fragt, ob es dem Server vertrauen soll
Das ist beim ersten Mal so gedacht. Der Server liest nur, bestätige, und er startet.
Der Server zeigt einen Fehler
Prüf, ob type http ist und der Schlüssel servers heißt. Starte ihn dann über MCP: List Servers neu.

FAQ

Fragen zu VS Code

Zur Übersicht des MCP-Servers
Funktioniert es mit anderen Copilot-Plänen?

MCP-Werkzeuge laufen im Agent-Modus, wo dein Plan ihn enthält. In einer Organisation kann ein Admin MCP für alle ein- oder ausschalten.

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 VS Code

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

Jetzt einrichtenAlle Components

Oft gesucht

Direkt zu

In die Zwischenablage kopiert