Layered Code

⚠️ 開発中 ⚠️

このプロジェクトは現在、活発に開発が進められています。機能、API、ドキュメントは頻繁に変更される場合があります。フィードバックや貢献を歓迎していますが（貢献をご覧ください）、このソフトウェアはまだ本番環境で使用できる段階ではありません。このバナーはバージョン 1.0 に到達した時点で削除されます。

🔍 Layered Code とは？

Layered Code は、ウェブ開発をシームレスな会話からデプロイまでのワークフローへと変革します。Claude Desktop などの MCP 互換ツールを通じて、お好みの AI アシスタントとチャットし、自然言語で作りたいものを説明します。AI がリアルタイムでコードを作成・変更する一方、Vite や Next.js などの最新の開発フレームワークが即時のホットモジュールリプレースメントを提供し、変更を自動的に表示します。結果に満足したら、AI に変更を git リポジトリへコミットして本番サーバーに直接デプロイするよう頼むだけです。複雑なコマンドを覚えたり、複雑な開発ツールを操作したりする必要はありません。

Layered Code の動作を簡単に紹介する動画をご覧ください

主な操作方法：

• 🗣️ Claude Desktop などの AI アシスタントとの自然言語での会話
• 🔌 MCP 統合により、AI はローカルマシン上のプロジェクトファイルに直接アクセスできます
• 🎯 意図に基づく開発 - 目標を説明すれば、AI が技術的な実装を担当します
• 🚀 自動デプロイのための Git 統合 - 会話形式のコマンドで変更をコミットし、本番環境へデプロイできます

会話の例：

ユーザー：「『SmartFlow』という新しい AI プロジェクトを紹介する、ダークテーマの基本的なウェブページを作りたいです。プロジェクト名、簡単な説明、主な機能を下に並べた、すっきりしたヒーローセクションを設けてください。」

Layered Code の MCP ツールを備えた AI は、次のことができます：

• セマンティックなマークアップで HTML 構造を作成する
• 適切なコントラストを備えたモダンなダークテーマの CSS を生成する
• プロジェクトファイルとアセットを自動的に整理する
• モバイルとデスクトップ向けのレスポンシブデザインを設定する

ユーザー：「とてもいいですね！下部にお問い合わせセクションを追加して、機能カードに控えめなホバーエフェクトを付けてもらえますか？」

AI はシームレスに次のことを行います：

• お問い合わせセクションを含めるよう HTML を更新する
• 滑らかなホバーアニメーションで CSS を強化する
• 開発サーバーが自動的に更新され、変更が表示される

ユーザー：「完璧です！では、これらの変更をコミットして本番環境にデプロイしてください。」

AI はバージョン管理とデプロイを担当します：

• 内容がわかるメッセージを付けて変更をコミットする
• 設定済みのデプロイパイプラインを実行する
• 本番サーバーへのデプロイが成功したことを確認する

直接ツールにアクセスするための CLI インターフェースも利用できますが、Layered Code の真価は、MCP を通じた会話型 AI の体験にあります。どのように作るかではなく、何を作りたいかに集中できます。

🎯 開発の動機

Layered Code は、AI 支援開発へのオープンなアプローチを提供します。プロンプトも、プロバイダーも、選択するのはあなたです。

• 🔓 ずっと無料でオープンソース：Layered Code は常に無料のオープンソースであり続けます
• 💻 クロスプラットフォーム対応：macOS、Windows、Linux で動作します
• 🔍 隠れた仕組みはありません：ユーザーに隠された、理解できない不可解な動作をする秘密のプロンプトはありません
• 🛠️ テクノロジーに依存しません：あらゆる言語、フレームワーク、開発環境で動作します
• 🚀 ベンダーロックインはありません：あらゆるホスティングプロバイダー、開発環境、ツールチェーンを使用できます

📦 インストール

オプション 1：Homebrew を使用した macOS/Linux へのインストール（推奨）

brew update
brew tap layered-flow/layered-code
brew install layered-code

オプション 2：インストールスクリプト（macOS/Linux）

システム全体にインストールする場合（推奨）：

curl -fsSL https://raw.githubusercontent.com/layered-flow/layered-code/main/scripts/install.sh | sudo bash

これにより、どこからでも簡単にアクセスできるよう、バイナリが /usr/local/bin にインストールされます。

