AI-Assisted Development - RapidRails UI Documentation

What is llms.txt?

llms.txt is a standardized documentation file that helps AI language models (Claude, ChatGPT, etc.) understand how to use RapidRails UI components correctly.

It contains:

Component reference with all 30+ components
Correct syntax and argument order
Color system and styling patterns
Form builder integration examples
Critical constraints and gotchas
Common usage patterns

Without llms.txt, AI tools often guess at syntax and may generate incorrect code. With it, they generate code that's accurate, follows Rails conventions, and uses proper RapidRails UI patterns.

Quick Start

The simplest approach: Point your AI tool to the llms.txt URL

llms.txt URLs

Navigation version: https://rapidrails.cc/llms.txt

Complete version: https://rapidrails.cc/llms-full.txt

Once you reference this URL, your AI tool will have complete knowledge of RapidRails UI and can generate correct code.

Using with Cursor IDE

Setup Instructions

Open Cursor IDE in your project
Click the @ symbol in the chat
Select @docs or Add docs
Paste: https://rapidrails.cc/llms.txt
Hit enter to add it to the conversation

Example Prompts

Cursor Chat with RapidRails UI

@docs

Create a pricing table with 3 tiers (Starter, Pro, Enterprise)
using RapidRails UI. Include prices, feature lists, and a CTA button.

Cursor will use the llms.txt context to generate accurate component code with proper syntax.

Using with Claude Code

Setup Instructions

Open Claude Code CLI in your project terminal
In a message, reference the llms.txt URL
Ask your question about RapidRails UI
Claude will fetch and use the documentation context

Example Prompts

Claude Code with RapidRails UI

Point to https://rapidrails.cc/llms.txt and help me:

Generate a user profile card that displays:
- Avatar image
- User name (heading)
- Email address
- Social media links with icons
- Edit profile button

Use RapidRails UI components with correct syntax.

Claude Code will parse the URL and generate accurate component code following RapidRails patterns.

Using with ChatGPT

Setup Instructions

Open ChatGPT web or app
Paste the full llms.txt content or llms-full.txt in your first message
Ask your question about generating RapidRails UI code
ChatGPT will use the context to generate accurate code

Copy Content from URL

Option 1: Get the concise version (recommended for ChatGPT)

Copy llms.txt content

curl -s https://rapidrails.cc/llms.txt | pbcopy
# Now paste into ChatGPT

Option 2: Get the complete version with all component details

Copy llms-full.txt content

curl -s https://rapidrails.cc/llms-full.txt | pbcopy
# Now paste into ChatGPT

Example Chat

You:

[Paste llms.txt content here]

Using this RapidRails UI documentation, generate an ERB template for a dashboard with: - Welcome card with user name - Stats cards showing key metrics - Data table with sortable columns - Action buttons

ChatGPT:

I'll generate a complete dashboard template using RapidRails UI components...

[Generated code with rui_card, rui_badge, rui_table, rui_button...]

Using with Claude Desktop (Advanced)

MCP Server Integration (Optional)

For advanced users: Use the llms.txt MCP server to automatically fetch RapidRails UI documentation whenever you mention it in Claude Desktop conversations.

Installation

1. Edit Claude Desktop configuration file:

Open config file

nano ~/Library/Application\ Support/Claude/claude_desktop_config.json

2. Add the llms-txt MCP server:

claude_desktop_config.json

{
  "mcpServers": {
    "llms-txt": {
      "command": "npx",
      "args": ["-y", "llms-txt-mcp"],
      "env": {
        "URLS": "https://rapidrails.cc/llms.txt,https://rapidrails.cc/llms-full.txt"
      }
    }
  }
}

3. Restart Claude Desktop

Usage

Once installed, you can ask Claude about RapidRails UI without manually copying/pasting:

Claude Desktop Chat

Generate a form component for creating a new blog post using RapidRails UI.
Include title, slug, excerpt, content, featured image, and publish button.

Use form_with and form builder methods for proper Rails integration.

Claude will automatically fetch the latest llms.txt context and generate accurate code.

How to work with AI agents

AI agents work best when you guide them through iterative feedback. Here's a real-world example of how to effectively collaborate with an AI tool to generate accurate RapidRails UI code.

Claude Code's example workflow: building a marketing feature section

Step 1: Initial request

Here is how i ask Claude Code to create a marketing feature section with a title, copy, and 6 feature cards in a 3-column layout. Exact prompt is as follows:

Prompt for Claude Code

