Laravel Claude Code Setup 🚀

One-command setup for Claude Code with Laravel development. Automatically configures all MCP servers for the ultimate AI-powered Laravel development experience with Figma integration.

🎯 What This Does

Installs and configures Claude Code with a complete development ecosystem:

🌐 Global MCP Servers (shared across all projects)

✅ GitHub integration - Access all your repositories, manage PRs (with automatic token configuration!)
✅ Memory system - Remember decisions across all projects
✅ Context7 - Latest Laravel/PHP documentation access
✅ Web fetch - Access external APIs and resources
✅ Figma integration - Design-to-code workflows with automatic design token extraction

📁 Project-Specific MCP Servers

✅ Filesystem access - Read/write your specific Laravel project files
✅ Database integration - Direct access to your project's database
✅ Laravel DebugBar - Real-time debugging (if installed)

🎨 NEW: Figma Design Integration

Design-to-code workflows - Convert Figma designs directly to Laravel/Livewire components
Automatic design token extraction - Colors, typography, and spacing for Tailwind CSS
Component specifications - Get precise implementation details from Figma designs
Seamless integration - Works with your existing Laravel + Livewire + Filament + Tailwind stack

The installer intelligently sets up global servers once and adds project-specific servers for each Laravel project.

🚀 Quick Install

Option 1: Direct Installation (Recommended)

Run this single command from your Laravel project root:

curl -fsSL https://raw.githubusercontent.com/laraben/laravel-claude-code-setup/main/install.sh | bash

Option 2: With Tokens Pre-configured

If you want to skip the interactive prompts:

export GITHUB_TOKEN="your_github_personal_access_token"
export FIGMA_ACCESS_TOKEN="your_figma_access_token"
curl -fsSL https://raw.githubusercontent.com/laraben/laravel-claude-code-setup/main/install.sh | bash

Option 3: Download and Run

For more control or if you prefer to review the script first:

# Download the script
curl -fsSL https://raw.githubusercontent.com/laraben/laravel-claude-code-setup/main/install.sh -o setup.sh

# Make it executable
chmod +x setup.sh

# Run it
./setup.sh

📋 Prerequisites

Before running the installer, make sure you have:

Claude Code installed (Download here)
Node.js & npm installed
Go 1.22+ installed (for database MCP server)
A Laravel project with .env file configured
GitHub Personal Access Token (the installer will guide you)
Figma Personal Access Token (optional, for design integration)

🔑 Token Setup

GitHub Token Setup

You'll need a GitHub Personal Access Token for private repository access:

Go to GitHub Settings → Developer settings → Personal access tokens → Tokens (classic)
Click "Generate new token (classic)"
Select these scopes:
- ✅ repo (Full control of private repositories)
- ✅ read:user (Read user profile data)
- ✅ user:email (Access user email addresses)
Copy the generated token when prompted by the installer

🎨 Figma Token Setup (Optional)

For design-to-code workflows:

Go to Figma Settings → Personal access tokens
Click "Create new token"
Give it a descriptive name (e.g., "Claude Code MCP")
Copy the generated token when prompted by the installer

🎮 Usage After Installation

Once installed, just open Claude Code in your Laravel project:

cd /path/to/your/laravel/project
claude

Then test everything works:

📊 Database & Project Analysis

"Show me the database structure"
"What Laravel version is this project using?"
"Read my .env file and suggest optimizations"

🐙 GitHub Integration

"List recent commits from my private GitHub repo"
"Show me open pull requests"
"What's the current branch status?"

🎨 Figma Design Integration

"Analyze this Figma design: https://www.figma.com/design/ABC123/MyProject"
"Convert this Figma button component to a Livewire component"
"Extract the color palette from this Figma file for Tailwind CSS"

🧠 Memory & Learning

"Remember that we use Filament for admin panels"
"What coding standards do we follow in this project?"
"What decisions have we made about the authentication system?"

🔧 Development Shortcuts

# Load helpful aliases
source .claude/shortcuts.sh

# Quick commands
pa migrate              # php artisan migrate
make-livewire Button   # php artisan make:livewire Button
serve                  # php artisan serve

🛠️ What Gets Installed

The script intelligently manages global vs project-specific resources:

Global MCP Servers (installed once, shared by all projects)

GitHub MCP Server - Repository access across all projects
Memory MCP Server - Shared knowledge base
Context7 - Documentation access
Web Fetch - External API access
Figma MCP Server - Design file access and analysis

Project-Specific MCP Servers (per Laravel project)

Filesystem MCP Server - Access to your project files
Database MCP Server - Connected to your project's database
Laravel DebugBar MCP (if available)

Project Files (created in `.claude/`)

