Studio Code

Studio Code は、Studio デスクトップアプリと Studio CLI に組み込まれたエージェント型コーディングツールです。

インタラクティブなチャットを通じて、WordPress サイトの構築、カスタマイズ、管理を会話形式で行えます。テーマやプラグインの作成、ファイルの編集、WP-CLI コマンドの実行、プレビューのデプロイ、サイトの公開が可能です。

はじめに

Studio Code は Studio デスクトップアプリと、スタンドアロンの Studio CLI npm パッケージで利用できます。

Studio デスクトップでの Studio Code

Studio デスクトップアプリの Studio Code は、使いやすく馴染みのあるインターフェースに組み込まれており、npm の依存関係は不要です。

WordPress Studio デスクトップアプリを開き、サイトをクリック (または新しいサイトを追加) してから、「Studio Code」タブをクリックしてください。

Studio CLI での Studio Code

Studio デスクトップアプリがインストールされており、CLI が有効になっている場合は、ターミナルから直接 studio code を使用できます。

それ以外の場合は、npx を使って直接実行できます。

npx wp-studio@latest code

また、グローバルにインストールすると、studio code を直接使用できます。

npm i -g wp-studio@latest
studio code

↓ キーを押すとローカルの Studio サイトで作業でき、↓ と → を押すと WordPress.com または Jetpack に接続されたサイトで作業できます。

WordPress.com に接続する

デフォルトでは、Studio Code は AI のレスポンス生成に WordPress.com のインフラストラクチャを使用します。利用を開始するには、WordPress.com にログインしてください。デスクトップアプリから行うか、以下の手順に従ってターミナルから行います。

1. ターミナルで studio code を実行します。
2. チャットで /login と入力します。
3. ブラウザウィンドウが開きます。WordPress.com アカウントにログインし、接続を承認します。
4. 認証トークンをターミナルに貼り付けて、ログインを完了します。

または、チャットで /api-key と入力して、自分の Anthropic API キーを使用することもできます。

Studio Code の使用

自然言語でリクエストを入力すると、AI エージェントがファイルの作成、コマンドの実行、サイトへの変更の適用を行います。

ワークフローの例

新しいサイトを作成してカスタマイズする：

• PHP 8.2 で「My Portfolio」という名前の新しい WordPress サイトを作成
• ダークな配色のミニマルなポートフォリオテーマを作成
• ヒーローセクションとプロジェクトグリッドを含むホームページを追加

作業を共有する：

• クライアントと共有できるようにプレビューサイトを作成
• 最新の変更内容でプレビューサイトを更新

作業を公開する：

• 「My Portfolio」サイトを examplesite.com に公開

エージェントは、指示に基づいて、サイトディレクトリ内のファイルの読み書き、WP-CLI コマンドの実行、サイトのスクリーンショットの取得、WordPress.com への変更のプッシュを行えます。

スラッシュコマンド

チャット中にスラッシュコマンドを使用して、すばやくアクションを実行できます：

AI モデル

Studio Code は3つの AI モデルに対応しています：

• Claude Sonnet 4.6（デフォルト）：ほとんどのタスクで高速かつ効率的です。
• Claude Opus 4.8：複雑で多段階のタスクにより適しています。
• GPT 5.5：OpenAI を使用し、ほとんどのタスクで高速かつ効率的です。

いつでもモデルを切り替えられます：

• デスクトップ：チャットの下部にあるドロップダウンメニューから選択します。
• ターミナル：/model コマンドを実行します。

アップロード

Studio Code に画像やファイルをアップロードして、プロジェクト全体で使用できます。

• デスクトップ: チャットにドラッグするか、クリップアイコンをクリックします
• ターミナル: チャットにドラッグするか、特定のローカルファイルまたはフォルダーを指定します

新しい会話

会話をクリアして、新しい会話を開始します。

• デスクトップ: 「新しい会話」ボタンをクリックします
• ターミナル: /clear コマンドを実行します

ターミナル固有のガイダンス

ターミナル版の Studio Code には、追加機能がいくつかあります。

AI プロバイダー

AI の応答の生成方法を選択できます。

• WordPress.com（デフォルト）: WordPress.com アカウントを使用します。ログイン以外の追加設定は不要です。制限は早期アクセス終了後に変更されます。
• Anthropic API キー: 独自の API キーを使用して Claude に直接アクセスします。/api-key コマンドで設定してください。

/provider コマンドでプロバイダーを切り替えられます。

セッション

Studio Code は会話履歴を自動的に保存するため、中断したところから再開できます。

セッションを再開する

studio code sessions list                  # View all saved sessions

studio code sessions resume                # Interactive picker

studio code sessions resume latest         # Resume the most recent session

studio code sessions resume <id>           # Resume a specific session by ID

セッションを削除する

studio code sessions delete                # Interactive picker

studio code sessions delete <id>           # Delete a specific session

セッションの記録を無効にする

会話を保存したくない場合は、–no-session-persistence フラグを使用してください。

studio code --no-session-persistence

コマンドリファレンス

studio code                                # Start a new chat session

studio code --path /path/to/site           # Start with a specific site directory

studio code --no-session-persistence       # Start without saving the session

studio code sessions list                  # List saved sessions

studio code sessions resume [id]           # Resume a session

studio code sessions delete [id]           # Delete a session

オプションの一覧は次のとおりです。

studio code --help