代わりに現在のディレクトリにインストールする場合は、sudo を省略してください：

curl -fsSL https://raw.githubusercontent.com/layered-flow/layered-code/main/scripts/install.sh | bash

注：このスクリプトは、ripgrep がバンドルされた自己完結型バイナリをダウンロードします。

オプション 3：ビルド済みバイナリ

プラットフォームに適したアーカイブを GitHub のリリースページ からダウンロードしてください。各アーカイブには、layered-code バイナリとバンドル済みの rg（ripgrep）バイナリの両方が含まれています：

• macOS（Intel）：layered-code_Darwin_x86_64.tar.gz
• macOS（Apple Silicon）：layered-code_Darwin_arm64.tar.gz
• Linux（x86_64）：layered-code_Linux_x86_64.tar.gz
• Linux（ARM64）：layered-code_Linux_arm64.tar.gz
• Windows（x86_64）：layered-code_Windows_x86_64.zip
• Windows（ARM64）：layered-code_Windows_arm64.zip（エミュレーション経由で x64 ripgrep バイナリを使用します）

セットアップ手順：

macOS/Linux：

1. アーカイブを展開します：tar -xzf layered-code_*.tar.gz
2. 両方のバイナリに実行権限を付与します：chmod +x layered-code rg
3. 両方のバイナリを同じディレクトリに移動します：
   • ユーザー単位でインストールする場合：mkdir -p ~/bin && mv layered-code rg ~/bin/
   • システム全体にインストールする場合：sudo mv layered-code rg /usr/local/bin/
4. 簡単にアクセスできるよう、インストール先が PATH に含まれていることを確認します

Windows：

1. zip ファイルを展開します（layered-code.exe と rg.exe が含まれています）
2. 両方の実行ファイルを、使いやすい同じ場所（例：C:\Users\YourUsername\bin\）に移動します
3. ディレクトリを PATH 環境変数に追加します：
   • システムのプロパティで「環境変数」を開きます
   • 両方の実行ファイルが含まれるディレクトリを PATH に追加します

重要： 正しく動作させるため、layered-code と rg（ripgrep）のバイナリは同じディレクトリに配置してください。

✨ Claude Desktop でクイックスタート

Ollama を通じたオープンソースモデルのサポートも予定されていますが、現時点では Layered Code が依存する Model Context Protocol を Claude Desktop が最も適切にサポートしています。

1. Claude Desktop をインストールします

2. 開発者モードを有効にします：

   • Claude Desktop を開きます
   • 設定に移動します
   • 「Developer」タブを開きます
   • まだ有効になっていない場合は「Developer Mode」を有効にします

3. layered-code をインストールします：上記のインストール手順に従い、バイナリのパスを確認します

4. MCP サーバーを設定します：

   • Claude Desktop の設定 → Developer → Edit Config を開きます
   • claude_desktop_config.json に追加します：

Claude Desktop で MCP サーバーを設定する

claude_desktop_config.json（設定 → Developer → Edit Config）に以下を追加します。インストール方法とプラットフォームに応じて、command のパスを調整してください：

プラットフォーム／インストール方法	"command" の値の例
macOS/Linux（Homebrew）	layered-code
macOS/Linux（手動／バイナリ）	/usr/local/bin/layered-code
Windows	C:\\Users\\YourUsername\\bin\\layered-code.exe

Windows に関する注意： "command" の値では、二重バックスラッシュ（\\）を使ってフルパスを指定してください。

設定例：

{
  "globalShortcut": "",
  "mcpServers": {
    "layered-code": {
      "command": "<see table above>",
      "args": ["mcp_server"]
    }
  }
}

5. Claude Desktop を完全に再起動します（Windows では、Claude のバックグラウンドタスクを「タスクの終了」する必要がある場合があります）
6. 確認：Claude のツールメニューに「layered-code」が表示されていることを確認します

🔧 オプション：カスタムアプリディレクトリ

デフォルトでは、Layered Code はアプリケーションのディレクトリとして ~/LayeredApps を使用します。カスタムディレクトリを使用するには：

MCP（Claude Desktop）の場合： 設定に env セクションを追加します：

{
  "globalShortcut": "",
  "mcpServers": {
    "layered-code": {
      "command": "layered-code",
      "args": ["mcp_server"],
      "env": {
        "LAYERED_APPS_DIRECTORY": "~/MyCustomAppsFolder"
      }
    }
  }
}

