🛠️ DYIable

AI-powered React and Supabase app builder powered by Claude Code

DYIable is a framework inspired by Lovable.dev that helps you rapidly build React and Supabase applications with AI assistance. It provides opinionated scaffolding, local development with Supabase, and seamless integration with Claude Desktop via MCP (Model Context Protocol).

✨ Features

• 🚀 Quick Setup: Go from zero to running app in < 5 minutes
• 🤖 AI-Powered Development: Integrate with Claude Desktop for AI-assisted coding
• 🏗️ Opinionated Stack: React + Vite + Supabase pre-configured
• 🔌 MCP Integration: Claude Desktop can directly scaffold components, migrations, and features
• 📦 Feature Templates: Pre-built auth, payments, uploads, and more
• 🎨 Component Library Support: Shadcn UI, Chakra UI, Material UI, or Tailwind
• 🚢 Easy Deployment: One-command deployment to Vercel, Netlify, or Cloudflare
• 🔒 Local Development: Full local Supabase instance with Docker

🎯 Why DYIable?

DYIable vs Just Using Claude Code:

• ✅ Pre-configured React + Vite + Supabase (30 min → 2 min)
• ✅ Supabase-specific tools (migrations, types, RLS patterns)
• ✅ Feature templates that handle integration complexity
• ✅ Deployment automation
• ✅ Best practices baked in

DYIable vs Lovable:

• ✅ Local-first development (full control, works offline)
• ✅ Use your own editor and tools
• ✅ No vendor lock-in
• ✅ Open source and extensible

📋 Prerequisites

• Node.js >= 18.0.0
• Docker Desktop (for local Supabase)
• Supabase CLI (recommended): brew install supabase/tap/supabase
• Claude Desktop (for AI assistance)

🚀 Quick Start

1. Install DYIable

```bash npm install -g dyiable ```

2. Create a New Project

```bash dyiable init my-app ```

Follow the interactive prompts to configure your project:

• Project name and description
• Features (auth, payments, uploads, etc.)
• Component library (Shadcn UI, Chakra, MUI, or Tailwind)
• TypeScript support

3. Start Development

```bash cd my-app

Start local Supabase

supabase start

Copy the API URL and anon key to .env.local

Start dev server

npm run dev ```

Your app is now running at http://localhost:5173!

🤖 Claude Desktop Integration

DYIable provides an MCP server that lets Claude Desktop directly interact with your project.

Setup MCP Integration

```bash

Register DYIable MCP server with Claude Desktop

dyiable mcp register

Restart Claude Desktop

```

Available MCP Tools

Once registered, Claude can:

1. Scaffold Components

   • "Create a new UserProfile component"
   • "Add a DashboardLayout component"

2. Create Migrations

   • "Create a migration for a posts table with title and content"
   • "Add a users_profiles table"

3. Generate Types

   • "Generate TypeScript types from the database schema"

4. Add Features

   • "Add authentication to the project"
   • "Set up Stripe payments"

Example Conversation with Claude

``` You: Create a new component called ProductCard that displays product info

Claude: I'll create that component for you. [Uses scaffold_component tool] ✓ Created src/components/ProductCard.tsx

You: Now create a migration for a products table

Claude: I'll create a migration for the products table. [Uses create_migration tool] ✓ Created supabase/migrations/20240115_create_products.sql ```

📦 CLI Commands

dyiable init [project-name]

Initialize a new React + Supabase project.

Options:

• --template <template>: Template to use (default: 'default')
• --skip-install: Skip npm install
• --skip-supabase: Skip Supabase setup

dyiable add-feature <feature>

Add a pre-built feature to your project.

Available features:

• auth: Email/password authentication
• auth-oauth: OAuth providers (Google, GitHub, etc.)
• stripe: Stripe payments integration
• uploads: File upload functionality
• realtime: Real-time features

Options:

• -p, --path <path>: Project path (default: '.')

Example: ```bash dyiable add-feature auth ```

dyiable deploy [target]

Deploy your app to a hosting platform.

Available targets:

• vercel (default)
• netlify
• cloudflare

Options:

• -p, --path <path>: Project path (default: '.')
• --skip-build: Skip build step

Example: ```bash dyiable deploy vercel ```

dyiable chat

Start an AI chat session for your project using Claude API.

Options:

• -p, --path <path>: Project path (default: '.')
• -k, --api-key <key>: Claude API key (or set ANTHROPIC_API_KEY env var)

Example: ```bash export ANTHROPIC_API_KEY=your-key-here dyiable chat ```

dyiable mcp [action]