Create a marketing feature section, it would have heading and subheading and 2
sections, 3 cards in each row. each card has an icon, title and description. each
card is clicable, with no_underline variant. Use RapidRails UI components with correct syntax from https://rapidrails.cc/llms-full.txt
Add it to the index in it own section

Step 2: Agent generates code

The agent generates code. The layout and components are correct, but styling needs adjustments.

Initial Generated Code (Needs Refinement)

# Marketing Feature Section
<section class="mt-20 pt-12 border-t border-zinc-200 dark:border-zinc-800">
  <div class="space-y-12">
    # Section Header
    <div class="space-y-3">
      <%= rui_text("RapidRailsUI Features", as: :h2, size: :xl3, weight: :bold) %>
      <%= rui_text("Powerful component library built for Rails developers. Everything you need to build beautiful, accessible applications.", as: :p) %>
    </div>

    # Core Features Section
    <div class="space-y-4">
      <%= rui_text("Core Features", as: :h3, size: :xl, weight: :semibold) %>

      <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
        # Card 1: 31 Components
        <%= rui_link("https://rapidrails.cc", variant: :no_underline, class: "group block h-full") do %>
          <div class="bg-white dark:bg-zinc-900 rounded-xl p-6 space-y-4 border border-zinc-200 dark:border-zinc-800 hover:border-primary-300 dark:hover:border-primary-600 hover:shadow-lg dark:hover:shadow-black/40 transition-all h-full flex flex-col">
            <div class="flex items-center justify-center w-12 h-12 bg-blue-100 dark:bg-blue-900/30 rounded-lg group-hover:bg-blue-200 dark:group-hover:bg-blue-900/50 transition-colors">
              <%= rui_icon :grid, size: :lg, color: :blue, standalone: true %>
            </div>
            <%= rui_text("31 Components", as: :h6, weight: :bold) %>
            <%= rui_text("Comprehensive library of production-ready UI components for any application needs.", as: :p) %>
          </div>
        <% end %>

        # Card 2: Accessibility
        <%= rui_link("https://rapidrails.cc", variant: :no_underline, class: "group block h-full") do %>
          <div class="bg-white dark:bg-zinc-900 rounded-xl p-6 space-y-4 border border-zinc-200 dark:border-zinc-800 hover:border-primary-300 dark:hover:border-primary-600 hover:shadow-lg dark:hover:shadow-black/40 transition-all h-full flex flex-col">
            <div class="flex items-center justify-center w-12 h-12 bg-emerald-100 dark:bg-emerald-900/30 rounded-lg group-hover:bg-emerald-200 dark:group-hover:bg-emerald-900/50 transition-colors">
              <%= rui_icon :accessibility, size: :lg, color: :emerald, standalone: true %>
            </div>
            <%= rui_text("WCAG Compliant", as: :h6, weight: :bold) %>
            <%= rui_text("Fully accessible components with semantic HTML, keyboard navigation, and screen reader support.", as: :p) %>
          </div>
        <% end %>

        # Card 3: Dark Mode

        <%= rui_link("https://rapidrails.cc", variant: :no_underline, class: "group block h-full") do %>
          <div class="bg-white dark:bg-zinc-900 rounded-xl p-6 space-y-4 border border-zinc-200 dark:border-zinc-800 hover:border-primary-300 dark:hover:border-primary-600 hover:shadow-lg dark:hover:shadow-black/40 transition-all h-full flex flex-col">
            <div class="flex items-center justify-center w-12 h-12 bg-indigo-100 dark:bg-indigo-900/30 rounded-lg group-hover:bg-indigo-200 dark:group-hover:bg-indigo-900/50 transition-colors">
              <%= rui_icon :moon, size: :lg, color: :indigo, standalone: true %>
            </div>
            <%= rui_text("Dark Mode Built-In", as: :h6, weight: :bold) %>
            <%= rui_text("Automatic dark mode support with seamless theme switching across all components.", as: :p) %>
          </div>
        <% end %>
      </div>
    </div>

    # Advanced Features Section
    <div class="space-y-4">
      <%= rui_text("Advanced Features", as: :h3, size: :xl, weight: :semibold) %>

      <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
        # Card 4: Turbo Integration
        <%= rui_link("https://rapidrails.cc", variant: :no_underline, class: "group block h-full") do %>
          <div class="bg-white dark:bg-zinc-900 rounded-xl p-6 space-y-4 border border-zinc-200 dark:border-zinc-800 hover:border-primary-300 dark:hover:border-primary-600 hover:shadow-lg dark:hover:shadow-black/40 transition-all h-full flex flex-col">
            <div class="flex items-center justify-center w-12 h-12 bg-purple-100 dark:bg-purple-900/30 rounded-lg group-hover:bg-purple-200 dark:group-hover:bg-purple-900/50 transition-colors">
              <%= rui_icon :zap, size: :lg, color: :purple, standalone: true %>
            </div>
            <%= rui_text("Turbo Integration", as: :h6, weight: :bold) %>
            <%= rui_text("Full support for Turbo Frames, Streams, and real-time updates with zero configuration.", as: :p) %>
          </div>
        <% end %>

        # Card 5: Form Builder
        <%= rui_link("https://rapidrails.cc", variant: :no_underline, class: "group block h-full") do %>
          <div class="bg-white dark:bg-zinc-900 rounded-xl p-6 space-y-4 border border-zinc-200 dark:border-zinc-800 hover:border-primary-300 dark:hover:border-primary-600 hover:shadow-lg dark:hover:shadow-black/40 transition-all h-full flex flex-col">
            <div class="flex items-center justify-center w-12 h-12 bg-pink-100 dark:bg-pink-900/30 rounded-lg group-hover:bg-pink-200 dark:group-hover:bg-pink-900/50 transition-colors">
              <%= rui_icon :form_input, size: :lg, color: :pink, standalone: true %>
            </div>
            <%= rui_text("Custom Form Builder", as: :h6, weight: :bold) %>
            <%= rui_text("Integrated form builder for Rails with automatic validation and error handling.", as: :p) %>
            </div>
          <% end %>

        # Card 6: Customizable
        <%= rui_link("https://rapidrails.cc", variant: :no_underline, class: "group block h-full") do %>
          <div class="bg-white dark:bg-zinc-900 rounded-xl p-6 space-y-4 border border-zinc-200 dark:border-zinc-800 hover:border-primary-300 dark:hover:border-primary-600 hover:shadow-lg dark:hover:shadow-black/40 transition-all h-full flex flex-col">
            <div class="flex items-center justify-center w-12 h-12 bg-orange-100 dark:bg-orange-900/30 rounded-lg group-hover:bg-orange-200 dark:group-hover:bg-orange-900/50 transition-colors">
              <%= rui_icon :palette, size: :lg, color: :orange, standalone: true %>
            </div>
            <%= rui_text("Fully Customizable", as: :h6, weight: :bold) %>
            <%= rui_text("Use RapidCascade CSS system to customize colors, sizes, and styles to match your brand.", as: :p) %>
            </div>
          <% end %>
      </div>
    </div>
  </div>