CLI を使用する場合： シェルで LAYERED_APPS_DIRECTORY 環境変数を設定します：

export LAYERED_APPS_DIRECTORY="~/MyCustomAppsFolder"
layered-code tool lc_apps_list

🔒 セキュリティ

Layered Code は、カスタムアプリディレクトリを設定する際もセキュリティを維持します。

• セキュリティのため、パスがユーザーのホームディレクトリ内にあることを検証します
• 相対パスも使用でき、ユーザーのホームディレクトリを基準に解決されます

🖥️ CLI の使用方法

コマンドラインから layered-code を直接使用します。

# Start MCP server
layered-code mcp_server

# List apps
layered-code tool lc_apps_list

# Get version information
layered-code version
layered-code -v
layered-code --version

# Get help and usage information
layered-code help
layered-code -h
layered-code --help

利用可能なコマンド：

• mcp_server - Claude Desktop との連携用に Model Context Protocol サーバーを起動します

• tool - さまざまなツールやユーティリティを実行します（以下のようなサブコマンドと併用します）

  ファイル管理ツール：

  • tool lc_apps_list - ~/LayeredApps ディレクトリ内で利用可能なアプリケーションをすべて一覧表示します
  • tool lc_file_list - アプリケーション内のファイルとディレクトリを、任意のメタデータとともに一覧表示します（最大深度：10,000 レベル）
  • tool lc_text_search - ripgrep を使用して、アプリケーションディレクトリ内のファイルからテキストパターンを検索します
  • tool lc_file_read - アプリケーションディレクトリ内のファイルの内容を読み取ります
  • tool lc_file_write - アプリケーションディレクトリ内のファイルを書き込むか、新規作成します
  • tool lc_file_edit - 検索と置換によってファイルを編集します
  • tool lc_file_move - アプリケーションディレクトリ内のファイルを移動または名前変更します
  • tool lc_file_delete - アプリケーションディレクトリ内のファイルを削除します
  • tool lc_file_copy - アプリケーションディレクトリ内のファイルをコピーします
  • tool lc_folder_delete - アプリケーションディレクトリ内のフォルダーとその内容をすべて削除します（破壊的な操作）
  • tool lc_chrome_visit - Chrome ブラウザーで URL にアクセスし、JavaScript の読み込み後にページの内容を取得します

  Vite ツール：

  • tool vite_app_create - さまざまなテンプレート（React、Vue、Svelte など）を使用して、新しい Vite アプリを作成します

  Next.js ツール：

  • tool nextjs_app_create - TypeScript（デフォルト）、JavaScript、Tailwind、または App Router のテンプレートを使用して、新しい Next.js アプリを作成します
    • CLI フラグ：--src-dir（src ディレクトリを使用。デフォルト：true）、--import-alias（デフォルト：@/*）、--turbopack（デフォルト：true）
    • 例：tool nextjs_app_create myapp typescript --src-dir --import-alias="~/”

  パッケージマネージャーツール：

  • tool pnpm_install - pnpm（推奨）または npm を使用して依存関係をインストールします
  • tool pnpm_add - pnpm（推奨）または npm を使用して、1 つ以上のパッケージを追加します
    • 単一パッケージ：pnpm_add myapp express
    • 複数パッケージ：pnpm_add myapp express cors @types/node
  • tool pnpm_pm2 - PM2 を使用して Node.js プロセスを管理します
    • コマンド：start <app>、stop <app|all>、restart <app|all>、delete <app|all>、list、logs [app] [flags]
    • package.json から dev/start スクリプトを自動検出します
    • ecosystem.config.js がある場合は使用します
    • 利用できない場合は PM2 を自動的にインストールします
    • logs コマンドにはデフォルトで --nostream が含まれます（直近 15 行を表示して終了します）
    • 追加のフラグを渡すこともできます。例：logs myapp --lines 100 で、より多くの行を表示します

  JavaScript/TypeScript ツール：

  • tool lc_js_lint - 任意の自動修正機能を使用して、JavaScript/TypeScript ファイルの ESLint 解析を実行します
    • 指定されたアプリディレクトリで ESLint を実行し、結果を JSON 形式で返します
    • 使用方法：lc_js_lint <app_name> [--fix] [--config=<config_file>] <files...>
    • オプション：
      • --fix：修正可能な問題を自動的に修正します
      • --config=<file>：特定の ESLint 設定ファイルを使用します
      • --help、-h：ヘルプメッセージを表示します
    • 重要な注意事項：
      • ファイルは相対パスで指定する必要があります（絶対パスや .. は使用できません）
      • 設定ファイルはアプリディレクトリからの相対パスで指定する必要があります
      • セキュリティ上、使用できるオプションは --config と --fix のみです
    • 例：
      • 単一ファイル：lc_js_lint myapp src/index.js
      • リントと修正：lc_js_lint myapp --fix src/index.js src/app.js
      • glob パターンを使用：lc_js_lint myapp "src/**/*.js" "tests/**/*.js"
      • 設定を指定して修正：lc_js_lint myapp --fix --config=.eslintrc.json src/index.js プロンプトツール：
  • tool lc_prompt_list - 利用可能なすべてのプロンプトを、数値 ID、名前、バージョン、説明とともに一覧表示します
    • 各プロンプトの最新バージョンのみを表示します
    • 詳細については --help を使用してください
  • tool lc_prompt_read - 数値 ID と任意のバージョンを指定して、プロンプトの全文を読み込みます
    • 重要：MCP を使用する LLM は、各会話の開始時にプロンプト ID '1'（一般原則）を自動的に読み込む必要があります
    • 例（最新バージョン）：lc_prompt_read 1
    • バージョンを指定する例：lc_prompt_read 1:2
    • 詳しい構文と例については --help を使用してください

  Git ツール：

  • tool git_status - git リポジトリの作業ツリーの状態を表示します
  • tool git_diff - コミット間、コミットと作業ツリー間などの変更を表示します
  • tool git_commit - ステージされた変更を使って新しいコミットを作成します
  • tool git_log - コミットログを表示します
  • tool git_branch - ブランチを一覧表示、作成、または削除します
  • tool git_add - ファイルの内容をステージングエリアに追加します
  • tool git_restore - 作業ツリーのファイルを復元します
  • tool git_stash - 変更のある作業ディレクトリの変更を stash に保存します
  • tool git_push - 関連オブジェクトとともにリモート参照を更新します
  • tool git_pull - 別のリポジトリまたはローカルブランチから取得して統合します
  • tool git_init - 新しい git リポジトリを初期化します