Manage MCP server integration with Claude Desktop.

Actions:

• status: Check MCP server registration status
• register: Register DYIable MCP server with Claude Desktop
• start: Start MCP server (for development)

🏗️ Project Structure

``` my-app/ ├── supabase/ │ ├── config.toml # Supabase configuration │ └── migrations/ # Database migrations ├── src/ │ ├── components/ # React components │ ├── pages/ # Page components │ ├── hooks/ # Custom React hooks │ ├── lib/ │ │ └── supabase.ts # Supabase client │ ├── types/ │ │ └── database.ts # Generated DB types │ └── utils/ # Utility functions ├── .env.local # Environment variables ├── package.json ├── vite.config.ts └── tailwind.config.js ```

🎨 Component Libraries

DYIable supports several component libraries:

• Shadcn UI (recommended): Tailwind + Radix UI components
• Chakra UI: Complete component system
• Material UI: Google's Material Design
• None: Just Tailwind CSS

🗃️ Supabase Integration

Local Development

```bash

Start local Supabase (requires Docker)

supabase start

Create a migration

dyiable mcp register # Then ask Claude to create migrations

Or manually:

supabase migration new create_posts

Apply migrations

supabase db reset ```

Generate TypeScript Types

```bash

Via CLI

supabase gen types typescript --local > src/types/database.ts

Or via Claude with MCP

Just ask: "Generate TypeScript types from the database"

```

Remote Deployment

```bash

Link to Supabase project

supabase link --project-ref your-project-ref

Push migrations to remote

supabase db push ```

🚢 Deployment

Vercel (Recommended)

```bash

Install Vercel CLI

npm install -g vercel

Deploy

dyiable deploy vercel

Or manually:

vercel --prod ```

Environment Variables

Make sure to set these in your hosting platform:

• VITE_SUPABASE_URL: Your Supabase project URL
• VITE_SUPABASE_ANON_KEY: Your Supabase anon/public key

🤝 Contributing

DYIable is open source but uses a non-commercial license. See LICENSE.md for details.

Contributions are welcome! Please:

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Submit a pull request

📝 License

DYIable is licensed under the Business Source License 1.1 (BSL).

What This Means:

✅ FREE Production Use:

• Solo developers: Unlimited revenue, build and sell anything (non-competing)
• Small teams: ≤5 people AND ≤$500K annual revenue
• Solo freelancers: Build projects for any clients
• Education: Students and teachers
• Small non-profits: ≤$1M annual revenue
• Anyone: Non-production use (dev, test, staging)

💰 Commercial License Required:

• Organizations with >5 employees/contractors
• Organizations with >$500K annual revenue
• Multi-person agencies and consulting firms
• Any production use exceeding free tier limits

🚫 Never Allowed:

• Building competing scaffolding-as-a-service
• Competing with Lovable.dev or DYIable

⏰ In 4 Years (October 2029):

• DYIable automatically converts to Apache License 2.0
• Becomes fully open source with no restrictions

This is NOT traditional open source (yet), but it will be! See LICENSE.md and LICENSE-FAQ.md for full details.

Philosophy: Companies should pay for tools that help them build products. Solo developers and small teams build freely; growing companies contribute back.

For commercial licensing: theodor@byteventures.se

🐛 Issues & Support

• Report bugs: GitHub Issues
• Documentation: [Coming soon]
• Community: [Coming soon]

🗺️ Roadmap

v0.1 (Current)

• ✅ Basic project scaffolding
• ✅ MCP server integration
• ✅ Component scaffolding
• ✅ Migration tools
• ✅ Vercel deployment

v0.2 (Coming Soon)

• 🚧 Auth feature templates
• 🚧 Stripe integration template
• 🚧 File upload template
• 🚧 Real-time features template
• 🚧 More deployment targets

v0.3 (Future)

• 🔮 AI-powered code generation improvements
• 🔮 Testing utilities
• 🔮 Performance optimization tools
• 🔮 Database seed/fixture management
• 🔮 Component library templates

💡 Tips & Best Practices

1. Use Claude Desktop with MCP: This is the most powerful way to use DYIable
2. Start local Supabase early: Run supabase start before development
3. Keep migrations small: One logical change per migration
4. Generate types frequently: After each migration, regenerate types
5. Use Row Level Security: Enable RLS on all tables for security
6. Environment variables: Never commit .env.local to git

🙏 Acknowledgments

• Inspired by Lovable.dev
• Built with Claude Code
• Powered by Supabase
• Uses MCP for AI integration

Happy building with DYIable! 🎉