> ## 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.

# Cursor & Claude Code

> A `.cursor/rules` and a `CLAUDE.md` template that turns any project into a Neural Draft-aware codebase.

If you're using Cursor or Claude Code with [`@neuraldraft/mcp`](/mcp/setup)
installed, this isn't strictly necessary — the MCP server already injects the
right conventions. But MCP works best paired with project-level rules so the
AI has the context even when MCP isn't reachable (offline, rate-limited,
exploring a side branch).

Drop one of the templates below into your repo. Both Cursor and Claude Code
read project-level instructions before answering — these become the model's
defaults.

## `CLAUDE.md` (Claude Code)

Save this at your repo root as `CLAUDE.md`. Claude Code reads it
automatically.

```md filename="CLAUDE.md" theme={null}
# Neural Draft project rules

This codebase is a frontend whose backend is **Neural Draft**. Treat Neural
Draft as the source of truth for content (CMS), blog, social posts, bookings
and commerce — never persist those domains to your own database.

## Stack

- Frontend: {Next.js / Astro / Nuxt / vanilla} (delete the others)
- Backend: Neural Draft v1 Project API
- SDK: `@neuraldraft/sdk` for server-side calls
- MCP: `@neuraldraft/mcp` for editor-time codegen
- Webhooks: `app/api/neural-draft` (or framework equivalent) — HMAC verified

## Conventions (always follow)

1. Every visible text node gets `data-translate="<key>"`. Keys are
   dot-namespaced and lowercase (e.g. `hero.headline`,
   `pricing.tiers.0.name`).
2. Every `<img>` gets `data-image-key="<key>"` and a real `alt`. The CMS
   resolves the URL at build time.
3. Server-side reads use `@neuraldraft/sdk` with the env var
   `NEURALDRAFT_API_KEY`. Never put the key in browser code.
4. Public reads from the browser (e.g. product catalogue) use the
   `/v1/public/*` endpoints with `?project_id=...` — never the authenticated
   endpoints.
5. Webhook receivers must read the **raw** body and verify the HMAC. Use
   the helpers in `lib/neural-draft.ts` (or generate one matching the language
   we're in).

## Where things live

- `lib/neural-draft.ts` — shared client and webhook verifier.
- `app/blog/page.tsx` and `app/blog/[slug]/page.tsx` — blog index and detail.
- `app/api/neural-draft/route.ts` — webhook receiver.
- `components/` — UI components, all annotated with `data-translate` /
  `data-image-key`.

## Brand context

Brand voice, colors, fonts and audience live in Neural Draft and can be
fetched by calling `GET /v1/brand`. Mirror them into Tailwind config or CSS
variables at build time. The MCP server's `brand://current` resource is the
canonical source while you're coding.

## API reference

Full spec: https://docs.neuraldraft.io/api-reference.

When adding a new feature:

1. Find the endpoint in the API reference.
2. Use the SDK's typed wrapper (preferred) or `fetch` (fallback).
3. Add the necessary scope to the API key the project uses.
4. If the endpoint emits webhooks (e.g. `order.paid`), wire them in
   `app/api/neural-draft/route.ts`.

## Don't

- Don't hard-code translatable text — use `data-translate`.
- Don't expose `ndsk_live_*` keys to the browser.
- Don't call private (`/v1/...`) endpoints from the browser.
- Don't store Neural Draft entities (posts, products, bookings) in a local
  database. The frontend is a thin client.
- Don't generate inline migrations for Neural Draft entities. The backend is
  managed.
```

## `.cursor/rules` (Cursor)

Cursor reads `.cursor/rules/*.md` files. Create
`.cursor/rules/neural-draft.md` with the same content as the `CLAUDE.md`
above. Cursor's rules system uses YAML frontmatter for scoping; here's the
opinionated default:

```md filename=".cursor/rules/neural-draft.md" theme={null}
---
description: Neural Draft project conventions (CMS, blog, social, booking, commerce)
globs:
  - "**/*.{ts,tsx,js,jsx,vue,astro,html,php}"
alwaysApply: true
---

# Neural Draft project rules

(Same content as the `CLAUDE.md` template above.)
```

## Why both Cursor and Claude Code?

Different tools read different files. Some teams use both. Drop both:

* `CLAUDE.md` at the repo root.
* `.cursor/rules/neural-draft.md` for Cursor users.
* `@neuraldraft/mcp` configured per [MCP setup](/mcp/setup) for live tool
  access.

The combination is what gets you "the AI just generates Neural Draft-native
code without you reminding it" reliably across editors.

## Pairing rules with the MCP server

The MCP server injects a system prompt at runtime, but it's terse — the kind
of thing the model sees once at handshake. Project-level rules, by contrast,
are scoped to **this project**: tech stack, file layout, brand specifics. They
complement each other.

When the model thinks "where do I put the webhook handler?", it asks the
project rules. When it thinks "what's the latest brand voice?", it queries
`brand://current` via MCP. That's the split.

## Working example — full SDK + MCP loop

A complete, copy-paste working scaffold for a Next.js project — wired to
SDK 0.3.0 and the Neural Draft MCP server.

```ts filename="lib/neural-draft.ts" theme={null}
import { NeuralDraftClient } from "@neuraldraft/sdk";

if (!process.env.NEURALDRAFT_API_KEY) {
  throw new Error("Missing NEURALDRAFT_API_KEY");
}

export const nd = new NeuralDraftClient({
  apiKey: process.env.NEURALDRAFT_API_KEY,
});
```

```ts filename="app/page.tsx (server component)" theme={null}
import { nd } from "@/lib/neural-draft";

export async function generateMetadata() {
  const home = await nd.pages.get("home");
  return {
    title: home.meta_title ?? home.title,
    description: home.meta_description ?? undefined,
    openGraph: {
      title: home.og_title ?? home.meta_title ?? home.title,
      description: home.og_description ?? home.meta_description ?? undefined,
      images: home.og_image ? [home.og_image] : undefined,
    },
    alternates: home.canonical_url ? { canonical: home.canonical_url } : undefined,
  };
}

export default async function Home() {
  const brand = await nd.brand.get();
  return (
    <main style={{ background: brand.colors?.primary?.hex }}>
      <h1 data-translate="home.headline">Welcome</h1>
      <p data-translate="home.subhead">Built with Neural Draft.</p>
    </main>
  );
}
```

Now ask Claude Code (or Cursor with MCP enabled):

> *"Read `brand://current` and `conventions://editable-html`. Generate a
> three-tier pricing section with index-aware `data-translate` keys
> (`pricing.tiers.0.name`, `.price`, `.description`, etc.). Then call
> `register_component` with the rendered HTML and `intent='pricing tiers
> for the home page'` so the customer can edit each tier in the admin."*

The MCP server reads brand for you, returns conventions, and exposes
`register_component` as a tool — the model wires the rest.