AI Agents

Everything on this site is published in a form an agent can read: raw markdown for every page, an llms.txt index, a single-file llms-full.txt, and a local MCP server that serves the same content as tools. Point your agent at one of them and it can look up a component's real props, events and slots instead of guessing them.

Machine-readable endpoints

llms.txt is the lightest integration — most agents accept a URL or a file to read, and it links to the raw markdown of every page. To pull a single page:

curl https://nuxt-motion-block.pages.dev/raw/components/ai/ai-orb.md

Local MCP server

Nuxt Motion Block ships a local MCP server that runs on your machine via stdio. It exposes two read-only tools:

• list-pages — every documentation page with its title, path and description. Use it to find a page when you don't know its path.
• get-page — the full markdown of a single page, given its path. Use it once you know which page you need.

The tools read the bundled documentation, so they need no network access and match the published version of the module. No Cloudflare or remote server is required.

Setup

Run it with npx — no install needed:

npx nuxt-motion-block-mcp

Or register it in your agent's MCP config.

OpenCode

opencode mcp add nuxt-motion-block -- npx nuxt-motion-block-mcp

That writes the server to the project config; add --global to register it for every project. To configure it by hand, add it under mcp.servers:

{
  "$schema": "https://opencode.ai/config.json",
  "mcp": {
    "servers": {
      "nuxt-motion-block": {
        "type": "local",
        "command": ["npx", "nuxt-motion-block-mcp"]
      }
    }
  }
}

opencode.jsonc works the same way if you prefer to keep comments in the config. Check the connection with opencode mcp list, or run /mcps inside OpenCode.

Claude Code

claude mcp add nuxt-motion-block -- npx nuxt-motion-block-mcp

Cursor

{
  "mcpServers": {
    "nuxt-motion-block": {
      "command": "npx",
      "args": ["nuxt-motion-block-mcp"]
    }
  }
}

VS Code

{
  "servers": {
    "nuxt-motion-block": {
      "type": "stdio",
      "command": "npx",
      "args": ["nuxt-motion-block-mcp"]
    }
  }
}

Other clients

Any client that supports a local (stdio) MCP server can use the same command — Windsurf, Zed and Cline included.

Rules to give your agent

Agents get Nuxt Motion Block wrong in predictable ways: they drop the component prefix, invent props, or hand-write animations the module already ships. Drop this block into AGENTS.md, CLAUDE.md or a Cursor rule so yours doesn't:

## Nuxt Motion Block

Motion components for Nuxt UI, powered by motion-v.
Docs: https://nuxt-motion-block.pages.dev — machine-readable at /llms.txt, or via local MCP (npx nuxt-motion-block-mcp).

- Install with `npx nuxi module add nuxt-motion-block`, then register the modules:
  modules: ['@nuxt/ui', 'motion-v/nuxt', 'nuxt-motion-block']
- Requires Nuxt 4, `@nuxt/ui` >= 4.11.2 and `motion-v` >= 2.4.4.
- Components are auto-imported with an `M` prefix: `<MAnimatedBackground>`, `<MTextGlitch>`,
  `<M3DCard>`, `<MDock>`. Take the exact name from the component's docs page and never
  write an import for it.
- Composables are auto-imported too (`useMotionBlockUI`, `useThemeColor`, `useCanvasCursor`,
  `useFluidCursor`). Import them from `#imports` only if tooling needs it.
- Restyle with the `ui` prop (keyed by slot name) or `class` (merged with conflict
  resolution). Never add CSS resets or `!important`.
- App-wide overrides go in `app.config.ts` under `ui.<camelCaseName>.slots`.
- Before using a component, read its page: `/raw/components/<category>/<name>.md`
  (or MCP `get-page`). Do not invent props, events or slots.

Common pitfalls

Dropping the prefix. <AnimatedBackground> and <TextGlitch> are not registered — the module only registers M-prefixed names (<MAnimatedBackground>, <MTextGlitch>). The prefix is configurable, so read it from the project's nuxt.config.ts rather than assuming M.

Importing components by hand. The package exports its module, themes, types and composables — not .vue files. A manual import { AnimatedBackground } from 'nuxt-motion-block' will not resolve; the components are registered for you.

Inventing the API. Every component page lists its own props, events, slots and theme slots, and those are what the raw markdown returns. Guessing a prop name is the most common source of broken output.

Version drift on Nuxt UI. The components extend Nuxt UI v4 themes. On an older @nuxt/ui the themes and CSS variables won't resolve, so pin >= 4.11.2.

Hardcoding theme colours. Components that paint to canvas or WebGL accept Nuxt UI tokens (var(--ui-primary), --ui-text-dimmed) and resolve them for the current colour mode. A hardcoded hex will not follow the theme — see Theming.

Fighting the style layer. Use the ui prop for a specific inner element and class for quick tweaks; both merge with the component's defaults by conflict resolution. Resets and !important break that merge.

Verifying generated code

Ask the agent to run the project after generating code. A wrong component name fails at compile time with an unresolved-component warning, and a wrong prop shows up as a Vue warning in the console — both are cheap to catch in a local nuxi dev before anything ships.