Stellify MCP

🚀 Stellify MCP Server

AIネイティブなコード生成プラットフォームであるStellify用のModel Context Protocol (MCP)サーバーです。このサーバーを使うことで、AIアシスタントがStellifyプロジェクトと対話し、LaravelやVue.jsアプリケーションを段階的に構築できます。

🚀 クイックスタート

前提条件

• Node.js 18以上
• Stellifyアカウント - stellisoft.comでサインアップしてください。
• Claude Desktop (または他のMCP互換のAIクライアント)

インストール

npmを使ってグローバルにインストールします。

npm install -g @stellisoft/stellify-mcp

設定

1. Stellify APIトークンを取得する

   • Stellifyにログインします。
   • 設定 → APIトークンに移動します。
   • 「新しいトークンを作成」をクリックします。
   • トークンをコピーします。

2. Claude Desktopを設定する Claude Desktopの設定ファイルを編集します。

   • macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
   • Windows: %APPDATA%\Claude\claude_desktop_config.json
   • Linux: ~/.config/claude/claude_desktop_config.json

   Stellify MCPサーバーを追加します。

   {
     "mcpServers": {
       "stellify": {
         "command": "stellify-mcp",
         "env": {
           "STELLIFY_API_URL": "https://api.stellisoft.com/v1",
           "STELLIFY_API_TOKEN": "your-token-here"
         }
       }
     }
   }
   

3. Claude Desktopを再起動する

以上で設定は完了です。Claude DesktopでStellifyツールが利用可能になります。

✨ 主な機能

このMCPサーバーを使用すると、AIアシスタント（Claude Desktopなど）がStellifyプロジェクトと対話し、LaravelとVue.jsアプリケーションを段階的に構築できます。AIは一度に完全なコードファイルを生成する代わりに、以下のことができます。

• ファイル構造（クラス、コントローラー、モデル、ミドルウェア、Vueコンポーネント）を作成する
• 型ヒント付きのメソッドシグネチャを追加する
• PHP/JavaScriptコードを構造化されたJSONにパースする（文ごとに）
• HTMLを一度の操作でStellify要素に変換する
• プロジェクト内の既存のコードを検索する
• グローバルライブラリから再利用可能なコードをインストールする
• 自然な会話を通じてアプリケーションを構築する

💻 使用例

基本的な使用法

設定が完了したら、Claudeと自然に会話してアプリケーションを構築できます。

新しいコントローラーを作成する

"Create a UserController in my Stellify project"

メソッドを追加する

"Add a method called 'store' that takes a Request parameter and returns a JsonResponse"

メソッドのロジックを実装する

"Add this implementation to the store method:
$user = User::create($request->validated());
return response()->json($user, 201);"

Vueコンポーネントを構築する

"Create a Counter component with an increment button"

HTMLを要素に変換する

"Convert this HTML to Stellify elements:
<div class='container'><h1>Hello</h1><button>Click me</button></div>"

コードベースを検索する

"Search for all controller files in my project"
"Find methods related to authentication"

📚 ドキュメント

利用可能なツール

プロジェクトとディレクトリツール

get_project

認証されたユーザーのアクティブなStellifyプロジェクトを取得します。他の操作を行う前に最初にこれを呼び出してください。

パラメーター: なし

戻り値:

• uuid: プロジェクトのUUID（ほとんどの操作に必要）
• name: プロジェクト名
• directories: 既存のディレクトリの {uuid, name} の配列

get_directory

UUIDでディレクトリを取得し、その内容を表示します。

パラメーター:

• uuid (必須): ディレクトリのUUID

create_directory

ファイルを整理するための新しいディレクトリを作成します。

パラメーター:

• name (必須): ディレクトリ名（例: "js", "css", "components"）

ファイルツール

create_file

Stellifyプロジェクトに新しいファイルを作成します。これにより、空のファイルシェルが作成されますが、メソッド、文、またはテンプレートはまだありません。

パラメーター:

• directory (必須): ディレクトリのUUID（get_project のディレクトリ配列から取得）
• name (必須): 拡張子なしのファイル名（例: "Counter", "UserController"）
• type (必須): ファイルタイプ - "class", "model", "controller", "middleware", または "js"
• extension (オプション): ファイル拡張子。Vueコンポーネントには "vue" を使用します。
• namespace (オプション): PHP名前空間（例: "App\Services\"）。PHPファイルのみ適用。
• includes (オプション): インポートする完全修飾クラス名の配列（例: ["App\\Models\\User", "Illuminate\\Http\\Request"]）。StellifyはこれらをファイルのUUIDに解決し、必要に応じてLaravel APIまたはベンダーディレクトリからフェッチします。