• version、-v、--version - layered-code の現在のバージョンを表示します

• help、-h、--help - 使用方法と利用可能なコマンドを表示します

🏗️ ソースからビルドする

Layered Code をソースからビルドするには：

# Clone the repository
git clone https://github.com/layered-flow/layered-code.git
cd layered-code

# Build with make (downloads ripgrep binaries automatically)
make build

# Or build for all platforms
make build-all

# Run tests
make test

# Verify installation
layered-code

🧪 テストの実行

テストスイートを実行して、すべてが正しく動作していることを確認してください：

# Run all tests
go test ./...

# Run tests with verbose output
go test -v ./...

🤝 コントリビュート

コミュニティからのコントリビュートには大きな可能性があると期待しています！Layered Code は現在、バージョン 1.0 に向けて成熟を進めている段階のため、コア機能と API の安定化に重点を置いています。この期間中、GitHub Issues でアイデアやフィードバックをお寄せいただくことは歓迎しますが、迅速な進行と必要な破壊的変更を可能にするため、プルリクエストは受け付けていません。

バージョン 1.0 に到達し、基盤が整ったら、コミュニティからのプルリクエストも喜んで受け付けます。このように焦点を絞った進め方が、長期的にはすべての人にとってより良い体験につながると考えています。

お気軽に、次のことをお寄せください：

• アイデアや提案を共有するために Issue を作成する
• 発生したバグを報告する
• プロジェクトについて質問する
• 機能やドキュメントについてフィードバックを送る

ご理解とプロジェクトへの関心に感謝いたします！🙏

📝 ライセンス

このプロジェクトは MIT License の下でライセンスされています。詳細については LICENSE.md ファイルをご覧ください。

サードパーティコンポーネント

このソフトウェアにはサードパーティコンポーネントが含まれています。ライセンス条件については THIRD-PARTY-LICENSES.md をご覧ください。

Copyright (c) 2025 Layered Flow
https://www.layeredflow.ai/