アバターエージェントビルダー ドキュメント
AIキャラクターを作って、ウェブサイトに公開するまでを解説します。コーディングは不要です。
5分で始める
テンプレートを選び、設定を差し替えて公開するまでの5ステップです。
1. テンプレートを選択する
エディタ画面の左側パネルに、あらかじめ用意されたエージェントテンプレートが表示されています。用途に合ったテンプレートのボタンをクリックして選択してください。
- 2D アバターテンプレート — イラストや画像ベースのキャラクターを使ったエージェント
- 3D アバターテンプレート — 3Dモデルを使ったリアルタイムアニメーション対応エージェント
テンプレートを選択すると、キャンバス上に必要なノードが自動的に配置されます。
2. ノードを設定する
キャンバス上に配置された各ノードをクリックすると、右側のプロパティパネルで詳細設定が行えます。主なノードの種類は以下のとおりです。
- STT ノード — マイク入力を受け取り、音声をテキストに変換します（OpenAI Whisper・Azure・Google Cloud などに対応）
- LLM ノード — テキスト入力を受け取り、AI応答を生成します。RAGを有効にすることで、独自ドキュメントを参照した回答も可能です
- TTS ノード — テキストを音声に変換します（Aivis Cloud・ElevenLabs・Azure などに対応）
- アバターノード — アバターの表示・アニメーション・口パクなどを制御します
- ベクターストアノード — ドキュメントの埋め込みと検索を担います（RAG利用時）
各ノードはドラッグ＆ドロップで接続でき、出力ポートを別ノードの入力ポートへつなぐことでデータの流れを定義します。
3. 実行する
設定が完了したら、画面上部の「実行」ボタンをクリックします。ノードが順に実行され、プレビューエリアでエージェントの動作を確認できます。エラーがある場合は対象ノードにハイライトが表示されるので、プロパティパネルで修正してください。
4. コードスニペットを取得する
動作確認ができたら、「コードスニペットを取得」ボタン（実行ボタン横）をクリックします。ウェブサイトへの埋め込みに必要な HTML スニペットが表示されます。コピーボタンを押してクリップボードにコピーしてください。
<!-- 生成されるスニペットのイメージ --> <script src="https://cdn.example.com/avatar-agent.js" data-agent-id="YOUR_AGENT_ID" data-theme="light"> </script> <div id="avatar-agent-root"></div>5. ウェブサイトに貼り付ける
コピーしたスニペットを、エージェントを表示したいウェブページのHTMLソースコードに貼り付けます。
</body>タグの直前に貼り付けることを推奨します。ページを保存・公開するとエージェントが表示されます。<!-- 例: ページ末尾への挿入 --> ... <script src="https://cdn.example.com/avatar-agent.js" data-agent-id="YOUR_AGENT_ID"> </script> <div id="avatar-agent-root"></div> </body> </html>
ノードリファレンス
ノードはエージェントを構成する部品です。ノードパレットのカテゴリごとに、各ノードの説明・役割・接続できるポートの種類をまとめています。ポートの種類が一致する組み合わせだけが接続でき、色が同じハンドル同士をつなぐと考えると分かりやすくなります。
35件中 35件を表示
入力
会話の起点になるノードです。ここから流れたテキストや音声が後続のノードへ渡ります。
テキスト入力
ユーザーからのテキスト入力
入力なし出力Text役割
会話の起点になるテキストを渡します。テキストチャット型エージェントの入口や、音声を使わない動作確認に使い、LLM処理ノードへ接続します。
音声入力
音声認識による入力
入力なし出力AudioText役割
マイク音声を受け取り、STTでテキスト化する入口です。言語・STTモデル・音声検出感度・ノイズ抑制を設定します。常時会話ではTurn Taking制御ノードへ、ワンショット入力ではLLM処理ノードへ直接つなぎます。
処理
入力を受け取って応答や判断を作る中核のノードです。
LLM処理
AI言語モデルによる処理
入力TextVector Results出力Text役割
エージェントの頭脳です。プロンプト・モデル・温度・最大トークン数を設定し、受け取ったテキストから応答を生成します。知識ベースやVectorストアの検索結果を入力につなぐとRAG応答になります。
感情制御AI
感情を考慮したAI応答生成
入力なし出力Text役割
感情を踏まえた応答方針をLLM処理ノードへ与える補助ノードです。入力ポートを持たず、出力をLLM処理ノードにつないで口調や感情表現を調整します。
Turn Taking制御
音声会話のターン制御とタイミング管理
入力Audio出力AudioText役割
常時会話の交通整理役です。発話終了の判定時間・最小発話長・割り込み（バージイン）の扱いを決め、音声入力とLLM処理／音声エージェントの間に置きます。
面談データ分析
発言根拠を抽出し、基準別の評価・確信度・未確認項目を生成
入力Text出力Text役割
面談・面接の発言から根拠となる発言を抽出し、評価基準ごとのスコア・確信度・未確認項目を生成します。AI面接官テンプレートで会話の後段に置き、人間がレビューできる形に整えます。
出力
応答をユーザーに届けるノードです。テキスト・音声・アバターの表示を担当します。
テキスト出力
テキストとして結果を出力
入力Text出力なし役割
応答をテキストとして画面に表示する終端ノードです。音声を使わない構成や、生成内容の確認に使います。
TTS（音声出力）
LLM応答を音声出力に変換するノード
入力Text出力Audio役割
応答テキストを音声に変換する、音声エージェントの主要な出力ノードです。プロバイダ・話者・速度を選び、生成した音声をアニメーション制御ノードやアバターノードへ渡します。
音声プレイヤー
音声再生アイコンとプレイヤー出力
入力Audio出力Audio役割
受け取った音声を再生し、プレビュー上に再生UIを表示します。生成音声を実際に聞いて確認したいときにTTSノードの後段へ置きます。
音声合成制御
高度な音声合成パラメーター制御
入力Text出力Audio役割
音声合成をより細かく制御したい場合に使うノードです。合成パラメーターを個別に指定して、TTSノードより踏み込んだ調整を行います。
2Dアバター表現
Live2Dモデルによる2Dアバター表情制御
入力Audio出力なし役割
Live2Dモデルを表示し、受け取った音声に合わせてリップシンク・表情・視線を動かす終端ノードです。2Dテンプレートのアバター本体にあたります。
3Dアバター表現
VRM専用（Unity対応）のアバター表現制御
入力Audio出力なし役割
VRM（3D）モデルを表示し、音声に合わせてリップシンク・表情・視線を制御する終端ノードです。3Dテンプレートのアバター本体にあたります。
アニメーション制御
アバターの動きやジェスチャーを調整
入力Audio出力Audio役割
TTSノードとアバターノードの間に入り、待機・発話・リアクションのモーションを割り当てます。音声はそのまま通しつつ身振りを付けるため、主に3Dアバター構成で使います。
RAG/Vector
独自ドキュメントを検索して回答の根拠にするためのノードです。
知識ベース
PDF・Word・txt/md をアップロードしてインデックス作成
入力なし出力Vector Results役割
PDF・Word・txt/mdなどのファイルをアップロードしてインデックスを作り、検索結果をLLM処理ノードへ渡します。RAGを最短で始めたいときはこのノードだけで完結します。
Embeddings生成
テキストをベクトル化してembeddingsを生成
入力Text出力Embeddings役割
テキストをベクトルに変換します。インデックスの作り方を自分で組みたいときに、Vectorストアノードの前段へ置きます。
Vectorストア
ベクトルデータの保存と検索
入力Embeddings出力Vector Results役割
ベクトルデータの保存と類似検索を担当します。検索結果をLLM処理ノードへつなぐと、社内文書に基づいた回答になります。
商品データ
連携した商品データを会話で検索・比較・案内する
入力なし出力なし役割
ワークスペースの「商品データ連携」で取り込んだ商品を、会話の中で条件検索・比較・聞き返しに使います。数値は文章検索ではなく構造化データで判定し、回答には根拠ページと購入リンク（広告表記つき）を画面のカードで添えます。
連携/Tools
外部サービスを検索・取得・作成・更新・通知するノードです。会話から実際の業務操作へつなげます。
ツール検索
CRM / Notion / Drive などを検索
入力Text出力Text役割
CRM・Notion・Driveなどの外部サービスを検索し、ヒットした情報を会話に持ち込みます。
ツール取得
単一レコードや文書を取得
入力Text出力Text役割
IDやキーを指定して、単一のレコードや文書を取得します。
ツール作成
予定・Issue・レコードを新規作成
入力Text出力Text役割
予定・Issue・レコードなどを新規作成します。会話の内容を実際の業務データに反映させたいときに使います。
ツール更新
既存データを更新
入力Text出力Text役割
既存データのステータスや項目を更新します。
ツール通知
Slack / Discord / Teams へ通知
入力Text出力Text役割
Slack・Discord・Teamsなどへ通知を送ります。会話の要約や担当者への引き継ぎ送信に使います。
HTTP連携
Webhook / REST API を呼び出し
入力Text出力Text役割
任意のWebhookやREST APIを呼び出す汎用ノードです。専用ノードがない連携はこれで実装します。呼び出し先のホストは設定画面の許可ホストに登録しておく必要があります。
連携/Tools カテゴリには、Slack通知・Google Calendar作成・HubSpot顧客検索・Notionページ取得・GitHub Issue作成・Webhook呼び出しといったサービス別プリセットも用意されています。プリセットを選ぶと、対象サービス向けの初期値が入った状態でノードが追加されます。
音声エージェント
音声入力から音声応答までをまとめて担当する、低遅延会話向けのノードです。
音声エージェント
OpenAI Realtime を利用した音声エージェント
入力AudioTextVector Results出力AudioText役割
OpenAI Realtime APIを使い、音声入力から音声応答までを一体で処理する低遅延ノードです。Turn Taking制御ノードの後段に置き、アバターノードへ直接音声を渡します。
カスタム音声エージェント
OpenAIベースで構築するカスタム音声パイプライン
入力AudioTextVector Results出力AudioText役割
Realtimeに任せきりにせず、STT・LLM・TTSの組み合わせを自分で構成したいときのカスタム音声パイプラインノードです。
操作エージェント
ローカルCLIを通じてブラウザなどのGUIを操作するエージェント向けのノードです。ポリシーと人間承認を組み合わせて安全側に運用します。
ローカルエージェントRunner
ログイン済みCLI（Codex / Claude Code）への接続を確立
入力なし出力Text役割
手元のログイン済みCLI（Codex / Claude Code）へ接続し、操作エージェントの実行基盤を用意します。CLIの認証情報はユーザーの端末に残ります。
ブラウザ操作エージェント
Runner経由でCLIを駆動し隔離ブラウザを操作
入力TextPolicy出力TextAction LogScreenApproval役割
Runner経由でCLIを駆動し、隔離ブラウザを操作するエージェント本体です。操作ポリシーを入力として受け取り、実行結果・操作ログ・画面フレーム・承認要求を出力します。
操作ポリシー
許可ドメイン・禁止操作・承認必須操作を定義
入力なし出力Policy役割
許可ドメイン・禁止操作・承認必須操作を定義するガードレールです。ブラウザ操作エージェントには必ず接続してください。
人間承認
危険操作の承認待ちとフロー再開
入力Approval出力Text役割
危険な操作の実行前に人間の承認を挟み、承認された後にフローを再開します。
操作ログ
操作履歴と画面プレビューを記録・可視化
入力Action Log出力なし役割
操作履歴と画面プレビューを記録・可視化する終端ノードです。何が行われたかを後から検証できます。
教育/講義
講義やレッスンの進行を管理するノードです。
レッスン
発話・問いかけ・資料参照を一つの講義進行として設計する
入力Audio出力Text役割
講義の進行（発話・問いかけ・資料提示）を台本として管理します。順に講義を進め、受講者が話しかけると停止して質問に答え、その後に講義を再開します。
学習評価
学習者の発言根拠から目標別の習熟度・苦手項目・次の学習行動を仮評価
入力Text出力Text役割
学習者本人の発言をEvidenceとして抽出し、学習目標ごとの習熟度・確信度・つまずき・次の学習行動を仮評価します。あわせて試行回数・ヒント回数・初回正答・自力到達を記録し、同じ点数でも到達の仕方を区別できるようにします。結果は教師が原発言を確認して確定します。
今日の学習計画
課題・復習期限・学習者モデルから毎日の学習項目を編成
入力Text出力Text役割
教師の重点課題、復習期限、保存済み学習者モデルを「今日の学習」へ編成します。学習評価ノードの後段へ接続し、生徒には短い行動計画、教師には介入候補として同じデータを役割別に表示します。
プレゼンテーション
アバターと一緒に映す資料やBGMを設定するノードです。
教材・資料
PDF・画像・動画・YouTubeと表示レイアウトを管理するメディアライブラリ
入力なし出力なし役割
PDF・画像・動画・YouTubeを登録し、アバターと並べて表示するレイアウトを決める設定ノードです。エッジはつなぎませんが、講義中に該当ページを提示するために参照されます。
BGM
ライブ配信で使用するバックグラウンド音楽を設定する
入力なし出力なし役割
ライブ配信やプレビューで流すBGMと音量を設定する設定ノードです。こちらもエッジの接続は不要です。
このほか、キャンバスにメモを残すための「付箋」ノードがあります。付箋はデータの流れには関与しません。
テンプレート
テンプレートは、目的別に必要なノードと接続をあらかじめ組み立てた雛形です。ダッシュボードの「テンプレートから作成」、またはエディター左側のノードパレットにある「テンプレート（音声/テキスト）」から適用できます。まずテンプレートを適用し、プロンプト・音声・アバターだけを差し替えるのが最短の作り方です。
テンプレートは目的別に4つのカテゴリへ分かれています。
リアルタイム会話
低遅延で途切れずに話し続ける常時会話向け
リアルタイム会話AIエージェント（3Dアバター）
ターン制御→Realtime音声エージェント→3Dアバターで低遅延会話を行う構成
ノード 6個・接続 5本
リアルタイム会話AIエージェント（2Dアバター）
ターン制御→Realtime音声エージェント→Live2Dアバターで低遅延会話を行う構成
ノード 5個・接続 4本
リアルタイム会話AIエージェント（カスタム）（3Dアバター）
音声入力（安定したSTT）→ターン制御→LLM→TTS→3Dアバター。マイク常時ONで割り込みも効く常時会話を、STT・LLM・TTSがそれぞれ独立したノードのまま実現する構成。既定はWorker音声パイプラインの gpt-4o-transcribe とし、RAG・ツール・任意のTTS音声を細かく制御できる
ノード 7個・接続 6本
リアルタイム会話AIエージェント（カスタム）（2Dアバター）
音声入力（安定したSTT）→ターン制御→LLM→TTS→2D(Live2D)アバター。マイク常時ONで割り込みも効く常時会話を、STT・LLM・TTSがそれぞれ独立したノードのまま実現する構成。既定はWorker音声パイプラインの gpt-4o-transcribe
ノード 7個・接続 6本
AI面接官
面接を実施し、根拠付きで評価をまとめる
AI面接官（リアルタイム会話・3Dアバター）
Realtime面接とEvidence-first面談分析を組み合わせ、根拠付き評価を人間がレビューできる3D面接官構成
ノード 7個・接続 6本
AI面接官（リアルタイム会話・2Dアバター）
Realtime面接とEvidence-first面談分析を組み合わせ、根拠付き評価を人間がレビューできるLive2D面接官構成
ノード 6個・接続 5本
AI講師
教材を順番に進めながら、途中の質問にも回答します
AI講師（連続講義＋カスタム質問対応・3Dアバター）
今日の学習計画→受講者音声入力→カリキュラム連続講義→Evidence評価→次回復習までをつなぐ、毎日利用向け3D AI講師構成。講義の読み上げも質問対応もSTT→LLM→TTSで行うため、応答生成と読み上げのモデルを選べる。既定の gpt-4o-transcribe はWorker音声パイプライン（VAD＋発話終了時の一括STT）で処理し、会話開始の安定性を優先する
ノード 12個・接続 9本
AI講師（連続講義＋カスタム質問対応・2Dアバター）
今日の学習計画→受講者音声入力→カリキュラム連続講義→Evidence評価→次回復習までをつなぐ、毎日利用向け2D AI講師構成。講義の読み上げも質問対応もSTT→LLM→TTSで行うため、応答生成と読み上げのモデルを選べる。既定の gpt-4o-transcribe はWorker音声パイプライン（VAD＋発話終了時の一括STT）で処理し、会話開始の安定性を優先する
ノード 11個・接続 8本
AI講師（連続講義＋Realtime質問対応・3Dアバター）
Lesson Sequencerによる連続講義はTTS、受講者の音声質問はRealtimeが担当し、単一の3D講師アバターへ合流する構成。講義中の割り込み、質問回答、講義再開を音声の二重再生なしで行う
ノード 12個・接続 9本
AI講師（連続講義＋Realtime質問対応・2Dアバター）
Lesson Sequencerによる連続講義はTTS、受講者の音声質問はRealtimeが担当し、単一のLive2D講師アバターへ合流する構成。講義中の割り込み、質問回答、講義再開を音声の二重再生なしで行う
ノード 11個・接続 8本
AIチューター
学習者の質問や対話を中心に、理解確認や復習を支援します
AIチューター（Realtime質問対応・3Dアバター）
講義を進めず、学習者の質問に教材（知識ベース）を根拠に答えることに専念するRealtime構成。レッスンも資料提示も持たない。3Dアバターが低遅延で応答し、理解できたことは学習評価と次回計画に記録する
ノード 7個・接続 6本
AIチューター（Realtime質問対応・2Dアバター）
講義を進めず、学習者の質問に教材（知識ベース）を根拠に答えることに専念するRealtime構成。レッスンも資料提示も持たない。Live2Dアバターが低遅延で応答し、理解できたことは学習評価と次回計画に記録する
ノード 6個・接続 5本
AIチューター（カスタム質問対応・3Dアバター）
講義を進めず、質問対応に専念するSTT→LLM→TTS構成。レッスンも資料提示も持たない。既定の gpt-4o-transcribe はWorker音声パイプライン（VAD＋発話終了時の一括STT）で処理し、会話開始の安定性を優先する。応答生成と読み上げのモデルを選べるぶん実行コストを抑えやすく、3Dアバターへ出力する
ノード 9個・接続 8本
AIチューター（カスタム質問対応・2Dアバター）
講義を進めず、質問対応に専念するSTT→LLM→TTS構成。レッスンも資料提示も持たない。既定の gpt-4o-transcribe はWorker音声パイプライン（VAD＋発話終了時の一括STT）で処理し、会話開始の安定性を優先する。応答生成と読み上げのモデルを選べるぶん実行コストを抑えやすく、Live2Dアバターへ出力する
ノード 8個・接続 7本
AIチューター：英会話学習（個人学習・2Dアバター）
初級〜中級向け。短い英会話を続けながら、伝わりやすさと表現を一度に1点ずつ練習する。教材は後から追加でき、会話Evidenceと今日の10分計画を科目別に記録する
ノード 6個・接続 5本
AIチューター：数学（中学生）（個人学習・2Dアバター）
計算・方程式・文章題を、答えの丸暗記ではなく途中式と考え方から一緒に確認する。教材は後から追加でき、会話Evidenceと今日の10分計画を科目別に記録する
ノード 6個・接続 5本
AIチューター：幼児教育（親子）（個人学習・2Dアバター）
3〜6歳向け。保護者と一緒に、ことば・数・形を短い遊びや会話で楽しく学ぶ。教材は後から追加でき、会話Evidenceと今日の10分計画を科目別に記録する
ノード 7個・接続 5本
AIチューター：国語（小学生）（個人学習・2Dアバター）
語彙・読解・作文を、本文の言葉を根拠にして自分の言葉で説明する練習。教材は後から追加でき、会話Evidenceと今日の10分計画を科目別に記録する
ノード 7個・接続 5本
AIチューター：現代文（高校生）（個人学習・2Dアバター）
評論・小説の論理構造、表現、設問の根拠を本文に戻って読み解く。教材は後から追加でき、会話Evidenceと今日の10分計画を科目別に記録する
ノード 6個・接続 5本
汎用アシスタント
テキストや音声で質問に答える基本構成
AIエージェント_deprecated（3Dアバター）
テキスト/ワンショット音声入力→LLM→TTS（音声出力）から、アニメーション制御経由で3Dアバターへ反映する構成
ノード 9個・接続 8本
AIエージェント_deprecated（2Dアバター）
テキスト/ワンショット音声入力→LLM→TTS（音声出力）からLive2Dアバターへ反映する構成
ノード 8個・接続 7本
各テンプレートには3Dアバター版（VRM）と2Dアバター版（Live2D）があり、構成は同じでアバターの表示方式だけが異なります。ダッシュボードの作成画面では、テンプレートと合わせてアバタープリセットも選べます。
テンプレートを適用した直後は、利用するプロバイダのAPIキーが未設定の場合に「資格情報の紐付けが必要」という通知が表示されます。設定画面のAPI管理でキーを登録してからプレビューを実行してください。
ノードパレットの「現在のグラフをテンプレート保存」で、作り込んだ構成を自分のテンプレートとして保存できます。保存したテンプレートはローカルテンプレートとして一覧の先頭に表示され、最新20件まで保持されます。
エディターのノードパレットには、上記に加えて RAG（ベクターストア）構成やブラウザ操作エージェント（ガード付き）など、より踏み込んだ構成のテンプレートも用意されています。
RAG（検索拡張生成）の利用
LLMノードでRAGを有効にすると、独自のドキュメントや社内データを参照した回答が可能になります。ベクターストアノードを追加し、参照させたいファイル（PDF・テキストなど）をアップロードするだけで設定完了です。アップロードされたデータは Cloudflare Vectorize に保存され、会話の中で自動的に関連情報が検索・参照されます。
APIキーの設定
外部APIを利用するには、各サービスのAPIキーを事前に登録する必要があります。設定画面の「API管理」タブを開き、使用するサービスのAPIキーを入力してください。登録されたキーは暗号化されて安全に保存され、エージェントの実行時に自動的に使用されます。
Stripe決済
Starter / Professional / Team の購入は Pricing 画面から Stripe Checkout を使って行います。購入後は Subscription 画面で契約状態を確認でき、Billing Portal から支払い方法や請求書の確認へ遷移できます。
よくある質問
- Q. 無料で使えますか？
- プランごとに利用可能なノード数・API呼び出し回数が異なります。詳細は料金ページをご確認ください。
- Q. 複数のウェブサイトに同じエージェントを設置できますか？
- はい。同じスニペットを複数のページに貼り付けることで、どのサイトでも同じエージェントを利用できます。
- Q. モバイルブラウザでも動作しますか？
- 対応しています。ただし、マイク入力を使用する場合はブラウザのマイクアクセス許可が必要です。
- Q. アバターのデザインはカスタマイズできますか？
- 2Dテンプレートでは任意の画像・Live2Dモデル、3Dテンプレートでは glTF/VRM 形式のモデルを使用できます。アバターノードのプロパティパネルからアップロードしてください。
サポート
ご不明な点がございましたら、サポートページのチャットまたは公式Discordサーバーからお問い合わせください。
公式Discordに参加する開発者向け情報
Vtkoolの内部構成に関する情報です。エージェントを作って公開するだけであれば読む必要はありません。
システム構成
フロントエンドでは、ReactベースのUIがノードエディタキャンバスとプロパティパネルを提供します。ユーザーはノードをビジュアル操作するだけでエージェントのパイプラインを構築できます。
ノードシステムは、ノードレジストリ・ノードエグゼキュータ・パラメータバリデータから構成され、各ノードの定義・実行・入力値の検証を担います。
API統合レイヤーは、音声認識（STT）・LLM（RAG対応）・テキスト読み上げ（TTS）・アバター制御・ベクターストア・埋め込み生成の各クライアントを束ね、外部APIとの通信を一元管理します。
対応外部APIには、OpenAI・Aivis Cloud・ElevenLabs・Azure Speech・Google Cloud などが含まれており、用途に応じて組み合わせて利用できます。
データ層には Supabase（Postgres + RLS）、Cloudflare R2・D1・Vectorize を採用しており、APIキーは暗号化して安全に保存されます。認証には Supabase Auth を使用し、Cloudflare Worker がバックエンドフォーフロントエンド（BFF）として機能します。
Stripe決済
Cloudflare Worker には `STRIPE_SECRET_KEY`、`STRIPE_WEBHOOK_SECRET`、`STRIPE_PRICE_ID_STARTER`、`STRIPE_PRICE_ID_PROFESSIONAL`、`STRIPE_PRICE_ID_TEAM` の設定が必要です。Webhook は `/api/billing/webhook` を利用します。
詳細な設定手順は `docs/stripe-billing.md` を参照してください。