ディレクトリの選択: ファイルの目的に合わせてディレクトリを選択してください。ディレクトリが存在しない場合は、まず create_directory で作成してください。

例のワークフロー:

1. create_file → 空のシェルを作成し、ファイルのUUIDを返します。
2. create_statement + add_statement_code → 変数/インポートを追加します。
3. create_method + add_method_body → 関数を追加します。
4. html_to_elements → テンプレート要素を作成します（Vue用）。
5. save_file → すべてのUUIDを接続してファイルを完成させます。

自動依存関係の作成 (auto_create_dependencies: true の場合):

次のようなコードでファイルを作成するとき:

<?php
namespace App\Http\Controllers;

use App\Models\User;
use Illuminate\Http\Request;

class UserController extends Controller
{
    public function store(Request $request)
    {
        $user = User::create($request->validated());
        return response()->json($user);
    }
}

Stellifyは次のことを行います。

1. use 文を解析して依存関係（User, Request, Socialite）を見つけます。
2. アプリケーションデータベースでフレームワーククラスをチェックし、キャッシュされたクラスを見つけます。
3. コアのLaravelクラスの場合、api.laravel.com からフェッチします。
4. ベンダーパッケージ（Socialite, Spatieなど）の場合、vendor/ ディレクトリから読み取ります。
5. 欠落しているアプリケーションクラスを作成します → User モデルファイルを作成します。
6. ファイルの includes 配列をすべての依存関係のUUIDで接続します。

サポートされるソース:

• Laravel API - コアの Illuminate\* クラスは api.laravel.com からフェッチされます。
• ベンダーパッケージ - Laravel\Socialite\*, Laravel\Cashier\*, Spatie\*, Livewire\* などは、PHP-Parserを使用して vendor/ ディレクトリから直接読み取られます。

レスポンスには、何が作成/解決され、どのソースから取得されたかを示す dependencies レポートが含まれています。

get_file

UUIDでファイルを取得し、すべてのメタデータ、メソッド、および文を取得します。

パラメーター:

• uuid (必須): ファイルのUUID

save_file

ファイルの完全な構成を保存/更新します。これにより、create_file の後にファイルが完成します。

パラメーター:

• uuid (必須): ファイルのUUID
• name (必須): ファイル名（拡張子なし）
• type (必須): ファイルタイプ ("js", "class", "controller", "model", "middleware")
• extension (オプション): ファイル拡張子（Vue SFCの場合は "vue"）
• template (オプション): Vue <template> セクションのルート要素のUUIDの配列
• data (オプション): メソッドのUUIDのみの配列（関数）
• statements (オプション): 文のUUIDの配列（メソッド外のコード）
• includes (オプション): インポートするファイルのUUIDの配列

重要: data = メソッドのUUIDのみ、statements = 文のUUID（メソッド外のコード）

search_files

名前またはタイプでプロジェクト内のファイルを検索します。

パラメーター:

• name (オプション): 検索するファイル名のパターン
• type (オプション): ファイルタイプのフィルター

メソッドツール

create_method

ファイルにメソッドシグネチャを作成します（実装なし）。

パラメーター:

• file (必須): メソッドを追加するファイルのUUID
• name (必須): メソッド名（例: "increment", "store", "handleClick"）
• visibility (オプション): "public", "protected", または "private"（PHPのみ、デフォルト: "public"）
• is_static (オプション): メソッドが静的かどうか（PHPのみ、デフォルト: false）
• returnType (オプション): 戻り値の型（例: "int", "string", "void"）
• parameters (オプション): {name, type} オブジェクトの配列

add_method_body

メソッドの本体にコードを解析して追加します。Stellifyはコードを構造化されたJSON文に解析します。

パラメーター:

• file_uuid (必須): メソッドを含むファイルのUUID
• method_uuid (必須): コードを追加するメソッドのUUID
• code (必須): メソッドの本体のコード（関数宣言はなし、文のみ）

例:

code: "return $a + $b;"

search_methods

名前または特定のファイル内でプロジェクト内のメソッドを検索します。

パラメーター:

