Gemini CLI MCP einrichten: shadcn und echte React-UI

Bitte Gemini CLI um eine Kundentabelle, und es schreibt sie aus dem Gedächtnis: ein schlichtes <table>, einen selbstgebauten Filter, ein Layout, das auf dem Smartphone auseinanderfällt. Ein Gemini CLI MCP Setup mit shadcn behebt das: Der Agent bekommt eine Registry zum Durchsuchen und eine Regeldatei, die ihm sagt, dass er zuerst suchen soll. Dieses Tutorial verbindet Gemini CLI mit dem shadcn-MCP-Server und mit einer Komponentenbibliothek mit Props und ganzen Screens als Blocks (unserer, Wingo UI), über die settings.json oder gemini mcp add. Dazu kommen ein Block in der GEMINI.md und am Ende Prompts, aus denen eine echte Datentabelle und ein Login-Screen werden.

Jede Config unten haben wir am 5. November 2026 mit Gemini CLI 0.67.0, shadcn 4.23.0 und unserer CLI 1.0.4 ausgeführt, in einem frischen Projekt mit eigenem Home-Ordner, und jede mit gemini mcp list geprüft. Die Ausgaben des Modells haben wir nicht bewertet: Was Gemini schreibt, hängt vom Modell und deiner Anmeldung ab. Die Config-Syntax entspricht Googles Doku zu MCP-Servern (opens in a new tab) und der Konfigurationsreferenz (opens in a new tab) vom selben Tag. Warum ein Agent überhaupt einen Server für Komponenten braucht, steht in unserem Guide zu MCP für Komponentenbibliotheken.

Kannst du Gemini CLI im November 2026 noch nutzen?

Ja, mit dem passenden Konto. Laut Googles Ankündigung vom 19. Mai 2026 (opens in a new tab) wechseln Einzelnutzer zu Antigravity CLI: Seit dem 18. Juni 2026 bedient Gemini CLI keine Abonnenten von Google AI Pro und Ultra und keine kostenlosen Nutzer von Gemini Code Assist mehr. Für Gemini Code Assist Standard und Enterprise ändert sich am Zugang nichts, und laut dem Beitrag bleibt Gemini CLI mit bezahlten API-Keys für Gemini und die Gemini Enterprise Agent Platform verfügbar.

Bist du zu Antigravity CLI gewechselt, schau für MCP in dessen eigene Doku: Googles Beitrag sagt dazu nichts, und alles hier unten gilt für Gemini CLI.

Was brauchst du, um Gemini CLI MCP einzurichten?

Zwei Config-Dateien, einen vertrauten Ordner und einen Neustart:

Gemini liest die settings.json beim Start neu ein. In einer Session zeigt /mcp den Status und die Tools jedes Servers, und /memory show gibt den GEMINI.md-Text aus, den Gemini geladen hat.

Wie füge ich den shadcn-MCP-Server zu Gemini CLI hinzu?

Den Gemini CLI shadcn MCP Eintrag schreibst du von Hand. Die MCP-Doku von shadcn (opens in a new tab) nennt für npx shadcn@latest mcp init --client Claude Code, Cursor, VS Code, Codex und OpenCode, Gemini CLI gehört Stand 5. November 2026 nicht dazu. Das JSON hat dieselbe Form wie bei Claude Code und Cursor, mit einer Änderung:

{
  "mcpServers": {
    "shadcn": {
      "command": "npx",
      "args": ["-y", "shadcn@latest", "mcp"]
    }
  }
}

Auf das -y kommt es an. Mit den dokumentierten args von shadcn (["shadcn@latest", "mcp"]) zeigte gemini mcp list in einem Projekt ohne installiertes shadcn ✗ shadcn ... Disconnected: npx hält an und fragt, bevor es ein Paket herunterlädt, und bei einem Server, den Gemini startet, antwortet niemand. Mit -y stand dort Connected. Das eigene mcp init von shadcn umgeht das Problem für seine Clients, indem es shadcn als Dev-Dependency installiert (Quelle (opens in a new tab), geprüft am 5. November 2026). Das kannst du auch selbst tun.

Der shadcn-Server durchsucht die Registries aus deiner components.json und liefert npx shadcn@latest add-Befehle zurück. In unserem Claude Code shadcn Setup kamen keine Props zurück. Für Komponenten mit einer echten API brauchst du deshalb zusätzlich den eigenen Server der Bibliothek.

