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 an 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

MCP server

The docs expose an MCP server at https://nuxt-motion-block.pages.dev/mcp, over streamable HTTP. It ships two read-only tools:

• list-pages — every documentation page with its title, path, description and URL. 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 published documentation, so they need no repository checkout and match the deployed version of the module.

Claude Code

claude mcp add --transport http nuxt-motion-block https://nuxt-motion-block.pages.dev/mcp

Cursor

{
  "mcpServers": {
    "nuxt-motion-block": {
      "type": "http",
      "url": "https://nuxt-motion-block.pages.dev/mcp"
    }
  }
}

You can also use the Add MCP Server action in the page header's copy menu, which opens Cursor with this configuration prefilled.

VS Code

{
  "servers": {
    "nuxt-motion-block": {
      "type": "http",
      "url": "https://nuxt-motion-block.pages.dev/mcp"
    }
  }
}

OpenCode

opencode mcp add nuxt-motion-block --url https://nuxt-motion-block.pages.dev/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": "remote",
        "url": "https://nuxt-motion-block.pages.dev/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.

Other clients

Any client that supports a remote (streamable HTTP) MCP server can use the same URL — Windsurf, Zed and Cline included. The server card describes the endpoint, and the OpenAPI document lists every route the site serves to agents.

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 MCP at /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.