Stop Memorizing Component APIs: Beartropy UI + AI Agents, Integrated

You know that dance. The one where you're building a form in your IDE, then you Alt-Tab to the docs to check if it's wire:model.defer or wire:model.live, scroll to find the right prop name, copy the example, paste it back, realize you got the slot name wrong, go back to the docs...

It's exhausting. And frankly, it's 2025.

Today, we're announcing something that changes how you build with Beartropy UI: native AI agent integration through MCP (Model Context Protocol) and publishable Skills. Your AI coding assistant now understands Beartropy components as well as you do—maybe better.

What's Changing?

Beartropy UI now ships with two complementary AI integration approaches:

1. MCP Integration via Laravel Boost — Live, dynamic component reference that your AI can query in real-time
2. Publishable Skills — Workflow knowledge packages that any AI agent can consume

This isn't about AI writing code for you. It's about AI understanding your tools so you can stay in flow.

How MCP Integration Works

Model Context Protocol (MCP) is an open standard that lets AI models access external tools and data sources. With Laravel Boost's MCP server, your AI assistant gets direct access to:

• Complete Beartropy UI component documentation
• Real-time prop definitions and types
• Slot structures and composition patterns
• Live examples from your project context

Here's what happens in practice. You tell Claude Code:

"Create a user profile form with avatar upload, name field, email field, and a save button using Beartropy components"

And instead of generic Livewire code or hallucinated component names, you get:

 1<x-card>
 2    <x-card.header>
 3        <x-card.title>Edit Profile</x-card.title>
 4    </x-card.header>
 5 
 6    <x-card.content class="space-y-6">
 7        <x-avatar-upload
 8            wire:model="avatar"
 9            :preview="$user->avatar_url"
10            accept="image/*"
11        />
12 
13        <x-input
14            wire:model="name"
15            label="Full Name"
16            placeholder="John Doe"
17            required
18        />
19 
20        <x-input
21            wire:model="email"
22            type="email"
23            label="Email Address"
24            placeholder="john@example.com"
25            required
26        />
27    </x-card.content>
28 
29    <x-card.footer>
30        <x-button wire:click="save" variant="primary">
31            Save Changes
32        </x-button>
33    </x-card.footer>
34</x-card>

Correct component names. Correct props. Correct slots. No hallucinations, no guessing.

Skills: Portable AI Knowledge

While MCP provides live reference, Skills are something different: they're portable packages of workflow knowledge that any AI agent can use.

Think of a Skill as a condensed expert. When you install the Beartropy UI skill, your AI agent learns:

• Component composition patterns
• Accessibility best practices for each component
• Common gotchas and how to avoid them
• Idiomatic Beartropy/Livewire integration patterns
• Testing strategies for interactive components

Skills work across AI agents. Whether you're using Claude Code, Cursor, Windsurf, or GitHub Copilot—same knowledge, consistent results.

Installing the Beartropy Skill

1# Claude Code
2claude mcp add beartropy-ui
3 
4# Cursor / Windsurf
5# Add to your .cursorrules or project settings:
6# "skills": ["beartropy/ui"]
7 
8# GitHub Copilot
9# Skills integrate via Copilot Extensions

Supported AI Agents

We've tested and optimized for the major players:

The Practical Impact

Let's talk real numbers. In our internal testing:

• 70% reduction in docs lookups during component implementation
• 3x faster form building with proper validation patterns
• Zero hallucinated component names when MCP is connected
• Consistent accessibility because the AI knows the right ARIA patterns

But the real win is harder to measure: staying in flow. When you don't have to context-switch to documentation every few minutes, you think about your product, not your tools.

Example: Building a Data Table

Without AI integration:

1. Open docs, search for Table component
2. Copy base example
3. Look up column configuration
4. Search for sorting props
5. Find pagination integration
6. Look up action menu slots
7. Debug because you mixed up slot names

With Beartropy + AI:

"Create a sortable data table for users with columns for name, email, role, and created date. Include row actions for edit and delete, and pagination."

Done. One prompt, complete implementation with proper sorting hooks, accessible action menus, and integrated pagination.

Getting Started

1. Install Laravel Boost (for MCP)

1composer require laravel/boost
2php artisan boost:install

2. Configure Your AI Agent

For Claude Code:

1claude mcp add laravel-boost

For Cursor, add to your MCP configuration:

1{
2  "mcpServers": {
3    "laravel-boost": {
4      "command": "php",
5      "args": ["artisan", "boost:mcp"]
6    }
7  }
8}

3. Install Beartropy Skills (Optional but Recommended)

Skills provide deeper workflow knowledge beyond component reference:

1# Via Laravel Boost
2php artisan boost:skill beartropy/ui
3 
4# Or configure directly in your AI agent

4. Start Building

That's it. Your AI now speaks Beartropy fluently.

The Future of AI-Powered Component Libraries

This is just the beginning. We believe component libraries should be AI-native—designed not just for human developers, but for the AI assistants that work alongside them.

What we're shipping today:

• Live component reference via MCP
• Portable workflow knowledge via Skills
• Support for major AI coding assistants

What's coming:

• Component generation — Describe a new component, get Beartropy-styled implementation
• Migration assistance — Moving from other libraries? AI-guided component mapping
• Pattern detection — AI suggestions for component composition improvements
• Test generation — Automatic test scaffolding for Beartropy components

The goal isn't to replace developers. It's to remove the friction between what you want to build and actually building it.

Try It Now

Ready to experience Beartropy UI with AI integration?

👉 Get Started with Beartropy UI + AI

The docs now include AI-specific setup guides for each supported agent, example prompts that showcase the integration, and troubleshooting for common MCP configuration issues.

Stop memorizing APIs. Start building.

Have questions about the AI integration? Found a pattern that works great? We'd love to hear from you on GitHub Discussions or Discord.