Wie binde ich eine Komponentenbibliothek über settings.json oder gemini mcp add an?

Unsere CLI schreibt beide Dateien in einem Schritt. Im Projektstamm:

npx wingo-ui@latest login                 # einmal pro Rechner; ein Free-Konto braucht nur eine E-Mail-Adresse
npx wingo-ui@latest agents install gemini

In unserem frischen Testprojekt, ohne Key in der Umgebung, kam diese Ausgabe:

Coding agents (Gemini CLI; MCP over the local stdio proxy)
  created    GEMINI.md
  created    .gemini/settings.json

Für Gemini ist der Projekt-Scope der Standard (--scope user schreibt stattdessen ~/.gemini/settings.json und ~/.gemini/GEMINI.md), und ein zweiter Lauf ändert nichts. Das ist der MCP-Eintrag, den die CLI in die Gemini CLI settings.json schreibt, in beiden Modi:

{
  "mcpServers": {
    "wingo-ui": {
      "command": "npx",
      "args": ["-y", "wingo-ui@latest", "mcp"]
    }
  }
}

{
  "mcpServers": {
    "wingo-ui": {
      "httpUrl": "https://wingo-ui.com/mcp",
      "headers": { "Authorization": "Bearer ${WINGO_UI_API_KEY}" }
    }
  }
}

Der erste startet einen lokalen Proxy, der den von login gespeicherten Key nutzt. Der zweite, den die CLI wählt, wenn WINGO_UI_API_KEY gesetzt ist (oder mit --mcp http), ruft den Server direkt auf. Gemini setzt ${WINGO_UI_API_KEY} beim Laden der Einstellungen aus deiner Umgebung ein. In der Datei steht also nur der Name der Variable, und du kannst sie gefahrlos committen.

Was schreibt gemini mcp add?

Dasselbe, nur über Geminis eigenen Befehl. Der Scope ist standardmäßig project, der Transport stdio:

# Projekt-Scope, stdio-Proxy
gemini mcp add wingo-ui npx -y wingo-ui@latest mcp

# User-Scope, HTTP; einfache Anführungszeichen lassen die Variable in der Datei unaufgelöst
gemini mcp add --scope user --transport http wingo-ui https://wingo-ui.com/mcp \
  -H 'Authorization: Bearer ${WINGO_UI_API_KEY}'

Zwei Details aus unserem Lauf. Die HTTP-Variante hat "url" mit "type": "http" geschrieben statt httpUrl; verbunden haben sich beide. Und mit doppelten Anführungszeichen setzt deine Shell die Variable ein, bevor Gemini sie sieht. Dann steht der Key selbst in der settings.json.

Warum zeigt gemini mcp list Disabled an?

Weil der Ordner nicht vertraut ist. Unser erstes gemini mcp list im neuen Projekt gab Folgendes aus:

Warning: MCP servers are configured but disabled because this folder is untrusted.
User-level servers are also suppressed in untrusted folders to prevent accidental side-effects.

Configured MCP servers:

○ wingo-ui: npx -y wingo-ui@latest mcp (stdio) - Disabled

Achte auf die zweite Zeile: Selbst ein Server aus ~/.gemini/settings.json bleibt in einem nicht vertrauten Ordner aus. gemini mcp add im Projekt-Scope hat gleich ganz abgelehnt, mit „Cannot modify settings in an untrusted workspace“. Vertrau dem Ordner, wenn Gemini beim Start fragt, oder führ in einer Session /permissions aus; die Entscheidung landet in ~/.gemini/trustedFolders.json. Danach:

Configured MCP servers:

✓ wingo-ui: npx -y wingo-ui@latest mcp (stdio) - Connected

Stell dann eine Frage, die nur der Server beantworten kann: „Ruf get_account_status auf dem Server wingo-ui auf.“ Ohne Key antwortet er, dass du anonym bist: Doku, Props und Suche funktionieren, nur Quellcode liefert er nicht.

Was sollte in der GEMINI.md stehen?

Wann Gemini sucht, wie es installiert und welche Tokens es nutzt. Das ist der Block, den agents install geschrieben hat, zwischen Markern, die npx wingo-ui@latest agents update später neu schreibt:

<!-- wingo-ui:start v=3 -->
## Wingo UI