</section>

Initial Result Preview:

RapidRailsUI Features

Powerful component library built for Rails developers. Everything you need to build beautiful, accessible applications.

Core Features

31 Components

Comprehensive library of production-ready UI components for any application needs.

WCAG Compliant

Fully accessible components with semantic HTML, keyboard navigation, and screen reader support.

Dark Mode Built-In

Automatic dark mode support with seamless theme switching across all components.

Advanced Features

Turbo Integration

Full support for Turbo Frames, Streams, and real-time updates with zero configuration.

Custom Form Builder

Integrated form builder for Rails with automatic validation and error handling.

Fully Customizable

Use RapidCascade CSS system to customize colors, sizes, and styles to match your brand.

I want to do some changes to the code, like no borders on cards, make card's title smaller (from h5 to h6), change each section's title to h4 and change icon border to full rounded.

Step 3: You Review & Provide Feedback

You review the generated code and UI. It's good, but you want to refine the styling to match your design system.

Your Feedback

good, now Remove border from each card, make card's title smaller (from h5 to h6),
remove weight bold from main header, change each section's title to h4
and change icon border to full rounded

Step 4: Agent Corrects the Code

The agent applies your feedback and produces polished code that matches your design requirements exactly.

Refined Code (Now Perfect)

<section class="mt-20 pt-12 border-t border-zinc-200 dark:border-zinc-800">
  <div class="space-y-12">
    #Section Header
    <div class="space-y-3">
      <%= rui_text("RapidRailsUI Features", as: :h2, size: :xl3) %>
      <%= rui_text("Powerful component library built for Rails developers. Everything you need to build beautiful, accessible applications.", as: :p) %>
    </div>

    #Core Features Section
    <div class="space-y-4">
      <%= rui_text("Core Features", as: :h4, size: :xl, weight: :semibold) %>

      <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
        #Card 1: 31 Components
        <%= rui_link("https://rapidrails.cc", variant: :no_underline, class: "group block h-full") do %>
          <div class="bg-white dark:bg-zinc-900 rounded-xl p-6 space-y-4 hover:shadow-lg dark:hover:shadow-black/40 transition-all h-full flex flex-col">
            <div class="flex items-center justify-center w-12 h-12 bg-blue-100 dark:bg-blue-900/30 rounded-full group-hover:bg-blue-200 dark:group-hover:bg-blue-900/50 transition-colors">
              <%= rui_icon :grid, size: :lg, color: :blue, standalone: true %>
            </div>
            <%= rui_text("31 Components", as: :h6, weight: :bold) %>
            <%= rui_text("Comprehensive library of production-ready UI components for any application needs.", as: :p) %>
          </div>
        <% end %>

        #Card 2: Accessibility
        #Card 3: Dark Mode    
      </div>
    </div>

    <!-- Advanced Features Section -->
    <div class="space-y-4">
      <%= rui_text("Advanced Features", as: :h4, size: :xl, weight: :semibold) %>

      <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
        #Card 4: Turbo Integration
        <%= rui_link("https://rapidrails.cc", variant: :no_underline, class: "group block h-full") do %>
          <div class="bg-white dark:bg-zinc-900 rounded-xl p-6 space-y-4 hover:shadow-lg dark:hover:shadow-black/40 transition-all h-full flex flex-col">
            <div class="flex items-center justify-center w-12 h-12 bg-purple-100 dark:bg-purple-900/30 rounded-full group-hover:bg-purple-200 dark:group-hover:bg-purple-900/50 transition-colors">
              <%= rui_icon :zap, size: :lg, color: :purple, standalone: true %>
            </div>
            <%= rui_text("Turbo Integration", as: :h6, weight: :bold) %>
            <%= rui_text("Full support for Turbo Frames, Streams, and real-time updates with zero configuration.", as: :p) %>
          </div>
        <% end %>

        #Card 5: Form Builder
        #Card 6: Customizable
      </div>
    </div>
  </div>
