Skip to main content

AI & LLM Compatibility

Authoritative guides, machine-readable specifications, Model Context Protocol (MCP) tooling, and rules for AI coding assistants.

AI-First Design Architecture

boodoo is designed to be easily discovered, parsed, and generated with 100% accuracy by modern AI systems (ChatGPT, Claude, Gemini, Cursor, Copilot, Windsurf, Cline). Because boodoo adheres to strict semantic conventions and zero runtime npm dependencies, AI models produce high-quality, hallucination-free code.

Machine-Readable Specs

Native llms.txt, llms-full.txt, and component-index.json served at the domain root for agent context ingestion.

MCP Server

Zero-dependency Model Context Protocol server exposing components, tokens, docs, and code examples directly to IDEs.

Runnable Examples

A library of validated examples for Vanilla JS, React hooks, Vue 3, and React Native that LLMs can accurately replicate.

AI Knowledge Entry Points

AI coding assistants and autonomous agents can ingest the following canonical resources:

Resource URL / Location Purpose
llms.txt /llms.txt Concise framework summary and complete documentation sitemap.
llms-full.txt /llms-full.txt Full technical specification, component reference, modern spacing scale, and guardrails.
component-index.json /docs/ai/component-index.json Machine-readable JSON catalog of 50+ components, classes, and supported platforms.
robots.txt /robots.txt Verified access permissions for GPTBot, ClaudeBot, Google-Extended, PerplexityBot, and CCBot.

Boodoo Model Context Protocol (MCP) Server

The Boodoo repository includes an integrated, zero-dependency MCP server that lets compatible AI agents (Claude Desktop, Cursor, Cline, Windsurf) query authoritative framework data during conversations.

Available Tools

  • search_components: Find Boodoo components by name, feature, or UI category.
  • get_component_docs: Retrieve component specifications, CSS classes, and WCAG accessibility standards.
  • get_component_example: Return runnable code samples across Vanilla JS, React, Vue, or React Native.
  • search_utilities: Search spacing, flexbox, CSS grid, and elevation utilities.
  • get_design_tokens: Access universal color palettes, spacing scales, and border radii.
  • get_installation_guide: Retrieve verified setup instructions for npm, CDN, React, Vue, or React Native.

Connecting in Claude Desktop

{
  "mcpServers": {
    "boodoo": {
      "command": "node",
      "args": ["<PATH_TO_BOODOO>/mcp/server.mjs"]
    }
  }
}

IDE Agent Rules & Instructions

Boodoo maintains native configuration files for all major developer assistants:

  • Cursor: .cursor/rules/boodoo.mdc
  • GitHub Copilot: .github/copilot-instructions.md
  • Anthropic Claude (Claude Code / Projects): CLAUDE.md
  • Google Gemini & Vertex AI: GEMINI.md
  • Windsurf (Cascade): .windsurfrules
  • Cline (VS Code Agent): .clinerules

Rules for AI Code Generators

When prompting an AI assistant or generating code with Boodoo:

  1. Wrap Text Nodes: Text nodes must always be wrapped in semantic text elements (<p>, <span>, <h1>–<h6>, <label>), never placed raw inside layout <div> containers.
  2. Form Control IDs: Every <input>, <select>, or <textarea> must have an id and/or name attribute.
  3. Dynamic Custom Properties: Always use var(--boodoo-primary) and theme tokens rather than hardcoded hex color literals.
  4. React Native StyleSheet Only: Use StyleSheet.create() exclusively and strictly avoid inline style objects (style={{...}}).
  5. Lifecycle Disposal: Call .dispose() when programmatically destroying Modals, Toasts, or Dropzones.