claudable Documentation

repository·main·Indexed 26 days ago

https://github.com/opactorai/claudable

An AI-powered web app builder based on Next.js that enables developers to create apps using natural language via AI agents such as Claude Code, Cursor CLI, Codex CLI, and Qwen Code. It supports instant deployment to Vercel with Supabase integration and can be run as a desktop application via Electron. The system includes utilities for project and message management, model ID normalization for Claude and Qwen, and AES-256-CBC encryption.

Tokens
5.2K
Snippets
15
Records
54
Agent score
88%

What's inside claudable

  1. Install and Setup Claude Code (Recommended Agent)

    main

    Claude Code is the recommended AI agent for Claudable. It provides deep codebase awareness and direct terminal integration.

    Installation:

    1. Install the package globally via npm.
    2. Run the claude command and follow the /login prompt to authenticate.
    npm install -g @anthropic-ai/claude-code
    claude  # then > /login
  2. Integrate GitHub, Vercel, and Supabase

    main

    To enable deployment and database features, connect your accounts in the Claudable Settings under Service Integrations.

    GitHub Integration:

    • Generate a Classic Personal Access Token at GitHub settings.
    • Ensure the token has the repo scope.

    Vercel Integration:

    • Create a token in your Vercel Account Settings.

    Supabase Integration:

    • Obtain your Project URL, Anon Key, and Service Role Key from your Supabase Dashboard (Settings → API).
  3. Install and Setup Codex CLI

    main

    Codex CLI is an OpenAI-powered agent with high reasoning capabilities. It supports interactive, auto-edit, and full-auto operating modes.

    Installation:

    1. Install the package globally via npm.
    2. Run the codex command and login with your ChatGPT account.
    npm install -g @openai/codex
    codex  # login with ChatGPT account
  4. Install and Setup Cursor CLI

    main

    Cursor CLI is a multi-model AI agent that supports Anthropic and OpenAI models, as well as AGENTS.md support.

    Installation:

    1. Install via the official curl script.
    2. Run cursor-agent login to authenticate.
    curl https://cursor.com/install -fsS | bash
    cursor-agent login
  5. Build and Run Claudable Desktop App (Electron)

    main

    You can run Claudable as a desktop application for macOS, Windows, or Linux using the following commands:

    • Development mode: Run the desktop version in dev mode.
    • Build: Compile the desktop application.
    • Package: Create platform-specific installers.
    # Development mode
    npm run dev:desktop
    
    # Build desktop app
    npm run build:desktop
    
    # Package for specific platforms
    npm run package:mac      # macOS
    npm run package:win      # Windows
    npm run package:linux    # Linux
  6. Quick Start Guide for Claudable

    main

    To get Claudable running on your local machine, clone the repository, install dependencies, and start the development server. The application will be available at http://localhost:3000 (or the next available port if 3000 is occupied).

    Prerequisites:

    • Node.js 18+
    • Claude Code or Cursor CLI (already logged in)
    • Git
    # Clone the repository
    git clone https://github.com/opactorai/Claudable.git
    cd Claudable
    
    # Install all dependencies
    npm install
    
    # Start development server
    npm run dev
  7. Install supported AI Coding Agents

    main

    Claudable supports several AI coding agents. Use the following commands to install them globally on your system:

    • Claude Code: npm install -g @anthropic-ai/claude-code
    • Codex CLI: npm install -g @openai/codex
    • Cursor Agent: curl https://cursor.com/install -fsS | bash
    • Qwen Coder: npm install -g @qwen-code/qwen-code
    • GLM CLI: zai devpack install claude
    npm install -g @anthropic-ai/claude-code
    npm install -g @openai/codex
    curl https://cursor.com/install -fsS | bash
    npm install -g @qwen-code/qwen-code
    zai devpack install claude
  8. Troubleshoot Claude Code Permission Issues on Windows/WSL

    main

    If you encounter the error Error output dangerously skip permissions cannot be used which is root sudo privileges for security reasons, follow these steps:

    1. Do not run Claude Code with sudo or as root.
    2. Fix file ownership in WSL:
      sudo chown -R $(whoami):$(whoami) ~/Claudable
    3. Reinstall Claude Code without sudo:
      npm install -g @anthropic-ai/claude-code --unsafe-perm=false
  9. Configure the ENCRYPTION_KEY environment variable

    main

    The encryption utilities rely on the ENCRYPTION_KEY environment variable to derive the AES-256-CBC key.

    • Requirement: To ensure that data encrypted during one execution can be decrypted in a later execution, you must provide a consistent key.
    • Behavior: If ENCRYPTION_KEY is absent, the library generates a random key using crypto.randomBytes(32).toString('hex'). This makes the encryption non-persistent across process restarts.
  10. Configure Global CLI settings

    main

    Global settings allow you to define a defaultCli and specific configurations for each supported CLIType. Use the cliSettings object to map a CLIType to its specific model or other configuration parameters.

    export interface GlobalSettings {
      defaultCli?: CLIType;
      cliSettings?: {
        [key in CLIType]?: {
          model?: string;
          [key: string]: any;
        };
      };
    }
  11. Manage Claudable Database and Dependencies

    main

    Use these commands to manage the local SQLite database and clean up your environment.

    Database Commands:

    • npm run db:backup: Creates a backup of the SQLite database in data/backups/cc_backup_[timestamp].db.
    • npm run db:reset: Resets the database to its initial state (Warning: deletes all data).
    • npm run prisma:reset: Drops and recreates the database to match the latest schema (useful for migration conflicts).

    Maintenance Commands:

    • npm run clean: Removes node_modules/ and package-lock.json for a fresh start.
    npm run db:backup
    npm run db:reset
    npm run prisma:reset
    npm run clean