Kuroco Frontend Integration

# Kuroco AI 自動デプロイメント

AIがKurocoサイトの登録からフロントエンドのビルド・デプロイまでを自動実行するためのガイド。

## ワークフロー概要

```
┌─────────────────────────────────────────────────────────────────┐
│                    AI Deployment Workflow                        │
├─────────────────────────────────────────────────────────────────┤
│  0. 認証確認 ───→ whoami でセッション検証                        │
│          ↓                                                       │
│  1. ユーザー確認 ───→ AskUserQuestion                            │
│          ↓                                                       │
│  2. サイト登録 ───→ admin_api (model=Api, method=add_site)        │
│          ↓                                                       │
│  3. フロントエンドビルド ───→ npm run build / nuxt generate     │
│          ↓                                                       │
│  4. アーティファクトアップロード                                  │
│     4a. 署名付きURL取得 ───→ admin_api (javascript_tool)          │
│     4b. S3アップロード ───→ curl (Bash)                         │
│          ↓                                                       │
│  5. デプロイ実行 ───→ admin_api (model=KurocoFront, method=deploy)│
│          ↓                                                       │
│  6. 完了 ───→ stage_url or production_url                       │
└─────────────────────────────────────────────────────────────────┘
```

## 前提条件

### 必須環境

- **claude-in-chrome MCP** が利用可能であること（未設定の場合は下記 Step 0-0 で案内）
- ユーザーが **Kuroco管理画面** （`https://{site_key}.g.kuroco-mng.app`）に **ログイン済み** であること
- ログインユーザーがサイト登録・デプロイの **操作権限** を持っていること

> **注意**: すべての操作はログイン中ユーザーの権限で実行されます。権限が不足している場合、個別のAPI呼び出しで403エラーが返ります。

---

## 認証確認フロー

**すべてのデプロイ操作の前に必ず実行すること。**

### Step 0-0: claude-in-chrome MCP の確認

このスキルは `mcp__claude-in-chrome__*` ツール群に依存する。操作開始前に、`mcp__claude-in-chrome__tabs_context_mcp` を呼び出して利用可能か確認する。

- **成功した場合** → Step 0-1 へ進む
- **ツールが見つからない / 接続エラーの場合** → ユーザーにセットアップを案内:

```
ブラウザ操作に必要な claude-in-chrome MCP が利用できません。
以下の手順でセットアップしてください。

【必要なもの】
1. Google Chrome または Microsoft Edge
2. Claude in Chrome 拡張機能（v1.0.36以上）
   → Chrome Web Store からインストール:
   https://chromewebstore.google.com/detail/claude/fcoeoabgfenejglbffodgkkbkcdhcgfn
3. Claude Code v2.0.73 以上

【有効化の手順】
- Claude Code セッション内で `/chrome` を実行
- または `claude --chrome` で起動

セットアップ完了後、もう一度お試しください。
```

> **注意**: Chrome連携は Anthropic の直接プラン（Pro, Max, Teams, Enterprise）が必要です。サードパーティプロバイダ経由では利用できません。

### Step 0-1: 対象サイトの特定

`mcp__claude-in-chrome__tabs_context_mcp` を呼び出し、URLパターン `*.g.kuroco-mng.app` に一致するタブを探す。

- **タブが1つ見つかった場合** → そのタブのURLからベースURL（`https://{site_key}.g.kuroco-mng.app`）を取得
- **複数のKurocoタブが見つかった場合** → どのサイトを操作するかユーザーに確認
- **タブが見つからない場合** → `AskUserQuestion` ツールでサイトキーまたは管理画面URLを確認

### Step 0-2: 認証チェック（whoami）

`mcp__claude-in-chrome__javascript_tool` で以下を実行:

```javascript
(async () => {
  const r = await fetch('/direct/rcms_api/admin_api/?MODE=whoami', {credentials:'include'});
  const d = await r.json();
  return JSON.stringify({status: r.status, ok: r.ok, member_id: d.member_id, name: (d.name2 || '') + ' ' + (d.name1 || ''), group_ids: d.group_ids});
})();
```

### Step 0-3: 認証失敗時の対応

401または403が返った場合:
1. ユーザーにログインが必要な旨を伝える
2. ログインURL: `{base_url}/management/login/login/`
3. ユーザーがログインするまで待機
4. ログイン後に再度認証チェック

### 操作中のセッション切れ

複数ステップの操作中に401/403が発生した場合:
1. **即座に操作を停止**
2. どこまで成功したかをユーザーに報告
3. 再認証を案内
4. 再認証後、未完了の操作から再開

---

## AI向け実行指示

### Step 1: ユーザーへの確認

デプロイ開始前に **`AskUserQuestion` ツール**で以下を確認。

#### 1-1. デプロイ先の確認

```json
{
  "questions": [{
    "question": "デプロイ先のKurocoサイトを選択してください",
    "header": "サイト",
    "options": [
      { "label": "新規サイトを作成", "description": "新しいKurocoサイトを登録してデプロイ" },
      { "label": "既存サイトを使用", "description": "既存のKurocoサイトにデプロイ" }
    ],
    "multiSelect": false
  }]
}
```

#### 1-2. 新規サイトの場合 - site_keyの決定

```json
{
  "questions": [{
    "question": "site_key（サイト識別子）はどのように設定しますか？",
    "header": "site_key",
    "options": [
      { "label": "自動生成（推奨）", "description": "一意のsite_keyを自動生成（例: proj-a1b2c3d4）" },
      { "label": "自分で指定する", "descript