</section>

Changes applied: Removed borders, changed h5 to h6, removed bold weight, changed icon border from rounded to rounded-full

Step 5: Final Result

The polished component is now ready for production—clean, modern, and exactly what you envisioned.

RapidRailsUI Features

Powerful component library built for Rails developers. Everything you need to build beautiful, accessible applications.

Core Features

31 Components

Comprehensive library of production-ready UI components for any application needs.

WCAG Compliant

Fully accessible components with semantic HTML, keyboard navigation, and screen reader support.

Dark Mode Built-In

Automatic dark mode support with seamless theme switching across all components.

Advanced Features

Turbo Integration

Full support for Turbo Frames, Streams, and real-time updates with zero configuration.

Custom Form Builder

Integrated form builder for Rails with automatic validation and error handling.

Fully Customizable

Use RapidCascade CSS system to customize colors, sizes, and styles to match your brand.

Key Takeaways

Always reference llms.txt or llms-full.txt in your prompts when the agent needs guidance
Review generated code before using it - test for correct syntax and behavior
Point out specific issues - reference the documentation section that shows the correct API
Ask for corrections - agents can easily fix their code when given clear feedback
Iterate - it's normal to go through multiple rounds of feedback to get perfect code

Troubleshooting

AI generates wrong component names

Problem: AI uses `rui_modal` instead of `rui_dialog`

Solution: Ensure the AI has access to the latest llms-full.txt. Try:

Re-paste the llms.txt URL
Clear the chat history and start fresh
Use the more complete llms-full.txt version

AI uses wrong argument order

Problem: AI generates `rui_link(posts_path, "View Posts")` instead of `rui_link("View Posts", posts_path)`

Solution: This typically means the AI needs clearer context. Include in your prompt:

"Use the correct RapidRails UI argument order: text/label first, then URL (following Rails link_to convention)"

AI suggests non-existent components

Problem: AI invents components like `rui_card` that don't exist

Solution: Make sure to reference the complete llms.txt documentation which lists all 31 available components.

Cursor @docs not picking up changes

Problem: Cursor cached an old version of llms.txt

Solution:

Remove and re-add the URL in @docs
Restart Cursor completely
Clear Cursor cache: `rm -rf ~/.cursor/cache`

URL not loading

Problem: Getting 404 or connection errors

Solution: Check the URLs:

https://rapidrails.cc/llms.txt
https://rapidrails.cc/llms-full.txt

⚠️

Important: Agent Implementation Protocol