This project builds its UI with Wingo UI (React 19 + Tailwind CSS v4 components installed as source, see `wingo-ui.json`).

- Before writing UI, use the `wingo-ui` MCP tools: `search_components` to find what exists (blocks for whole screens), `get_component` / `get_block` for props and usage, `get_design_rules` for tokens, sizes, motion and mobile rules. Never recreate a component the library has.
- Install with `npx wingo-ui@latest add <slug...>`. At the start of UI work run `check_updates` (or `npx wingo-ui@latest outdated`) and mention updates; update with `npx wingo-ui@latest update`.
- Semantic tokens only (`bg-background`, `bg-surface`, `text-muted-foreground`, `border-border`), configure components through props, keep `cn()`, `data-slot` and license headers in copied files. Check 390px and 1440px, light and dark.
- Never put a card, panel, tile or field on a background of the same or a very similar shade: step the fill (page, `bg-surface`, `bg-foreground/5`). Pages: `PageBackdrop` with a tinted `background` plus bands via `MarketingSection background="muted"`. Border-only designs are the allowed, not recommended exception.
- No MCP tools available? The CLI has `search`, `info`, `add`, `outdated`, `update`; the docs for models are at https://wingo-ui.com/llms.txt.
<!-- wingo-ui:end -->

Laut Googles Doku zur GEMINI.md (opens in a new tab) fügt Gemini ~/.gemini/GEMINI.md, die Dateien in deinem Workspace und seinen übergeordneten Ordnern und die Dateien, die es neben gelesenem Code findet, zusammen und schickt sie mit jedem Prompt mit. Nach einer Änderung liest /memory reload alles neu ein. Hat das Repository schon eine AGENTS.md für Codex, setz "context": { "fileName": ["AGENTS.md", "GEMINI.md"] } in der settings.json und pflege nur eine Regeldatei; eine ausführlichere Vorlage steht in unserem Vergleich AGENTS.md vs. CLAUDE.md.

Laufen beide Server im selben Projekt, ergänz eine Zeile, welche Registry für welchen Ordner zuständig ist: shadcn/ui und unsere Bibliothek installieren beide eine button.tsx mit unterschiedlichen Props, und Gemini muss wissen, welche API es gerade liest.

Mit welchen Prompts baut Gemini CLI UI aus echten Komponenten?

Wenn Gemini CLI UI bauen soll, funktionieren Prompts, die den Screen, die Daten und den gewünschten Bericht nennen. Die Regeln in der GEMINI.md schicken Gemini schon zu search_components, dann zu get_component oder get_block, dann zum Installationsbefehl; der Prompt liefert, was keine Regeldatei kann: Spalten, Routen und Texte. Standardmäßig fragt Gemini vor jedem MCP-Tool-Aufruf nach, obwohl alle 10 Tools unseres Servers nur lesen. Mit "trust": true im Server-Eintrag fallen diese Abfragen weg; die Installationen in der Shell lässt du weiter bestätigen.

Prompt 1: eine Kundentabelle

Bau app/customers mit der Wingo-UI-Datentabelle. Such zuerst und lies ihre Props mit get_component.
Spalten: Name, E-Mail, Status (Active, Trial, Past due) als Badge mit Filter, Plan, MRR mit Summe,
Anmeldedatum. Mehrfachauswahl mit der Massenaktion CSV-Export, ein Schnellfilter für Past due, und
jede Zeile öffnet /customers/<id>. Installier sie mit der CLI und liste alles auf, was du nicht anbinden konntest.

Eine Suche nach „users table with filters“ auf unserem Server führt die Data Table unter den ersten drei, neben einer Mitgliedertabelle und einem Audit-Log, und ihre Props decken jede Zeile dieses Prompts ab. Die Client-Komponente, die wir zurück erwarten, typgeprüft gegen das aktuelle Release:

// app/customers/customers-table.tsx
"use client";

import { useRouter } from "next/navigation";
import { DataTable, createColumns } from "@/components/ui/data-table";

export type Customer = {
  id: string;
  name: string;
  email: string;
  plan: "Free" | "Pro";
  status: "Active" | "Trial" | "Past due";
  mrr: number;
  signedUpAt: string;
};

