Claudable - AIエージェントベースのオープンソースWebアプリケーションビルダー

プロジェクト概要

Claudableは、Next.jsを基盤とした強力なWebアプリケーションビルダーです。Claude Code（Cursor CLIもサポート）の高度なAIエージェント機能と、Lovableのシンプルで直感的なアプリケーション構築体験を融合させています。「ダークモード対応のタスク管理アプリが欲しい」といったアプリのアイデアを記述するだけで、Claudableが即座にコードを生成し、動作するアプリのリアルタイムプレビューを表示します。

このオープンソースプロジェクトにより、プロフェッショナルなWebアプリケーションを無料で簡単に構築・デプロイできます。

コア特性

🤖 強力なAIエージェントサポート

• Claude Code: Anthropicの高度なAIコーディングエージェント。高い推論能力、ローカル実行、複数の操作モード（インタラクティブ、自動編集、全自動）
• Cursor CLI: 複雑なコーディングタスクに適したスマートコーディングエージェント
• ネイティブMCPサポート: Claude CodeおよびCursor CLIエージェントの能力を最大限に活用

💻 開発体験

• 自然言語からコードへ: 構築したいものを記述するだけで、Claudableが本番環境対応のNext.jsコードを生成
• リアルタイムプレビュー: ホットリロードにより変更を即座に確認。AIがアプリを構築する様子をリアルタイムで視覚化
• ゼロコンフィグ起動: 複雑なサンドボックス、APIキー、データベース設定は不要。すぐに構築を開始
• 美しいUI生成: Tailwind CSSとshadcn/uiを使用して、洗練されたユーザーインターフェースを生成

🚀 デプロイと統合

• ワンクリックデプロイ: 設定不要でVercelにアプリをワンクリックでプッシュ
• GitHub統合: 自動バージョン管理と継続的デプロイ設定
• Supabaseデータベース: 本番環境対応のPostgreSQLデータベースをプロジェクトに直接接続
• 自動エラー検出: アプリ内のエラーを検出し、自動的に修正

💰 コストメリット

• 完全無料: アプリケーションビルダー以外に追加のサブスクリプション費用なし
• オープンソース: MITライセンスで商用利用可能
• ベンダーロックインなし: 生成されたコードはユーザーが所有し、どこでも変更またはホスト可能

技術アーキテクチャ

フロントエンド技術スタック

• Next.js: モダンなReactフレームワーク
• Tailwind CSS: ユーティリティファーストのCSSフレームワーク
• shadcn/ui: モダンなUIコンポーネントライブラリ
• TypeScript: 型安全なJavaScript

バックエンド技術スタック

• Python: バックエンドAPIサーバー
• SQLite: ローカル開発データベース
• PostgreSQL: 本番環境データベース（オプション）

AIエージェント統合

• Claude Code: 主に推奨されるAIコーディングエージェント
• Cursor CLI: 代替のスマートコーディングツール
• MCPサポート: Model Context Protocolのネイティブ統合

インストールとセットアップ

システム要件

# 必須コンポーネント
- Node.js 18+
- Python 3.10+
- Claude Code または Cursor CLI（ログイン済み）
- Git

クイックインストール

# リポジトリをクローン
git clone https://github.com/opactorai/Claudable.git
cd Claudable

# すべての依存関係をインストール（Node.jsとPython）
npm install

# 開発サーバーを起動
npm run dev

アプリケーションアクセスアドレス

• フロントエンド: http://localhost:3000
• APIサーバー: http://localhost:8080
• APIドキュメント: http://localhost:8080/docs

注意：ポートは自動的に検出され、デフォルトポートが使用中の場合は次の利用可能なポートが割り当てられます。

手動セットアップ（オプション）

# フロントエンド設定
cd apps/web
npm install

# バックエンド設定
cd ../api
python3 -m venv .venv
source .venv/bin/activate  # Windows: .venv\Scripts\activate
pip install -r requirements.txt

使用流程

1. AIエージェントの接続

まず、Claude CodeまたはCursor CLIにログインしていることを確認してください。

# Claude Codeログイン
claude
> /login

# Cursor CLIログイン
cursor-agent login

2. Claudableの起動

npm run dev

3. プロジェクト要件の記述

構築したいアプリケーションを自然言語で記述します。例：

