# Giselle Studio 業務運用マニュアル

## 目次

**【基本操作】**
1. [システム概要](#1-システム概要)
2. [ログイン・ログアウト手順](#2-ログインログアウト手順)
3. [トップページ（ロビー画面）](#3-トップページロビー画面)

**【業務フローに沿った機能】**
4. [【STEP1】ワークスペース管理（ワークフローの設計）](#4-step1ワークスペース管理ワークフローの設計)
5. [【STEP2】ワークフローエディタ（AIエージェントの構築）](#5-step2ワークフローエディタaiエージェントの構築)
6. [【STEP3】プレイグラウンド（タスクの実行）](#6-step3プレイグラウンドタスクの実行)
7. [【STEP4】タスク管理（実行結果の確認）](#7-step4タスク管理実行結果の確認)

**【サポート機能】**
8. [設定機能](#8-設定機能)
9. [チーム管理機能](#9-チーム管理機能)
10. [アカウント管理機能](#10-アカウント管理機能)

**【運用ガイド】**
11. [日常業務の流れ](#11-日常業務の流れ)
12. [よくある質問と対処法](#12-よくある質問と対処法)
13. [トラブルシューティング](#13-トラブルシューティング)

---

## 1. システム概要

### 1.1 Giselle Studioとは

Giselle StudioはAIワークフローを設計・実行するためのオープンソースプラットフォームです。ビジュアルエディタを使用してAIエージェントを構築し、複数のAIモデル（GPT、Claude、Geminiなど）を組み合わせたワークフローを作成できます。チャットやプロンプトチェーンにとどまらない、実行可能なAIシステムの構築を目指しています。

**主な特徴：**
- **ビジュアルエディタ**：ドラッグ&ドロップで直感的にAIエージェントを作成・編集
- **マルチモデル対応**：GPT、Claude、Geminiなど複数のAIモデルをタスクに応じて最適に選択
- **GitHub連携**：Issue、PR、デプロイメントをAIで自動化
- **ナレッジストア**：GitHub Vector Store連携でコードやデータを一元的に検索・アクセス
- **即時実行**：作成したワークフローをすぐにテスト・実行可能

### 1.2 本システムで行う主要業務

本システムは、主に以下の業務を支援します：

| 業務カテゴリ | 具体的な業務内容 |
|------------|----------------|
| **AIワークフロー設計** | ワークスペースの作成、ノードの配置、ノード間接続の設定 |
| **AIエージェント構築** | テキスト生成、画像生成、GitHub連携アクションの設定 |
| **タスク実行管理** | ワークフローの実行、実行結果の確認、再実行 |
| **外部連携** | GitHub、Vector Store、データストアとの連携設定 |
| **チーム協業** | チームメンバーの招待、ワークスペースの共有 |

### 1.3 業務フロー概要

本システムにおける業務は、以下の流れで進行します：

```
┌─────────────────────────────────────────────────────────────────┐
│                        業務フロー                                │
├─────────────────────────────────────────────────────────────────┤
│                                                                 │
│  【STEP 1】ワークスペースを作成し、管理する                      │
│      ↓                                                          │
│  【STEP 2】ワークフローエディタでAIエージェントを構築する        │
│      ↓                                                          │
│  【STEP 3】プレイグラウンドでタスクを実行する                    │
│      ↓                                                          │
│  【STEP 4】タスクの実行結果を確認し、必要に応じて修正する        │
│      ↓                                                          │
│  【STEP 5】アプリとして公開し、自動実行を設定する                │
│                                                                 │
└─────────────────────────────────────────────────────────────────┘
```

**役割別の業務概要：**

| 役割 | 主な業務 |
|------|---------|
| **開発者** | ワークフローの設計・構築、トリガーの設定、GitHub連携の設定 |
| **チーム管理者** | チームメンバーの招待・管理、APIキーの管理、使用量の監視 |
| **一般ユーザー** | 公開されたアプリの実行、タスク結果の確認 |

### 1.4 主な機能

| 機能 | 説明 | 業務フローでの位置 |
|------|------|------------------|
| ワークスペース管理 | AIワークフローのコンテナを作成・管理 | STEP 1 |
| ワークフローエディタ | ノードを配置・接続してワークフローを設計 | STEP 2 |
| プレイグラウンド | 作成したアプリを実行・テスト | STEP 3 |
| タスク管理 | 実行履歴の確認、結果の閲覧 | STEP 4 |
| 設定 | チーム設定、アカウント設定、連携設定 | 随時利用 |

### 1.5 ユーザー種別

システムには以下のユーザー種別があります：

| ユーザー種別 | 説明 |
|-------------|------|
| チームオーナー | チームの作成者。すべての権限を持つ |
| チームメンバー | チームに招待されたユーザー。ワークスペースの作成・編集が可能 |
| 招待中ユーザー | 招待メールを受け取り、参加待ちのユーザー |

### 1.6 対応ブラウザ

推奨ブラウザ：
- Google Chrome（最新版）
- Microsoft Edge（最新版）
- Safari（最新版）
- Firefox（最新版）

---

## 2. ログイン・ログアウト手順

### 2.1 ログイン方法

1. ブラウザでGiselle Studioのログインページにアクセスします
   - URL: `https://studio.giselles.ai/login`

2. ログイン画面が表示されます

**ログイン方法は3種類から選択できます：**

#### 方法1: Googleアカウントでログイン
1. 「Continue with Google」ボタンをクリック
2. Googleアカウントを選択または入力
3. 認証が成功すると自動的にロビー画面に遷移

#### 方法2: GitHubアカウントでログイン
1. 「Continue with GitHub」ボタンをクリック
2. GitHubアカウントで認証
3. 認証が成功すると自動的にロビー画面に遷移

#### 方法3: メールアドレス/パスワードでログイン

| 項目 | 入力内容 |
|------|---------|
| Email | 登録済みのメールアドレス |
| Password | 設定済みのパスワード |

1. 各項目を入力します
2. 「Log in」ボタンをクリックします
3. 認証に成功すると、ロビー画面が表示されます

### 2.2 ログアウト方法

1. 画面右上のユーザーアバターまたはメニューアイコンをクリックします
2. 表示されるメニューから「ログアウト」を選択します
3. ログイン画面に戻ります

### 2.3 パスワードを忘れた場合

1. ログイン画面で「Forgot your password?」リンクをクリック
2. パスワードリセット要求画面で登録済みのメールアドレスを入力
3. 「Send Reset Link」ボタンをクリック
4. メールに届いたリンクをクリック
5. 新しいパスワードを設定
6. パスワードリセット完了後、ログイン画面に戻ります

**注意事項：**
- パスワードリセットリンクには有効期限があります
- メールが届かない場合は迷惑メールフォルダを確認してください

---

## 3. トップページ（ロビー画面）

### 3.1 ロビー画面の概要

ログイン後に表示されるトップページです。主要な機能へのアクセスポイントとなります。

**画面URL**: `/lobby` または `/`

### 3.2 画面構成

ロビー画面は以下のエリアで構成されています：

1. **ヘッダーナビゲーション**
   - 「Agents」：ワークスペース一覧画面へ
   - 「Playground」：プレイグラウンド画面へ
   - 「Tasks」：タスク一覧画面へ
   - 設定アイコン：設定画面へ
   - ユーザーアバター：アカウント設定へ

2. **メインコンテンツエリア**
   - 最近のワークスペース
   - クイックアクションボタン

3. **サイドバー（チーム選択）**
   - 現在選択中のチーム
   - チーム切り替え

### 3.3 主な操作

| 操作 | 説明 |
|------|------|
| 「New Workspace」をクリック | 新しいワークスペースを作成 |
| ワークスペースカードをクリック | ワークフローエディタ画面を開く |
| 「Agents」をクリック | ワークスペース一覧画面へ移動 |
| 「Playground」をクリック | プレイグラウンド画面へ移動 |
| 「Tasks」をクリック | タスク一覧画面へ移動 |

---

## 4. 【STEP1】ワークスペース管理（ワークフローの設計）

> **業務フローでの位置**: AIワークフローを設計するための最初のステップです。ワークスペースはワークフローのコンテナとして機能します。

### 4.1 ワークスペース一覧画面

**画面URL**: `/workspaces`

この画面では、チームが所有するワークスペース（AIエージェント）を一覧表示し、管理できます。

**表示される情報：**
- ワークスペース名
- 最終更新日時
- 実行回数
- 作成者
- 使用している言語モデル（LLMプロバイダアイコン）
- GitHub連携リポジトリ（連携している場合）

### 4.2 ワークスペースの検索・フィルタリング

1. 画面上部の検索フィールドにキーワードを入力
2. ワークスペース名に含まれるものがフィルタリング表示されます

**ソートオプション：**
- 名前順（昇順/降順）
- 更新日順（昇順/降順）

**表示モード：**
- グリッドビュー：カード形式で表示
- リストビュー：一覧形式で表示

### 4.3 新しいワークスペースを作成する

1. 「New Workspace +」ボタンをクリック
2. ワークスペース名を入力（省略可能、後から変更可能）
3. 「Create」ボタンをクリック
4. ワークフローエディタ画面が開きます

### 4.4 既存のワークスペースを開く

1. ワークスペース一覧からワークスペースカードをクリック
2. ワークフローエディタ画面が表示されます

### 4.5 ワークスペースのコピー

1. ワークスペースを開く
2. 設定メニューから「Copy Workspace」を選択
3. 新しい名前を入力
4. コピーされたワークスペースが作成されます

---

## 5. 【STEP2】ワークフローエディタ（AIエージェントの構築）

> **業務フローでの位置**: ノードを配置・接続してAIワークフローを構築するステップです。

### 5.1 ワークフローエディタ画面の概要

**画面URL**: `/workspaces/[workspaceId]`

React Flowベースのビジュアルエディタで、AIワークフローのノード・接続を視覚的に編集できます。

**画面構成：**
1. **ツールバー**：ワークスペース名、保存状態、各種操作ボタン
2. **ノードパレット**：追加可能なノードの一覧
3. **キャンバス**：ノードと接続を配置するエリア
4. **プロパティパネル**：選択中ノードの設定

### 5.2 ノードの種類

#### オペレーションノード（処理を行うノード）

| ノード種類 | 説明 | 使用例 |
|-----------|------|--------|
| テキスト生成 | AIモデルでテキストを生成 | 回答生成、要約、翻訳 |
| 画像生成 | AIモデルで画像を生成 | イメージ作成 |
| トリガー | ワークフローの開始点 | 手動実行、GitHubイベント |
| アクション | 外部サービスへの操作 | GitHub Issue作成、コメント投稿 |
| クエリ | ベクトルストアへの検索 | ドキュメント検索 |
| データクエリ | データストアへの問い合わせ | PostgreSQL検索 |
| 終了 | ワークフローの終点 | 結果の出力 |

#### 変数ノード（データを保持するノード）

| ノード種類 | 説明 | 使用例 |
|-----------|------|--------|
| テキスト | テキストデータ | プロンプト、テンプレート |
| ファイル | ファイルデータ | ドキュメント、画像 |
| GitHub | GitHubリポジトリ情報 | リポジトリ参照 |
| ベクトルストア | ベクトルストア参照 | RAG検索 |
| Webページ | WebページURL | スクレイピング |
| データストア | 外部DB参照 | PostgreSQL接続 |

### 5.3 ノードの追加

1. 左側のノードパレットからノードを選択
2. キャンバス上の配置したい位置にドラッグ&ドロップ
3. または、ノードをクリックして中央に追加

### 5.4 ノードの接続

1. ノードの右側にあるアウトプットポート（〇）をクリック
2. 接続先ノードの左側にあるインプットポート（〇）までドラッグ
3. 接続線が作成されます

**接続ルール：**
- 出力→入力の方向でのみ接続可能
- 互換性のあるデータ型のみ接続可能
- ループ（循環参照）は作成不可

### 5.5 ノードの設定

1. キャンバス上のノードをクリックして選択
2. 右側のプロパティパネルで設定を編集

**テキスト生成ノードの主な設定項目：**
- プロンプト（指示文）
- AIモデル（Claude、GPT、Geminiなど）
- 出力形式
- ツール連携（GitHub、Web検索など）

### 5.6 ワークスペースの保存

- 編集内容は自動保存されます（デバウンス付き）
- 保存状態はツールバーに表示されます

### 5.7 ワークスペース名の変更

1. ツールバーのワークスペース名をクリック
2. 新しい名前を入力
3. Enterキーまたは外側をクリックで確定

### 5.8 トリガーの設定

1. トリガーノードをクリック
2. プロパティパネルでトリガータイプを選択

**トリガータイプ：**
- **手動トリガー**：プレイグラウンドからの手動実行
- **GitHubトリガー**：GitHubイベント（Issue作成、PR作成など）での自動実行

### 5.9 アプリとして公開

1. ワークフローが完成したら「Save as App」をクリック
2. アプリ名と説明を入力
3. パラメータを定義（必要に応じて）
4. 「Save」で公開

---

## 6. 【STEP3】プレイグラウンド（タスクの実行）

> **業務フローでの位置**: 作成したアプリを実行し、動作確認やテストを行うステップです。

### 6.1 プレイグラウンド画面の概要

**画面URL**: `/playground`

公開されたアプリの実行テストを行い、タスクの作成と実行を管理する画面です。

**キャッチコピー**: 「Have a task? Your agent is on it.」

### 6.2 画面構成

1. **サンプルアプリ一覧**：Giselleチームが提供するサンプルアプリ
2. **チームアプリ一覧**：チームが作成したアプリ
3. **パラメータ入力フォーム**：選択アプリの実行パラメータ

### 6.3 アプリを選択する

1. アプリカードをクリックして選択
2. 選択されたアプリはハイライト表示されます

**アプリカードの情報：**
- アプリ名
- 説明
- 使用LLMプロバイダ（アイコン表示、最大3つ）
- 作成者

### 6.4 アプリを検索する

1. 検索フィールドにキーワードを入力
2. アプリ名に含まれるものがフィルタリング表示されます

### 6.5 タスクを実行する

1. 実行するアプリを選択
2. パラメータ入力フォームに必要な情報を入力
   - テキスト入力
   - ファイルアップロード
   - 数値入力
3. 「Run」ボタンをクリック
4. タスクが作成され、実行が開始されます
5. タスク詳細画面に自動的に遷移します

**注意事項：**
- 実行中はオーバーレイが表示されます
- エラーが発生した場合はオーバーレイが消え、元の画面に戻ります

---

## 7. 【STEP4】タスク管理（実行結果の確認）

> **業務フローでの位置**: タスクの実行状況を確認し、結果を閲覧するステップです。

### 7.1 タスク一覧画面

**画面URL**: `/tasks`

実行されたタスクの一覧をページネーション付きで表示します。

**表示される情報：**
- タスクID（リンク付き）
- 開始日時
- ステータス（Running/Completed/Failed/Cancelled）
- 実行元（アプリ名/GitHub）

### 7.2 ステータスの意味

| ステータス | 説明 |
|-----------|------|
| Running | 実行中 |
| Completed | 正常完了 |
| Failed | エラー終了 |
| Cancelled | キャンセル済み |

### 7.3 タスク詳細画面を開く

1. タスク一覧からタスクIDリンクをクリック
2. タスク詳細画面が表示されます

### 7.4 ページネーション

- 1ページあたり50件（最大100件）表示
- 「Prev」/「Next」ボタンでページ移動

### 7.5 タスク詳細画面

**画面URL**: `/tasks/[taskId]`

タスクの実行状況、各ステップの進行状況、最終出力結果を表示します。

**表示される情報：**
- ステータスバッジ
- ワークスペース名（タイトル）
- アプリの説明
- タスク入力（実行時のパラメータ）
- ステップ進捗バー
- 各ステップの詳細（アコーディオン形式）
- 最終出力結果

### 7.6 実行中タスクの監視

- 実行中のタスクは自動更新されます（1.5秒間隔）
- 終端状態（Completed/Failed/Cancelled）になると自動更新が停止します

### 7.7 最終出力の確認

1. 画面下部の「Results」セクションを確認
2. 複数出力がある場合はタブで切り替え
3. Markdown形式でレンダリングされた結果を閲覧

### 7.8 ワークスペースを編集する

1. 「Edit in Workspace」バッジをクリック
2. ワークフローエディタ画面が新しいタブで開きます

### 7.9 タスクを再実行する

1. タスク詳細画面下部の入力フォームを使用
2. パラメータを入力（必要に応じて変更）
3. 「Run」ボタンをクリック
4. 新しいタスクが作成・実行されます

---

## 8. 設定機能

### 8.1 設定画面にアクセスする

1. ヘッダーの設定アイコン（歯車）をクリック
2. または、URL `/settings` に直接アクセス

### 8.2 設定画面の構成

設定画面はサイドバーナビゲーションで以下のセクションに分かれています：

**チーム設定：**
- 一般設定
- メンバー管理
- インテグレーション
- APIキー
- 利用状況
- ベクトルストア
- データストア

**アカウント設定：**
- 一般
- 認証連携

---

## 9. チーム管理機能

### 9.1 チーム設定画面

**画面URL**: `/settings/team`

チームの基本設定を管理します。

### 9.2 チームメンバーを管理する

**画面URL**: `/settings/team/members`

1. メンバー一覧を確認
2. 「Invite Member」ボタンで新しいメンバーを招待
3. メールアドレスを入力して招待メールを送信

### 9.3 インテグレーション設定

**画面URL**: `/settings/team/integrations`

GitHub連携などの外部サービス連携を設定します。

1. 「Connect GitHub」ボタンをクリック
2. GitHubで認証・許可
3. 連携完了

### 9.4 APIキー管理

**画面URL**: `/settings/team/api-keys`

外部からGiselle APIを使用するためのAPIキーを管理します。

1. 「Create API Key」ボタンをクリック
2. キー名を入力
3. 作成されたAPIキーをコピーして保存

**注意**: APIキーは作成時にのみ表示されます。紛失した場合は新しいキーを作成してください。

### 9.5 利用状況の確認

**画面URL**: `/settings/team/usage`

チームのAPI使用量を確認できます。

- 期間別の使用量
- プラン制限との比較

### 9.6 ベクトルストア設定

**画面URL**: `/settings/team/vector-store`

GitHubリポジトリやドキュメントをベクトルストアに登録し、RAG検索を有効化します。

1. 「Add Repository」または「Add Document」をクリック
2. 対象を選択
3. インデックス作成を開始

### 9.7 データストア設定

**画面URL**: `/settings/team/data-stores`

外部データベース（PostgreSQL等）への接続を設定します。

1. 「Add Data Store」をクリック
2. 接続情報を入力
3. 接続テストを実行
4. 保存

---

## 10. アカウント管理機能

### 10.1 アカウント設定画面

**画面URL**: `/settings/account`

個人アカウントの設定を管理します。

### 10.2 一般設定

**画面URL**: `/settings/account/general`

- 表示名の変更
- アバターの変更
- メールアドレスの確認

### 10.3 認証設定

**画面URL**: `/settings/account/auth`

外部認証サービスとの連携を管理します。

- Google連携
- GitHub連携
- パスワード変更

---

## 11. 日常業務の流れ

本セクションでは、業務フローに沿った日常業務の流れを説明します。

```
業務フロー概要（再掲）
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
【STEP 1】ワークスペースを作成し、管理する → 4章参照
    ↓
【STEP 2】ワークフローエディタでAIエージェントを構築する → 5章参照
    ↓
【STEP 3】プレイグラウンドでタスクを実行する → 6章参照
    ↓
【STEP 4】タスクの実行結果を確認し、必要に応じて修正する → 7章参照
    ↓
【STEP 5】アプリとして公開し、自動実行を設定する → 5章参照
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
```

### 11.1 【開発者】STEP1: ワークスペースの作成

新しいAIエージェントを作成する際の手順です。

1. ロビー画面またはワークスペース一覧画面にアクセス
2. 「New Workspace +」ボタンをクリック
3. ワークスペース名を入力（後から変更可能）
4. 「Create」をクリック
5. ワークフローエディタ画面が開く

### 11.2 【開発者】STEP2: ワークフローの構築

AIエージェントのワークフローを設計します。

1. ノードパレットから必要なノードを選択・配置
   - トリガーノードを配置（開始点）
   - テキスト生成ノードを配置（AI処理）
   - 終了ノードを配置（結果出力）
2. ノード間を接続
3. 各ノードのプロパティを設定
4. 自動保存を確認

### 11.3 【開発者】STEP3: テスト実行

作成したワークフローをテストします。

1. ワークフローをアプリとして保存
2. プレイグラウンド画面に移動
3. 作成したアプリを選択
4. テスト用のパラメータを入力
5. 「Run」をクリック
6. タスク詳細画面で結果を確認

### 11.4 【開発者】STEP4-5: 結果確認と改善

テスト結果を確認し、必要に応じてワークフローを改善します。

1. タスク詳細画面で出力結果を確認
2. 期待通りの結果でない場合：
   - 「Edit in Workspace」をクリック
   - ワークフローを修正
   - 再度テスト実行
3. 期待通りの結果の場合：
   - トリガー設定を行い自動実行を有効化
   - または手動実行用として公開

---

## 12. よくある質問と対処法

### 12.1 ログインに関するQ&A

**Q: ログインできません**

A: 以下を確認してください：
- メールアドレスが正しいか確認
- パスワードが正しいか確認（Caps Lockに注意）
- OAuth認証の場合、ポップアップブロッカーを無効化
- ブラウザのCookieが有効か確認

**Q: パスワードリセットメールが届きません**

A: 以下を確認してください：
- 迷惑メールフォルダを確認
- 登録したメールアドレスが正しいか確認
- 数分待ってから再試行

### 12.2 ワークフローに関するQ&A

**Q: ノードを接続できません**

A: 以下を確認してください：
- 出力ポートから入力ポートへドラッグしているか
- 互換性のあるデータ型か確認
- ループ（循環参照）になっていないか確認

**Q: 保存されていない気がします**

A: 自動保存機能があります。以下を確認してください：
- ツールバーの保存状態インジケータを確認
- ネットワーク接続を確認
- ブラウザを更新せずに待機

### 12.3 タスク実行に関するQ&A

**Q: タスクが失敗しました**

A: 以下を確認してください：
- タスク詳細画面でエラーメッセージを確認
- 各ステップの状態を確認
- APIキーの設定が正しいか確認
- 使用量制限に達していないか確認

**Q: タスクが長時間「Running」のままです**

A: 以下を確認してください：
- 複雑なワークフローは時間がかかる場合があります
- ネットワーク接続を確認
- ページを更新して最新状態を確認

---

## 13. トラブルシューティング

### 13.1 エラーメッセージと対処法

| エラーメッセージ | 原因 | 対処法 |
|----------------|------|--------|
| Please enter both email and password. | ログイン時にメールまたはパスワードが未入力 | 両方の項目を入力してください |
| Invalid login credentials | メール/パスワードの組み合わせが不正 | 正しい認証情報を入力してください |
| Authentication service is temporarily unavailable | 認証サービスが一時的に利用不可 | しばらく待ってから再試行してください |
| Workspace ID mismatch | 保存時にIDが一致しない | ページを更新して再試行してください |
| You do not have permission to view this task | タスクへのアクセス権がない | チームメンバーであることを確認してください |

### 13.2 よくあるトラブルと解決方法

**画面が真っ白になった場合**
1. ブラウザを更新（F5またはCtrl+R）
2. キャッシュをクリア
3. 別のブラウザで試す

**ノードがドラッグできない場合**
1. ブラウザを更新
2. 拡張機能を無効化して試す
3. 別のブラウザで試す

**GitHub連携が機能しない場合**
1. インテグレーション設定を確認
2. GitHubアプリの権限を確認
3. 再連携を試す

### 13.3 サポートへの連絡方法

問題が解決しない場合は、以下の方法でサポートにお問い合わせください：

1. **ドキュメント**: 公式ドキュメントを確認
2. **GitHub Issues**: バグ報告や機能リクエスト
3. **コミュニティ**: Discordなどのコミュニティチャンネル

---

## 改訂履歴

| 版数 | 改訂日 | 改訂内容 |
|-----|--------|---------|
| 1.0 | 2026-02-24 | 初版作成 |

---

*本マニュアルは、Giselle Studioのエンドユーザー向け業務運用マニュアルです。*
*システムの更新により、画面や操作方法が変更される場合があります。*