This section is critical for all developers using AI agents (Claude, Cursor, ChatGPT, Codex, or any other LLM) to generate RapidRails UI code. Agents must follow this protocol to ensure generated code is accurate and production-ready.

Why This Protocol Exists

Without proper guidance, AI agents can generate code that deviates from the documented API, causing:

Using string parameters instead of symbols: name: "field" instead of :field
Wrong parameter names: options: instead of collection:
Inventing non-existent parameters or components
Breaking Rails conventions and form builder integration
Code that doesn't render or crashes at runtime

Protocol for AI Agents

Step 1: Reference llms.txt or llms-full.txt FIRST

Before writing ANY RapidRails UI component code, locate the component documentation in:

https://rapidrails.cc/llms-full.txt

Example: Looking for rui_select? Search for "## Select" in llms-full.txt and read the "Basic Usage" section.

Step 2: Extract the EXACT API Pattern

Copy the exact syntax shown in llms-full.txt. Do NOT vary or invent alternatives:

Component	✅ CORRECT	❌ WRONG
rui_input	rui_input(:name, label: "Name")	rui_input(name: "name", ...)
rui_select	rui_select(:status, collection: [...])	rui_select(name: "status", options: [...])
rui_textarea	rui_textarea(:content, label: "Content")	rui_textarea(name: "content", ...)
rui_badge	rui_badge("Active", color: :success)	rui_badge(color: "success")

Step 3: Validate Against These Rules

Before generating code, confirm these rules apply:

Rule 1: Use symbols for component parameters
✅ :name ❌ "name"
Rule 2: Use symbols for color and size parameters
✅ color: :primary ❌ color: "primary"
Rule 3: Use correct parameter names from llms-full.txt
✅ collection: ❌ options:
Rule 4: Match the exact component name
✅ rui_dialog ❌ rui_modal (not the same)
Rule 5: Never use components not in llms-full.txt
If it's not documented, don't use it. Suggest alternatives instead.

Step 4: Show Your Work (Transparency)

When implementing RapidRails UI components, agents MUST show their validation:

Example: Agent Validation Response

I'm generating a rui_select component. Let me validate against llms-full.txt first.

From llms-full.txt (line 11874):
- API: rui_select(:status, collection: [...], label: "Status")
- Uses symbol :status (not string "status")
- Uses collection: parameter (not options:)

Generating:
<%= rui_select(:category, collection: [["All", ""], ["Tech", "tech"]], label: "Category") %>

This matches the documented API exactly.

Step 5: Accept Feedback & Correct Immediately

When a developer points out API issues, agents must:

Acknowledge the correction
Reference the correct API from llms-full.txt
Provide corrected code immediately
Explain what was wrong and why the fix is correct

Red Flags (Agent is NOT Following Protocol)

If you see these patterns, the agent has NOT followed this protocol:

String parameters: name: "field" instead of :field
Wrong parameter names: options: instead of collection:
No reference to llms-full.txt: Code added without mentioning checking the documentation
Undocumented parameters: Parameters not found in llms-full.txt for that component
Invented components: Components like rui_card that don't exist

How to Enforce This Protocol

When working with AI agents:

Point agents to llms.txt: Always reference it in your prompts
Review generated code: Test before using, compare to llms-full.txt examples
Call out deviations: Point to the exact llms-full.txt line that shows correct API
Demand corrections: Ask agents to fix code based on documentation
Keep iterating: It's normal to go through multiple rounds for complex components

Best Practices

Be specific in your prompts

Instead of "generate a form", say "generate a user registration form with name, email, password fields using form_with and RapidRails form builder methods"

Verify generated code

Always review AI-generated code before using it. Check for correct component names, argument order, and Rails conventions.

Use llms-full.txt for complex requests

For multi-component layouts or specific component features, use the complete llms-full.txt which has detailed usage examples.

Reference the component docs

Point AI to specific component documentation for advanced features: "See the Badge component docs at https://rapidrails.cc/docs/badge"

Next Steps

Choose your preferred AI tool (Cursor, Claude Code, or ChatGPT)
Set it up using the instructions above
Try generating a simple component (like a button or badge) first
Review the generated code and compare to our component docs
Ask for more complex components once you're comfortable
Share your feedback and examples in our community

Need Help?

Start with the docs: Check the full RapidRails UI documentation at docs for comprehensive component guides and examples.

Working with AI agents: Always reference the llms-full.txt documentation file to ensure accurate component generation.

Questions or issues? Reach out directly: ahmednadar@hey.com