• name (オプション): 検索するメソッド名（ワイルドカードをサポート）
• file_uuid (オプション): 結果を特定のファイルに絞り込む

文ツール

create_statement

ファイルに空の文を作成します。これは2ステップのうちの1ステップです。次に add_statement_code を呼び出す必要があります。

パラメーター:

• file (オプション): 文を追加するファイルのUUID
• method (オプション): 文を追加するメソッドのUUID（メソッド本体の文の場合）

使用例:

• PHP: クラスのプロパティ、use文、定数
• JS/Vue: 変数宣言、インポート、リアクティブな参照

add_statement_code

既存の文にコードを追加します。これは2ステップのうちの2ステップです。create_statement の後に呼び出します。

パラメーター:

• file_uuid (必須): 文を含むファイルのUUID
• statement_uuid (必須): コードを追加する文のUUID
• code (必須): 追加するコード

例:

code: "use Illuminate\\Http\\Request;"
code: "const count = ref(0);"
code: "import { ref } from 'vue';"

get_statement

UUIDで文を取得し、その句（コードトークン）を取得します。

パラメーター:

• uuid (必須): 文のUUID

ルートツール

create_route

Stellifyプロジェクトに新しいルート/ページを作成します。

パラメーター:

• project_id (必須): StellifyプロジェクトのUUID
• name (必須): ルート/ページ名（例: "Home", "Counter", "About"）
• path (必須): URLパス（例: "/", "/counter", "/about"）
• method (必須): HTTPメソッド ("GET", "POST", "PUT", "DELETE", "PATCH")
• type (オプション): ルートタイプ - ページの場合は "web"、APIエンドポイントの場合は "api"（デフォルト: "web"）
• data (オプション): 追加のルートデータ

get_route

UUIDでルート/ページを取得します。

パラメーター:

• uuid (必須): ルートのUUID

search_routes

名前でプロジェクト内のルート/ページを検索します。

パラメーター:

• search (オプション): ルート名を一致させる検索用語
• type (オプション): ルートタイプでフィルターする（"web" または "api"）
• per_page (オプション): ページあたりの結果数（デフォルト: 10）

要素ツール（UIコンポーネント）

create_element

新しいUI要素を作成します。ルート要素の場合は page（ルートのUUID）を、子要素の場合は parent（要素のUUID）を指定してください。

パラメーター:

• type (必須): 要素のタイプ - 次のいずれか:
  • HTML5: s-wrapper, s-input, s-form, s-svg, s-shape, s-media, s-iframe
  • コンポーネント: s-loop, s-transition, s-freestyle, s-motion
  • Blade: s-directive
  • Shadcn/ui: s-chart, s-table, s-combobox, s-accordion, s-calendar, s-contiguous
• page (オプション): ページ/ルートのUUID（ルート要素の場合）
• parent (オプション): 親要素のUUID（子要素の場合）

update_element

既存のUI要素を更新します。

パラメーター:

• uuid (必須): 更新する要素のUUID
• data (必須): HTML属性とStellifyフィールドを含むオブジェクト

標準のHTML属性: placeholder, href, src, type など

Stellifyフィールド:

• name: エディター内の要素名
• type: 要素のタイプ
• locked: 編集を防止する（ブール値）
• tag: HTMLタグ（div, input, buttonなど）
• classes: CSSクラスの配列 ["class1", "class2"]
• text: 要素のテキストコンテンツ

イベントハンドラー（値をメソッドのUUIDに設定）:

• click: @click
• submit: @submit
• change: @change
• input: @input
• focus: @focus
• blur: @blur
• keydown: @keydown
• keyup: @keyup
• mouseenter: @mouseenter
• mouseleave: @mouseleave

get_element

UUIDで単一の要素を取得します。

パラメーター:

• uuid (必須): 要素のUUID

get_element_tree

要素とそのすべての子孫を階層的なツリー構造で取得します。

パラメーター:

• uuid (必須): ルート要素のUUID

delete_element

要素とそのすべての子要素を削除します（CASCADE）。

パラメーター:

• uuid (必須): 削除する要素のUUID

search_elements

プロジェクト内の要素を検索します。

パラメーター:

• search (オプション): 要素名、タイプ、またはコンテンツを一致させる検索クエリ
• type (オプション): 要素のタイプでフィルターする
• include_metadata (オプション): 追加のメタデータを含める（デフォルト: false）
• per_page (オプション): ページあたりの結果数、1 - 100（デフォルト: 20）