const col = createColumns<Customer>();
const columns = col([
  col.accessor("name", { header: "Kunde", mobile: "title" }),
  col.accessor("email", { header: "E-Mail", mobile: "subtitle" }),
  col.accessor("status", {
    header: "Status",
    type: "badge",
    badge: { Active: { tone: "success" }, Trial: { tone: "info" }, "Past due": { tone: "danger" } },
    filter: "multi-select",
    mobile: "meta",
  }),
  col.accessor("plan", { header: "Plan", filter: "select" }),
  col.accessor("mrr", { header: "MRR", type: "currency", footer: "sum" }),
  col.accessor("signedUpAt", { header: "Angemeldet am", type: "date" }),
]);

type Props = { customers: Customer[]; onExport: (ids: string[]) => Promise<unknown> };

export function CustomersTable({ customers, onExport }: Props) {
  const router = useRouter();
  return (
    <DataTable
      data={customers}
      columns={columns}
      caption="Kunden"
      locale="en-US"
      selectionMode="multiple"
      bulkActions={(_rows, keys) => [{ label: "Als CSV exportieren", onSelect: () => onExport(keys) }]}
      quickFilters={[{ id: "past-due", label: "Überfällig", columnFilter: { id: "status", value: ["Past due"] } }]}
      onRowClick={(row) => router.push(`/customers/${row.id}`)}
    />
  );
}

Die mobile-Rollen sind der Teil, den ein Modell aus dem Gedächtnis weglässt: Unter 768px wird jede Zeile zu einer Karte mit dem Namen als Titel, und die Auswahl startet mit einem langen Druck.

Prompt 2: ein Login-Screen

Bau /login aus dem Wingo-UI-Block login-page, Card-Layout, Passwort und 6-stelliger E-Mail-Code,
keine Social-Buttons. Schick alles an unsere /api/auth-Routen, geh bei Erfolg zu /dashboard und
ersetze jeden Northwind-String in den Labels durch Harbor. Liste jeden Handler auf, der noch auf seinem Beispiel-Default steht.

Die Login Page bringt Beispiel-Handler mit, damit ihre Demo läuft, und ihre Default-Labels nennen Northwind CRM. Deshalb verlangt der Prompt einen Bericht: Ohne onVerifyCode akzeptiert die Code-Ansicht bei jeder Person den Code 123456. Im Card-Layout ohne Zwei-Faktor-Anmeldung sind appName, signInDescription und copyright die einzigen Northwind-Labels auf dem Screen; der Hero des Split-Layouts bringt heroLabel, customersTitle und das Testimonial dazu, und twoFactor ergänzt twoFactorDescription. Ein gutes Ergebnis:

// app/login/login-screen.tsx
"use client";

import Link from "next/link";
import { useRouter } from "next/navigation";
import { LoginPage, type SignInValues, type VerifyCodeContext } from "@/components/blocks/login-page";

async function post(path: string, body: unknown) {
  const res = await fetch(path, {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(body),
  });
  // die Seite zeigt die Meldung eines abgelehnten Promise in ihrem Fehler-Alert
  if (!res.ok) throw new Error("Das hat nicht geklappt. Prüf deine Angaben und versuch es noch einmal.");
}

export function LoginScreen() {
  const router = useRouter();
  return (
    <LoginPage
      layout="card"
      methods={["password", "otp"]}
      showProviders={false}
      logo={<span className="text-lg font-semibold">Harbor</span>}
      labels={{
        appName: "Harbor",
        signInDescription: "Melde dich bei deinem Harbor-Konto an, um weiterzumachen.",
        copyright: "© 2026 Harbor Inc.",
      }}
      onSignIn={(values: SignInValues) => post("/api/auth/sign-in", values)}
      onSendCode={(email) => post("/api/auth/send-code", { email })}
      onVerifyCode={(code: string, context: VerifyCodeContext) => post("/api/auth/verify-code", { code, ...context })}
      onForgot={(email) => post("/api/auth/forgot", { email })}
      onReset={(password) => post("/api/auth/reset", { password })}
      onSuccess={() => router.push("/dashboard")}
      linkComponent={(props) => <Link {...props} />}
    />
  );
}

Prompt 3: einen selbstgebauten Spinner ersetzen

Finde jeden Button in app/account, der beim Speichern seinen eigenen Spinner rendert, und ersetze ihn
durch den Wingo-UI-Button. Lies zuerst seine Props mit get_component und zeig mir den Diff.

Unser Button hat eine loading-Prop, das Spinner-Markup und das Hin und Her mit disabled fallen also weg:

import { Button } from "@/components/ui/button";

export function SaveButton({ saving, onSave }: { saving: boolean; onSave: () => void }) {
  return (
    <Button tone="brand" loading={saving} loadingText="Wird gespeichert" onClick={onSave}>
      Änderungen speichern
    </Button>
  );
}

Was geht schief, und wie behebe ich es?

• Disabled in gemini mcp list. Der Ordner ist nicht vertraut. Vertrau ihm und ruf die Liste noch einmal auf.
• Disconnected über HTTP. Mit einem erfundenen Key in WINGO_UI_API_KEY hat unser Server die Verbindung abgelehnt, und Gemini zeigte ✗ ... Disconnected. Prüf den Key auf der Seite für API-Keys in deinem Konto oder wechsle mit npx wingo-ui@latest agents install gemini --mcp stdio zum Proxy.
• Connected, aber kein Quellcode. Fehlte die Variable, schickte Gemini ein leeres Bearer-Token und verband sich anonym. Exportier den Key im Shell-Profil des Terminals, das Gemini startet, und starte Gemini neu.
• Disconnected über stdio. Meist wartet npx auf eine Antwort zur Installation: Ergänz -y in den args, wie oben.
• Pro-Blocks mit einem Free-Key. get_block liefert für login-page weiterhin Props und Usage, aber npx wingo-ui@latest add login-page bricht ab, weil der Block zu Pro gehört. Der Button ist kostenlos; Data Table und Login Page gehören zu Pro (8 $ im Monat, 80 $ im Jahr oder einmalig 150 $, siehe Preisseite).
• Servernamen mit Unterstrichen. Gemini benennt Tools als mcp_<server>_<tool>, und laut seiner Doku können Unterstriche im Servernamen den Abgleich mit Policies stören. Lass wingo-ui und shadcn so, wie sie sind.

Wo fange ich am besten an?

Wer Gemini CLI MCP einrichten will, geht so vor: Leg ein Free-Konto an, führ npx wingo-ui@latest agents install gemini in deinem Projekt aus, vertrau dem Ordner und probier Prompt 3 mit dem kostenlosen Button aus. Die Doku zum MCP-Server listet jedes Tool auf, und die Doku zu Coding-Agenten erklärt die Optionen --scope und --mcp. Dasselbe Setup für andere Agenten findest du in unserem Guide Codex MCP einrichten, im Copilot-Setup für VS Code und im Rest von UI mit KI-Agenten bauen.

Häufige Fragen

Funktioniert der shadcn-MCP-Server mit Gemini CLI?

Ja, über einen Eintrag, den du selbst in .gemini/settings.json schreibst. Der Befehl mcp init von shadcn führt Gemini CLI nicht als Client (Stand November 2026), also trägst du den Server unter mcpServers mit command npx und den args -y, shadcn@latest, mcp ein.

Wo speichert Gemini CLI MCP-Server?

Unter mcpServers in einer settings.json: ~/.gemini/settings.json für alle Projekte oder .gemini/settings.json im Projekt. gemini mcp add schreibt standardmäßig in die Projektdatei, mit --scope user in die Datei im Home-Ordner.

Warum zeigt gemini mcp list meinen Server als Disabled an?

Der Ordner ist nicht vertraut. Ist Folder Trust aktiv, ignoriert Gemini CLI in einem nicht vertrauten Ordner die Projekteinstellungen und schaltet auch die Server aus der User-Config ab. Vertrau dem Ordner, wenn Gemini fragt, oder über /permissions, dann verbindet sich der Server.

Kann Gemini CLI in der settings.json einen API-Key aus einer Umgebungsvariable lesen?

Ja. Strings in der settings.json dürfen $VAR oder ${VAR} enthalten, Gemini setzt den Wert beim Laden der Einstellungen ein. Ein Header wie Authorization: Bearer ${WINGO_UI_API_KEY} hält den Key also aus der Datei heraus.

Gibt es Gemini CLI nach dem Wechsel zu Antigravity CLI noch?

Für manche Nutzer. Laut Googles Beitrag vom 19. Mai 2026 bedient Gemini CLI seit dem 18. Juni 2026 keine Nutzer von Google AI Pro und Ultra und keine kostenlosen Code-Assist-Nutzer mehr; mit Code Assist Standard oder Enterprise und mit bezahlten Gemini-API-Keys bleibt es verfügbar.