instructions.md - AI-optimized development instructions with Figma usage guide
project_context.md - Project-specific context and tech stack
coding_standards.md - Laravel/Livewire/Filament best practices
memory_prompts.md - Memory initialization for AI learning
shortcuts.sh - Development aliases and shortcuts
README.md - Setup documentation

MCP Server Binaries & Dependencies

Context7 - Built from source with npm
Database MCP - Built from Go source
Web Fetch - Built from TypeScript source
All other servers - Installed via npm globally

The installer automatically configures everything based on your Laravel .env file.

🎨 Figma Integration Features

Design-to-Code Workflow

graph LR
    A[Figma Design] --> B[Share URL with Claude]
    B --> C[Analyze Design Structure]
    C --> D[Extract Design Tokens]
    D --> E[Generate Laravel Components]
    E --> F[Apply Tailwind Styling]
    F --> G[Add Alpine.js Interactions]

Example Figma Commands

# Analyze a complete design
> Please analyze this Figma design and create the corresponding Laravel views

# Extract design system
> Extract all colors, typography, and spacing from this Figma file for our Tailwind config

# Create specific components
> Convert this Figma card component to a Livewire component with proper validation

# Generate admin interface
> Create a Filament resource based on this Figma admin panel design

Supported Figma Features

✅ Design token extraction - Colors, typography, spacing
✅ Component analysis - Buttons, forms, cards, layouts
✅ Layout understanding - Grid systems, responsive design
✅ Auto-layout interpretation - Flexbox and grid generation
✅ Style guide creation - Consistent design system implementation

🔧 Advanced Configuration

Multiple Projects

The installer can be run in multiple Laravel projects. Global MCP servers are shared, while project-specific servers are unique to each project.

Custom Database Connections

Supports MySQL, PostgreSQL, and SQLite. The installer automatically detects your database configuration from .env.

Team Collaboration

All team members can use the same setup. Share your .claude/ folder (except sensitive tokens) for consistent AI assistance across the team.

🐛 Troubleshooting

Interactive Mode Not Working?

If you're running via curl | bash and the interactive prompts aren't working:

# Download and run directly for interactive mode
curl -fsSL https://raw.githubusercontent.com/laraben/laravel-claude-code-setup/main/install.sh -o setup.sh
chmod +x setup.sh
./setup.sh

GitHub Private Repository Access Issues?

The installer should configure this automatically. If you still can't access private repos:

Check if your token is configured:

claude mcp list

Manually update the token in your Claude config:

# Edit the config file
nano ~/.claude.json

# Add your token to the GitHub MCP server configuration

Figma Integration Not Working?

Verify your Figma token is valid
Check that the file you're trying to access is not private (unless you have access)
Use the full Figma URL format: https://www.figma.com/design/FILE_KEY/File-Name

Database Connection Failed?

Make sure your Laravel .env file has valid database credentials before running the installer.

Missing Dependencies?

The installer will tell you what's missing, but you can check manually:

# Check Claude Code
claude --version

# Check Node.js
node --version

# Check Go
go version

# Check npm
npm --version

🆕 What's in v1.0

🎨 Figma Integration

Complete design-to-code workflow with Framelink Figma MCP Server
Automatic design token extraction for Tailwind CSS
Interactive token management with proper update prompts
Laravel-specific design patterns and component generation

🔧 Enhanced User Experience

Improved interactive detection - Works correctly with curl | bash
Better token management - Proper prompts for token updates
Graceful error handling - Continues installation even if some components fail
Smart fallbacks - Multiple installation methods for reliability

🧠 AI-Optimized Instructions

Figma usage guide - Detailed instructions for design integration
Error handling documentation - Clear guidance for common issues
Laravel-specific workflows - Optimized for Laravel + Livewire + Filament + Tailwind

🛠️ Technical Improvements

Robust configuration management - Better handling of existing setups
Cross-platform compatibility - Enhanced support for different environments
Performance optimizations - Faster installation and startup times

🔗 Links & Resources

Repository: github.com/laraben/laravel-claude-code-setup
Claude Code: claude.ai/code
Figma MCP Documentation: framelink.ai
Laravel Documentation: laravel.com/docs

🤝 Contributing

Found a bug or want to add a feature? PRs are welcome!

Fork the repository
Create a feature branch
Make your changes
Add tests if applicable
Submit a pull request

📝 License

MIT License - feel free to use this in your projects!

🙏 Acknowledgments

Claude Code team for the amazing AI development platform
Laravel community for the incredible framework and ecosystem
Figma team for the design tools and API
MCP Server developers for the various integration tools

Made with ❤️ for the Laravel community by @laraben

Transform your Laravel development with AI-powered assistance! 🚀

laraben/laravel-claude-code-setup