html_to_elements

HTMLを一度の操作でStellify要素に変換します。これはインターフェースを構築する最速の方法です！

パラメーター:

• elements (必須): 変換するHTML文字列
• page (オプション): 要素をアタッチするルートのUUID。Vueコンポーネントの場合は省略します。
• selection (オプション): アタッチする親要素のUUID（pageの代替）
• test (オプション): trueの場合、要素を作成せずに構造を返します。

機能:

• HTML構造を解析します。
• 適切なネストですべての要素を作成します。
• 属性、クラス、テキストコンテンツを保持します。
• Vueバインディング ({{ variable }}) を自動検出し、リンクされた文を作成します。
• save_file のテンプレート配列で使用する要素のUUIDを返します。

要素タイプのマッピング:

• button, input, textarea, select → s-input
• div, span, p, section など → s-wrapper
• form → s-form
• img, video, audio → s-media

グローバルライブラリツール

list_globals

アプリケーションデータベース内のすべてのグローバルファイルをリストします。グローバルファイルは再利用可能なコードで、テナントプロジェクトにインストールできます。

パラメーター: なし

get_global

グローバルファイルを取得し、すべてのメソッド、文、および句を取得します。

パラメーター:

• uuid (必須): グローバルファイルのUUID

install_global

アプリケーションデータベースからグローバルファイルをテナントプロジェクトにインストールします。

パラメーター:

• file_uuid (必須): インストールするグローバルファイルのUUID
• directory_uuid (必須): インストール先のディレクトリのUUID

search_global_methods

アプリケーションデータベース全体でメソッドを検索します（グローバル/フレームワークメソッド）。

パラメーター:

• query (必須): 名前でメソッドを検索するためのクエリ

モジュールツール

モジュールは、関連するグローバルファイルの名前付きコレクションで、一緒にインストールすることができます。

list_modules

利用可能なすべてのモジュールをリストします。

パラメーター: なし

get_module

モジュールを取得し、そのすべてのファイルを取得します。

パラメーター:

• uuid (必須): モジュールのUUID

create_module

関連するグローバルファイルをグループ化するための新しいモジュールを作成します。

パラメーター:

• name (必須): モジュールの一意の名前（例: "laravel-sanctum-auth"）
• description (オプション): モジュールが提供するものの説明
• version (オプション): バージョン文字列（デフォルト: "1.0.0"）
• tags (オプション): 分類用のタグ（例: ["auth", "api", "sanctum"]）

add_file_to_module

グローバルファイルをモジュールに追加します。

パラメーター:

• module_uuid (必須): モジュールのUUID
• file_uuid (必須): 追加するグローバルファイルのUUID
• order (オプション): インストール順序（指定しない場合は自動的にインクリメントされます）

install_module

モジュールのすべてのファイルをテナントプロジェクトにインストールします。

パラメーター:

• module_uuid (必須): インストールするモジュールのUUID
• directory_uuid (必須): ファイルをインストールするディレクトリのUUID

Stellifyの仕組み

Stellifyは、アプリケーションコードをテキストファイルではなく、データベース内の構造化されたJSONとして保存します。このアーキテクチャにより、以下のことが可能になります。

• 高精度な操作: AIが他のコードに触れることなく特定のメソッドを変更できます。
• コードベースをデータのようにクエリする: 特定のクラスを使用するすべてのメソッドを見つけることができます。
• 即座のリファクタリング: アプリケーション全体でメソッド名を即座に変更できます。
• 文レベルのバージョン管理: 個々のコード文の変更を追跡できます。
• AIネイティブな開発: 既存のコードを破壊する心配なく、AIに細かいアクセスを与えることができます。
• 自動依存関係解決: フレームワーククラスはLaravel APIドキュメントから自動的にフェッチされます。

このMCPサーバーを介してStellifyで構築する場合、コードは構造化データにパースされ、デプロイ時に実行可能なコードに再構築できます。

依存関係解決

auto_create_dependencies を使用すると、Stellifyは以下の順序で依存関係を解決します。

1. テナントデータベース - クラスがプロジェクト内に存在するかを確認します。
2. アプリケーションデータベース - 事前定義されたクラスのグローバルライブラリを確認します。
3. Laravel APIドキュメント - コアの Illuminate\* クラスの場合は、api.laravel.com からフェッチします。
4. ベンダーディレクトリ - インストールされたパッケージの場合は、vendor/ ディレクトリから直接読み取ります。

