How to use Rayden AI with your coding assistant

What is Rayden AI?

Rayden AI is the @raydenui/ai companion package for Rayden UI. It gives compatible coding assistants access to component contracts, import paths, design-token references, and layout recipes through the Model Context Protocol (MCP). Your assistant can look up the library’s API before proposing code.

The MCP server supplies reference information and component-usage checks. Your coding assistant handles the conversation and any edits to your project. The @raydenui/ui package remains the library that renders your React interface.

This guide was checked against published Rayden AI 0.1.5, whose catalog describes Rayden UI 0.10.1 and the Citrionus flavor. It includes a tested example of catching and correcting an unsupported Button size.

01. Connect your coding assistant

You need Node.js and npm available to your assistant, plus a client that can launch local stdio MCP servers. Use a current supported Node.js LTS release. No Rayden API key is required; your chosen AI client has its own account and model requirements.

Check that the published executable starts by running:

npx -y @raydenui/ai@0.1.5 --help
npx -y @raydenui/ai@0.1.5 --version

The version command should print 0.1.5. The -y flag lets npm install the package without a prompt. This guide pins a release so the examples stay reproducible; use @latest when you intentionally want the newest published reference.

Cursor

Create or update .cursor/mcp.json in your project. If it already contains servers, merge the rayden entry into its existing mcpServers object.

{
  "mcpServers": {
    "rayden": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "@raydenui/ai@0.1.5"
      ]
    }
  }
}

Open Cursor’s MCP settings, enable the server, and check that its tools appear. This uses Cursor’s project-level MCP configuration.

Claude Code

From your project directory, add the same server using Claude Code’s CLI:

claude mcp add --transport stdio rayden -- npx -y @raydenui/ai@0.1.5
claude mcp get rayden

In a Claude Code session, use /mcp to check its connection. The command above uses the default local scope. See Claude Code’s MCP guide for shared project configuration and client-specific troubleshooting.

02. Discover before you generate

Start with a small request that proves the assistant can use the tools. Paste this into your connected assistant:

Use the Rayden MCP tools before writing code.
1. Call get_catalog and report the reference UI and AI versions.
2. Compare the UI reference with my project's installed @raydenui/ui version.
3. Discover the available components with get_components.
4. Inspect Button and Input with get_component_props and get_component_guidance.
Tell me which imports and props you will use. Flag any version mismatch.

Look for actual tool calls in the assistant’s activity. A useful response identifies the reference versions, the real component exports, and their supported props. A generic explanation of Rayden without tool calls does not confirm that the connection works.

The catalog is a versioned snapshot. It does not read your project’s installed packages. Ask the assistant to compare the returned uiVersion with your app’s dependency version before applying the guidance. get_catalog can take an exact uiVersion; an unsupported version returns an error.

03. Catch an unsupported prop

A model might assume every library has a medium button. In the tested Rayden reference, Button’s supported sizes are sm and lg. Ask your assistant to call validate_component_usage with:

{
  "component": "Button",
  "props": {
    "size": "md"
  }
}

The result contains valid: false and this error:

Button.size expects ButtonSize | undefined (sm, lg).

Correct the size, then validate again:

{
  "component": "Button",
  "props": {
    "size": "sm",
    "variant": "primary"
  }
}

This call returns valid: true with no errors for the assessed props. It is still necessary to test the rendered component: the response’s notAssessed field explains checks outside the validator’s scope, including runtime accessibility and event behaviour.

04. Turn the reference into a working UI

Give the assistant a concrete task, the framework context, and an explicit check to perform. For a small Next.js form, try:

Build a small profile form in my Next.js App Router project using Rayden UI.
First inspect the existing app and the Rayden guidance for Button and Input.
Use a labelled display-name input, a save button, and a status message.
Keep interactive state in a Client Component and import Rayden styles once.
Validate the proposed component props with validate_component_usage.
Use in-memory demo state only and say clearly that it resets on reload.
After implementation, run the build and check keyboard interaction.

The companion does not install the UI package into your app. If your project needs Rayden, install a release that matches the reference and import @raydenui/ui/styles.css once in your app entry point or root layout. Our Next.js guide includes a complete, downloadable form you can use alongside this prompt.

Two more prompts to try

Review my existing Rayden components. Inspect their exact exports and props with the MCP tools. Validate each proposed prop correction, explain any version mismatch, and keep unrelated code unchanged. Report runtime checks that still need testing.

Use get_layout_recipes to discover available layouts for a settings screen. Inspect the components and design-token references used by the closest recipe. Propose a composition using supported exports, and identify any app-specific state or backend logic I still need to implement.

What tools does Rayden AI provide?

Tool availability and reference data may change between releases. Discover the connected server’s tools instead of assuming that every feature in a repository checkout is published.

Common questions

The terminal is waiting. Is the server broken?

Running the command without --help or --version starts a stdio server that waits for MCP messages. Let your client launch that process. It does not open a website or listen on an HTTP port.

Why can’t my assistant see the tools?

Check that Node.js and npx are available in the environment used by the client, that the JSON is valid, and that the server is enabled. Try the help command in that environment, inspect the client’s server log, and reconnect after changing the configuration.

Does validation guarantee correct code?

No. It checks supported names, required props, enum values, primitive types, inherited attributes, and supported immediate composition constraints. It does not certify a whole React application, callback behaviour, or accessibility in the browser. Review errors, warnings, and notAssessed, then run your app’s normal checks.

Can Rayden AI edit Figma?

The package includes component anatomy and design references, but its MCP server does not control Figma. A design workflow needs separately available Figma tools. Token reference data also does not represent every runtime dark-mode override.

Can I use the reference without MCP?

Yes. The package exposes a JavaScript API, including getCatalog, getComponentGuidance, and validateComponentUsage. The package README documents those imports. The docs also publish an agent index and component catalog; check their stated reference versions.