使用说明
VibeCode MCP Manager
A prototype interface for the question "which MCP servers does this coding task actually need?" — you describe what you're building in plain language, and a Gemini call returns the Model Context Protocol servers required to do it, with its reasoning.
[!IMPORTANT] This is a concept prototype, not a working MCP manager. It does not install, configure, or connect to anything. The server registry is hardcoded, "Install" only flips a flag in React state, and the settings page is not wired to storage. Read What's real and what's mocked before using it for anything.
The idea
Most MCP setup is manual: you decide up front which servers to connect, then hope you picked the right ones. The premise here is that the task should drive the toolset — run a cheap model over the user's intent first, resolve which tools that intent implies, and only then hand the main coding agent a context window containing the right tool definitions.
The app frames this as four steps: intent analysis, MCP recognition, injection into settings, then coding with full context. In the UI's own words it's "Tool Retrieval Augmented Generation" — tool RAG as a preflight pass before the expensive agent runs.
What's real and what's mocked
| Piece | State |
|---|---|
| Intent → required MCP servers | Real. gemini-2.5-flash with a JSON responseSchema, returning thoughtProcess + recommendedMCPIds (services/geminiService.ts) |
| API connection smoke test | Real. Settings → System Status pings the model |
| Server registry | Mocked. 7 hardcoded entries in constants.ts — filesystem, GitHub, Postgres, Brave Search, Maps, Slack, AWS |
| "Install" button | Mocked. Sets installed: true in local state. Nothing is downloaded or configured |
| Settings (auto-update, IDE target, intervals) | Mocked. Rendered from MOCK_USER_SETTINGS; no persistence, no effect |
| "Active in VS Code" indicator | Mocked. This is a Vite web app, not a VS Code extension |
The interesting part — mapping natural-language intent onto a tool set — works. Everything downstream of that decision is a drawing of what would happen next.
Run locally
Requires Node.js and a Gemini API key.
npm install
echo "GEMINI_API_KEY=your_key_here" > .env.local
npm run dev # http://localhost:3000
The How It Works tab renders without a key. AI Analyzer needs one.
[!WARNING]
vite.config.tsinlinesGEMINI_API_KEYinto the client bundle viadefine. That is fine for local development, but it means a deployed build exposes your key to anyone who opens the page. Don't publish a build of this as-is — put the model call behind a server route first.
Stack
React 19 · TypeScript · Vite 6 · Tailwind (CDN) · @google/genai
App.tsx tab shell, install state
components/VisualFlow the four-step explainer
components/Analyzer prompt box, recommendations, install buttons
components/Settings connection test, mock configuration
services/geminiService.ts the one real model call
constants.ts hardcoded registry + mock settings
Status
Unfinished. To become a real tool it would need, roughly in order: a live registry instead of constants.ts, actual writes to the host IDE's MCP configuration, persisted settings, and the model call moved server-side so the key isn't shipped to the browser.
