Build React Native UI with an Agent

Connect your agent to the Native Animation MCP using the configuration below. The server runs locally over stdio; your client starts it. Requires Node.js 20 or later. Base needs no account.

Connect your client

Claude Code

claude mcp add nativeanimation -- npx -y nativeanimation@latest mcp

Cursor

Add to .cursor/mcp.json:

{
  "mcpServers": {
    "nativeanimation": {
      "command": "npx",
      "args": [
        "-y",
        "nativeanimation@latest",
        "mcp"
      ]
    }
  }
}

Codex

codex mcp add nativeanimation -- npx -y nativeanimation@latest mcp

VS Code

Add to .vscode/mcp.json:

{
  "servers": {
    "nativeanimation": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "nativeanimation@latest",
        "mcp"
      ]
    }
  }
}

Describe the result

Copy this brief, then adapt the screens and behavior to your project:

Build a habit tracker app with Native Animation Base. Create Today, Progress, and Settings screens with one shared theme, the Quill accent, light and dark modes, and purposeful spring motion. Use the Native Animation MCP, read the Base design guide and each component’s real props, and connect navigation, state, and callbacks. Keep it free and MIT.

Use the MCP prompt build-app-with-base with a required description and optional scheme (system, light, dark). If your client does not expose prompts, paste the brief directly. After setup, choose a named accent (quill, tide, grove, bloom, cove, kiln) in BaseThemeProvider or createBaseTheme.

Read the design guide

Ask the agent to read nativeanimation://base/guide, or open the Base design guide as Markdown. It covers root setup, typography, composition, motion, forms, accessibility, and testing.

Set up the shared foundation

Ask the agent to call setup_base with your project root and scheme. It returns the installation plan and layout diff first. Review those changes before the agent applies them with apply: true. Existing customized themes are preserved.

Use project_root for the absolute project path when the MCP server starts in a different directory. Missing native packages are reported in the plan; set install_dependencies: true to run Expo’s compatible installer, or run the returned command yourself.

Compose the app

Use list_family to discover Base components and get_piece to read real exports, props, and examples. Use add_piece to install a component and its transitive source dependencies for your project’s Expo SDK. list_blocks discovers complete screen blocks; an empty result means none are published yet.

Keep one theme across screens. Connect navigation, state, and callbacks. Add meaningful loading, empty, error, disabled, and success states. Review touch targets, keyboard behavior, accessibility, and motion on real devices.

Keep the scope yours

Base remains free and MIT. Ask for premium catalog pieces only when you want a more expressive interaction. Other catalog pieces keep their existing account and access requirements.

MCP reference · Installation without an agent