サポートされるパッケージソース

ベンダーパッケージの場合、StellifyはPHP-Parserを使用して、インストールされたパッケージのバージョンから実際のメソッドシグネチャを抽出します。これにより、特定の依存関係に関する正確さが保証されます。

コード構造

Directory
  └── File
        └── Method
              ├── Parameters (Clauses)
              └── Statements
                    └── Clauses / Language Tokens

各コードは以下に分解されます。

• ディレクトリ: ファイルの組織化コンテナ
• ファイル: メソッドとファイルのメタデータを含む
• メソッド: パラメーターと本体の文を持つ関数
• 文: コードの1行/文
• 句: 葉ノード（変数、文字列、数値など）
• 言語トークン: システム定義のキーワードとシンボル（再利用可能）

ワークフロー

PHPコントローラーのワークフロー

1. get_project → ディレクトリのUUIDを見つける
2. create_file → type='controller', name='UserController'
3. create_method → name='store', parameters=[{name:'request', type:'Request'}]
4. add_method_body → code='return response()->json($request->all());'

Vueコンポーネントのワークフロー

1. get_project → 'js' ディレクトリのUUIDを見つける
2. create_file → type='js', extension='vue' をjsディレクトリに作成する
3. インポートとデータの文を作成する:
   • create_statement + add_statement_code: "import { ref } from 'vue';"
   • create_statement + add_statement_code: "const count = ref(0);"
4. create_method + add_method_body → 関数を作成する
5. html_to_elements → テンプレートHTMLを要素に変換する
6. update_element → イベントハンドラーを接続する（click → メソッドのUUID）
7. save_file → 以下でファイルを完成させる:
   • extension: 'vue'
   • template: [rootElementUuid]
   • data: [methodUuid]（メソッドのUUIDのみ）
   • statements: [importStmtUuid, refStmtUuid]（文のUUID）

開発

ウォッチモード（変更時に自動再構築）:

npm run watch

手動構築:

npm run build

トラブルシューティング

"STELLIFY_API_TOKEN environment variable is required"

.env ファイルが存在し、APIトークンが含まれていることを確認してください。

"Connection refused" またはAPIエラー

• APIトークンが有効であることを確認してください。
• STELLIFY_API_URL が正しいことを確認してください。
• APIを直接テストしてください: curl -H "Authorization: Bearer YOUR_TOKEN" https://stellisoft.com/api/v1/file/search

Claude Desktopがツールを認識しない

1. 設定ファイルのパスがOSに合っていることを確認してください。
2. Stellify APIトークンが有効であることを確認してください。
3. Claude Desktopを完全に再起動してください（ウィンドウを閉じるだけでなく、終了してください）。
4. Claude Desktopのログを確認してエラーメッセージを確認してください。

ビルド時のTypeScriptエラー

rm -rf node_modules package-lock.json
npm install
npm run build

インストール問題

# npmキャッシュをクリアして再インストール
npm cache clean --force
npm uninstall -g @stellisoft/stellify-mcp
npm install -g @stellisoft/stellify-mcp

アーキテクチャ

Claude Desktop (AI)
       ↓ (stdio)
Stellify MCP Server (Node.js)
       ↓ (HTTPS)
Stellify API (Laravel)
       ↓
Database (Structured Code)

MCPサーバーは薄いクライアントであり、以下のことを行います。

1. Claudeにツールを公開する
2. ツール呼び出しをAPIリクエストに変換する
3. 整形されたレスポンスを返す

コントリビュート

コントリビューションを歓迎します！ コントリビューションガイドラインを参照し、プルリクエストを送信してください。

サポート

問題や質問がある場合は、以下の方法でお問い合わせください。

• GitHub Issues: バグを報告または機能をリクエストする
• Email: support@stellisoft.com
• ドキュメント: https://stellisoft.com/docs
• Discord: コミュニティに参加する（近日公開）

Stellifyについて

Stellifyは、AIネイティブなソフトウェア開発の未来を築いています。コードをテキストファイルではなく構造化データとして保存することで、AIと人間がシームレスに協力して、より良いソフトウェアをより速く構築する新しいパラダイムを可能にします。

stellisoft.com で詳細を学ぶことができます。

📄 ライセンス

MITライセンス - 詳細については LICENSE ファイルを参照してください。

Stellifyチームによって愛情を込めて作成されました。