Two Ways to Connect
Both approaches are complementary — use one or both together for the best experience.
Skills
Teach your AI agent how to build with Beartropy. Invoke /beartropy-form and say "create a registration form" — the agent uses the right components, props, and Livewire patterns.
Works with Claude Code, Cursor, Windsurf, GitHub Copilot, and Codex.
MCP (Laravel Boost)
On-demand component reference. Your AI agent can query the full documentation for any component at any time — props, slots, examples, and architecture details.
Requires Laravel Boost. Zero config after install.
Best together
/beartropy-form and it knows how to build a complete form with the right components and Livewire bindings. MCP gives it a live reference — it can look up exact props and slots for any component on the fly. Together, you get correct Beartropy code without memorizing every component API.
MCP Integration
On-demand component reference via Laravel Boost. Your AI agent can look up any component's full documentation at any time.
What is Laravel Boost?
Install Laravel Boost
If you don't have Laravel Boost installed yet, add it to your project. See the official documentation for full setup instructions.
1composer require laravel/boostRegistered MCP Tools
When Boost is detected, Beartropy automatically registers two MCP tools. No configuration or artisan commands needed — they're available immediately.
beartropy-list-components
Lists all available components grouped by category (forms / ui). Use this to discover what's available.
beartropy-component-docs
Returns full documentation for a specific component — props, slots, architecture, and usage examples.
How it works
AI agents discover and call these tools automatically. When an agent needs to use a Beartropy component, it queries the MCP server for the full documentation then writes correct code on the first try.
- Agent calls
beartropy-list-componentsto discover available components - Agent calls
beartropy-component-docswith the component name (e.g.,"select") - Receives full props, slots, examples, and architecture details
- Writes correct code using the real API — no hallucination
No configuration required
class_exists(). If Boost is installed, the tools are registered. If not, nothing happens. Laravel Boost is not a dependency of Beartropy UI.
Skills
Publish Beartropy knowledge directly into your project so your AI agent builds with the right components automatically.
Why Skills?
Each skill is a focused prompt that teaches your AI agent how to build with Beartropy — the correct components, props, Livewire bindings, and patterns. Instead of explaining your component library every time, invoke a skill and describe what you want.
Install for Claude Code (default)
Installs skill files into .claude/skills/ and generates the component reference from your installed package version. Claude Code automatically discovers them as /slash commands.
1php artisan beartropy:skillsInstall for a specific agent
Use the --agent flag to target a specific AI coding tool. Each agent gets files in the format and location it expects.
1php artisan beartropy:skills --agent=cursorInstall for all agents at once
Use --agent=all to publish skills for every supported agent simultaneously.
1php artisan beartropy:skills --agent=allUsing Skills
Invoke a skill with / followed by the skill name, then describe what you need. The agent writes correct Beartropy code using the right components, props, and patterns.
Build a form
Invoke /beartropy-form and describe what you need. The agent builds it with x-bt-input, x-bt-select, x-bt-textarea, proper wire:model bindings, validation, and loading states.
1/beartropy-form2> Create a user registration form with name, email, password, and terms checkboxLook up a component
Invoke /beartropy-component to get the full API for any component — props, slots, examples. The agent uses this to write correct code without guessing.
1/beartropy-component2> Show me how to use the Select component with remote data loadingBuild a full page
Invoke /beartropy-patterns for complete page layouts — dashboards, settings pages, data tables with filters. The agent composes multiple components together with proper Livewire integration.
1/beartropy-patterns2> Help me create a user management table with search, filters, and bulk actionsAgent-specific behavior
/slash commands you invoke explicitly. In GitHub Copilot and Codex, the knowledge is written to instruction files that are always loaded — so the agent knows about Beartropy components in every conversation. Cursor and Windsurf load rules contextually based on their own conventions.
Supported Agents
Skills are formatted and placed correctly for each AI coding tool.
| Agent | Flag | Output Location | Format |
|---|---|---|---|
| Claude Code | --agent=claude |
.claude/skills/ |
Modular (one dir per skill) |
| Cursor | --agent=cursor |
.cursor/rules/ |
Multi-file (.mdc) |
| Windsurf | --agent=windsurf |
.windsurf/rules/ |
Multi-file (.md) |
| GitHub Copilot | --agent=copilot |
.github/copilot-instructions.md |
Single file |
| Codex | --agent=codex |
AGENTS.md |
Single file |
1<div class="overflow-x-auto"> 2 <table class="w-full text-sm"> 3 <thead> 4 <tr class="border-b border-zinc-200 dark:border-zinc-700"> 5 <th class="text-left py-2 pr-4 font-semibold text-zinc-700 dark:text-zinc-300">Agent</th> 6 <th class="text-left py-2 pr-4 font-semibold text-zinc-700 dark:text-zinc-300">Flag</th> 7 <th class="text-left py-2 pr-4 font-semibold text-zinc-700 dark:text-zinc-300">Output Location</th> 8 <th class="text-left py-2 font-semibold text-zinc-700 dark:text-zinc-300">Format</th> 9 </tr>10 </thead>11 <tbody class="text-zinc-600 dark:text-zinc-400">12 <tr class="border-b border-zinc-100 dark:border-zinc-800">13 <td class="py-2 pr-4 font-medium text-zinc-800 dark:text-zinc-200">Claude Code</td>14 <td class="py-2 pr-4"><code class="text-xs bg-zinc-100 dark:bg-zinc-800 px-1.5 py-0.5 rounded">--agent=claude</code></td>15 <td class="py-2 pr-4"><code class="text-xs">.claude/skills/</code></td>16 <td class="py-2">Modular (one dir per skill)</td>17 </tr>18 <tr class="border-b border-zinc-100 dark:border-zinc-800">19 <td class="py-2 pr-4 font-medium text-zinc-800 dark:text-zinc-200">Cursor</td>20 <td class="py-2 pr-4"><code class="text-xs bg-zinc-100 dark:bg-zinc-800 px-1.5 py-0.5 rounded">--agent=cursor</code></td>21 <td class="py-2 pr-4"><code class="text-xs">.cursor/rules/</code></td>22 <td class="py-2">Multi-file (.mdc)</td>23 </tr>24 <tr class="border-b border-zinc-100 dark:border-zinc-800">25 <td class="py-2 pr-4 font-medium text-zinc-800 dark:text-zinc-200">Windsurf</td>26 <td class="py-2 pr-4"><code class="text-xs bg-zinc-100 dark:bg-zinc-800 px-1.5 py-0.5 rounded">--agent=windsurf</code></td>27 <td class="py-2 pr-4"><code class="text-xs">.windsurf/rules/</code></td>28 <td class="py-2">Multi-file (.md)</td>29 </tr>30 <tr class="border-b border-zinc-100 dark:border-zinc-800">31 <td class="py-2 pr-4 font-medium text-zinc-800 dark:text-zinc-200">GitHub Copilot</td>32 <td class="py-2 pr-4"><code class="text-xs bg-zinc-100 dark:bg-zinc-800 px-1.5 py-0.5 rounded">--agent=copilot</code></td>33 <td class="py-2 pr-4"><code class="text-xs">.github/copilot-instructions.md</code></td>34 <td class="py-2">Single file</td>35 </tr>36 <tr>37 <td class="py-2 pr-4 font-medium text-zinc-800 dark:text-zinc-200">Codex</td>38 <td class="py-2 pr-4"><code class="text-xs bg-zinc-100 dark:bg-zinc-800 px-1.5 py-0.5 rounded">--agent=codex</code></td>39 <td class="py-2 pr-4"><code class="text-xs">AGENTS.md</code></td>40 <td class="py-2">Single file</td>41 </tr>42 </tbody>43 </table>44</div>Available Skills
Five skills are published, each specialized for a different workflow.
/beartropy-setup
Installation and configuration guide. Get help installing, configuring Tailwind, publishing assets, and troubleshooting.
/beartropy-form
Build forms with proper Livewire integration, validation, loading states, and accessible markup.
/beartropy-component
Complete reference for every component — all props, slots, examples, and best practices in one place.
/beartropy-livewire
Livewire integration patterns — wire:model, live validation, reactive search, modals, and state management.
/beartropy-patterns
Production-ready UI patterns — login pages, data tables with filters, settings pages, dashboards, and more.
1<div class="grid grid-cols-1 sm:grid-cols-2 gap-4"> 2 <x-bt-card> 3 <div class="flex items-start gap-3"> 4 <x-bt-icon name="command-line" class="w-5 h-5 text-blue-500 mt-0.5 shrink-0" /> 5 <div> 6 <p class="font-semibold text-sm">/beartropy-setup</p> 7 <p class="text-xs text-zinc-500 dark:text-zinc-400 mt-1">Installation and configuration guide. Get help installing, configuring Tailwind, publishing assets, and troubleshooting.</p> 8 </div> 9 </div>10 </x-bt-card>1112 <x-bt-card>13 <div class="flex items-start gap-3">14 <x-bt-icon name="document-text" class="w-5 h-5 text-green-500 mt-0.5 shrink-0" />15 <div>16 <p class="font-semibold text-sm">/beartropy-form</p>17 <p class="text-xs text-zinc-500 dark:text-zinc-400 mt-1">Build forms with proper Livewire integration, validation, loading states, and accessible markup.</p>18 </div>19 </div>20 </x-bt-card>2122 <x-bt-card>23 <div class="flex items-start gap-3">24 <x-bt-icon name="cube" class="w-5 h-5 text-purple-500 mt-0.5 shrink-0" />25 <div>26 <p class="font-semibold text-sm">/beartropy-component</p>27 <p class="text-xs text-zinc-500 dark:text-zinc-400 mt-1">Complete reference for every component — all props, slots, examples, and best practices in one place.</p>28 </div>29 </div>30 </x-bt-card>3132 <x-bt-card>33 <div class="flex items-start gap-3">34 <x-bt-icon name="bolt" class="w-5 h-5 text-amber-500 mt-0.5 shrink-0" />35 <div>36 <p class="font-semibold text-sm">/beartropy-livewire</p>37 <p class="text-xs text-zinc-500 dark:text-zinc-400 mt-1">Livewire integration patterns — wire:model, live validation, reactive search, modals, and state management.</p>38 </div>39 </div>40 </x-bt-card>4142 <x-bt-card class="sm:col-span-2">43 <div class="flex items-start gap-3">44 <x-bt-icon name="squares-2x2" class="w-5 h-5 text-rose-500 mt-0.5 shrink-0" />45 <div>46 <p class="font-semibold text-sm">/beartropy-patterns</p>47 <p class="text-xs text-zinc-500 dark:text-zinc-400 mt-1">Production-ready UI patterns — login pages, data tables with filters, settings pages, dashboards, and more.</p>48 </div>49 </div>50 </x-bt-card>51</div>Managing Skills
Force overwrite existing skills
Use --force to update skills after upgrading Beartropy UI to a new version.
1php artisan beartropy:skills --forceRemove all skills
Cleanly removes all Beartropy skill files from your project.
1php artisan beartropy:skills --removeUpdate after upgrading
php artisan beartropy:skills --force to regenerate the component reference with updated props, slots, and examples. MCP tools update automatically — no action needed.