• 「ユーザー認証付きのタスク管理アプリを作成」
• 「ダークモード対応の個人ブログを作成」
• 「シンプルなEコマースサイトを構築」

4. AIによるコード生成の確認

AIが自動的にプロジェクト構造とコードを生成し、リアルタイムでプレビューを確認できます。

5. 本番環境へのデプロイ

統合されたVercelデプロイ機能を使用して、アプリケーションをワンクリックで公開します。

データベース管理

ローカル開発

• data/cc.dbにSQLiteデータベースを使用
• 初回実行時に自動的に初期化

ユーティリティコマンド

# データベースのバックアップ
npm run db:backup

# データベースのリセット
npm run db:reset

# すべての依存関係をクリーンアップ
npm run clean

サービス統合

GitHub統合

1. トークンの取得: GitHub Personal Access Tokens → Generate new token (classic) → Select repo scope
2. 接続: Settings → Service Integrations → GitHub → Enter token → Create or connect repository

Vercelデプロイ

1. トークンの取得: Vercel Account Settings → Create Token
2. 接続: Settings → Service Integrations → Vercel → Enter token → Create new project for deployment

Supabaseデータベース

1. 認証情報の取得: Supabase Dashboard → Your Project → Settings → API
   • Project URL: https://xxxxx.supabase.co
   • Anon Key: クライアント公開キー
   • Service Role Key: サーバーサイドキー

よくある質問解決

権限エラー

# 現在のユーザーを確認
whoami

# プロジェクトディレクトリの所有権を変更
sudo chown -R $(whoami):$(whoami) ~/Claudable

依存関係の問題

# すべての依存関係をクリーンアップして再試行
npm run clean
npm install

WSLユーザーへの注意

Claude Codeはrootアカウントではなく、ユーザーアカウントで実行するようにしてください。

適用シーン

1. 迅速なプロトタイプ開発

• 起業家が製品アイデアを検証
• プロダクトマネージャーがデモ用プロトタイプを作成
• デザイナーがインタラクティブなデザインモックアップを作成

2. Web開発の学習

• プログラミング初心者向けに、AIが要件をコードに変換する様子を観察
• モダンなWebアプリケーションアーキテクチャと開発プロセスを理解

3. フロントエンド開発の自動化

• フロントエンド開発者が反復的な開発タスクを自動化
• プロジェクトフレームワークとUIコンポーネントを迅速に構築

4. ノーコード/ローコード開発

• デザイナーやマーケターがシンプルなWebアプリケーションを単独で完成
• 専門の開発者への依存を軽減

プロジェクトの利点

費用対効果

• 完全無料: サブスクリプション費用や利用制限なし
• 追加API費用なし: 既存のClaudeまたはCursorのサブスクリプションを直接利用

開発速度

• 数分での開発: アイデアを動作するアプリケーションに数分で変換
• 本番環境対応: 業界のベストプラクティスに準拠したクリーンで保守性の高いコードを生成
• 即時フィードバック: リアルタイムプレビュー機能により開発フィードバックサイクルを短縮

柔軟性

• 複数のAIエージェントをサポート: Claude CodeとCursor CLIをサポート
• ベンダーロックインなし: 完全なコード所有権
• カスタマイズ可能: 生成されたコードは変更・拡張可能

将来の開発計画

プロジェクトのロードマップに基づき、以下の機能が近日中にリリース予定です。

• 新しいCLIエージェント: より多くのAIコーディングツールをサポート
• 会話チェックポイント: 会話/コードベースの状態を保存および復元
• 強化されたMCP統合: ネイティブMCPの深い統合
• サブエージェントシステム: 強化されたエージェントシステムアーキテクチャ

オープンソース情報

• GitHub: https://github.com/opactorai/Claudable
• 開発者: OPACTOR (https://opactor.ai)
• コミュニティサポート: 活発なオープンソースコミュニティによる継続的な更新と改善

まとめ

Claudableは、AIエージェントを通じて自然言語の記述を直接デプロイ可能なWebアプリケーションに変換する、Web開発の新しいパラダイムを提示します。これにより、Web開発の敷居が下がるだけでなく、開発効率も大幅に向上し、現代の開発者ツールキットに不可欠なツールとなるでしょう。