> ## Documentation Index > Fetch the complete documentation index at: https://docs.neuraldraft.io/llms.txt > Use this file to discover all available pages before exploring further. # MCP overview > Why an MCP server is the centerpiece of Neural Draft, and what `@neuraldraft/mcp` exposes to your AI tools. The Model Context Protocol (MCP) is the missing wire between an AI coding tool and a real backend. Without it, your AI knows what JavaScript looks like but hallucinates your endpoints. With it, your AI knows your project's brand context, your data shapes, your conventions — and uses real tools to make real changes. `@neuraldraft/mcp` is our open-source MCP server. Drop it into Claude Code, Cursor, or Continue and your AI starts generating Neural Draft-native code automatically. No reading the docs. No glue code. ## Why this matters Every AI codegen tool today (Lovable, Claude Code, Cursor, v0, Bolt) is great at generating frontends and bad at integrating with anything that isn't on its training data. The output is usually a beautiful page that calls `/api/some-endpoint-that-doesnt-exist`. MCP fixes that with three primitives. Resources, tools, and prompts — each designed to give the AI just enough live context to be correct without overwhelming the prompt: * **Resources** are read-only context. The AI loads `brand://current` once per session and now knows your colors, fonts, voice, and audience. * **Tools** are functions the AI can call. When it generates a hero section, it calls `register_component(html, intent)` — and the section appears in your admin as editable. * **Prompts** are slash commands the user can invoke. `/scaffold-marketing-site` drops a complete, opinionated, Neural-Draft-native scaffold into the current project. The result is "compliance by default" — every section gets `data-translate` attributes; every page reads brand colors automatically; every API call hits the real Neural Draft endpoint instead of a hallucinated one. ## What `@neuraldraft/mcp` exposes ### Resources | URI | What it is | | ----------------------------- | ------------------------------------------------------------------------- | | `brand://current` | Voice, audience, colors, fonts, industry. Read this before any UI gen. | | `schema://blog-post` | The shape of a blog post — drives the `/blog` page generation. | | `schema://product` | Product/variant shape — drives storefront pages. | | `schema://booking` | Service/booking/availability shape — drives booking widget integration. | | `conventions://editable-html` | The `data-translate` and `data-image-key` rules for editable sections. | | `conventions://api-usage` | REST patterns, auth headers, error shapes — so the AI calls things right. | ### Tools | Name | Purpose | | ------------------------------- | ------------------------------------------------------------------- | | `register_component` | Register a generated HTML section as editable in the project admin. | | `create_translation_keys` | Bulk-create translation key namespaces matching the markup. | | `generate_blog_post` | Kick off the AI blog pipeline; returns a job id. | | `generate_image` | Brand-consistent image generation; returns a URL or job id. | | `connect_social_account` | Returns an OAuth URL for the AI to surface to the user. | | `list_products` / `get_product` | Read storefront state when generating product pages. | | `setup_booking_widget` | Returns the embed snippet for a service. | ### Prompts (slash commands) | Slash command | What it does | | -------------------------- | ------------------------------------------------------------------- | | `/scaffold-marketing-site` | Opinionated full-site scaffold using Neural Draft for everything. | | `/scaffold-blog-page` | Drop a blog index + post page into an existing project. | | `/connect-existing-site` | Point an existing static site at Neural Draft for editability. | | `/add-booking-widget` | Embed a service's booking widget — pick the service, drop the code. | ## How the magic works When a user types "build a marketing hero" in Claude Code with Neural Draft's MCP active, three things happen invisibly: 1. **Context injection** — the AI reads `brand://current` and now uses your actual colors and voice. It reads `conventions://editable-html` and now knows every text element should be `data-translate="..."`. 2. **Tool-driven registration** — the AI generates the hero, then calls `register_component(html, intent)`. The component appears in your admin immediately, with the `data-translate` keys auto-discovered as editable fields. 3. **Brand auto-application** — the AI doesn't need you to say "use our purple" or "match our voice" again. The brand resource is in context for every subsequent section. You never had to ask the AI to do any of that. Most users never realise it happens. ## Open source from day one `@neuraldraft/mcp` is Apache-2.0 licensed and published on [npm](https://www.npmjs.com/package/@neuraldraft/mcp). The package is a thin wrapper around the v1 Project API — same key, same endpoints, same behaviour as if you'd called REST directly. The companion TypeScript SDK is on GitHub at [vbalagovic/neuraldraft-sdk](https://github.com/vbalagovic/neuraldraft-sdk); file MCP bugs there until the standalone repo lands. We maintain both because they're the most important onboarding assets in the platform. ## What about Lovable, v0, Bolt? These hosted codegen tools don't yet support MCP — they're closed-loop. For those environments, we ship a **system-prompt block** ([frameworks/lovable](/frameworks/lovable)) you paste into the build prompt. It teaches the model the same conventions the MCP server enforces. When Lovable/Bolt eventually ship MCP support, we're already there — the server we ship today will work without changes. ## Next steps Wire Claude Code, Cursor, or Continue in 60 seconds. The full surface area, with parameter shapes and example results. The system-prompt block that gives non-MCP clients the same conventions. A ready-made `.cursor/rules` (or CLAUDE.md) for projects that don't run MCP.