Avatar Agent Builder Documentation
How to build an AI character and publish it on your website. No coding required.
Quick start
Five steps: pick a template, swap the settings, and publish.
1. Select a template
Prepared agent templates are shown in the left panel of the editor. Choose the template that fits your use case.
- 2D avatar template - an agent using illustrations, images, or Live2D characters
- 3D avatar template - an agent using realtime animated 3D models
After selecting a template, the required nodes are placed on the canvas automatically.
2. Configure nodes
Click each node on the canvas to edit details in the property panel on the right. The main node types are listed below.
- STT node - receives microphone input and converts speech to text, including OpenAI Whisper, Azure, and Google Cloud support
- LLM node - receives text input and generates AI responses. Enabling RAG allows answers grounded in your own documents.
- TTS node - converts text to speech, including Aivis Cloud, ElevenLabs, and Azure support
- Avatar node - controls avatar display, animation, lip sync, and related behavior
- Vector store node - handles document embedding and search for RAG
Nodes can be connected with drag and drop. Connecting an output port to another node input defines the data flow.
3. Run the agent
When configuration is complete, click the Run button at the top of the screen. Nodes execute in order, and the preview area shows the agent behavior. If errors occur, the relevant node is highlighted so you can fix it in the property panel.
4. Get the code snippet
After verifying behavior, click the code snippet button next to Run. The HTML snippet required for website embedding is displayed. Use the copy button to copy it to the clipboard.
<!-- 生成されるスニペットのイメージ --> <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. Paste it into your website
Paste the copied snippet into the HTML source of the web page where you want the agent to appear. We recommend placing it immediately before the
</body>tag. Save and publish the page to show the agent.<!-- 例: ページ末尾への挿入 --> ... <script src="https://cdn.example.com/avatar-agent.js" data-agent-id="YOUR_AGENT_ID"> </script> <div id="avatar-agent-root"></div> </body> </html>
Node reference
Nodes are the building blocks of an agent. For each node palette category below, this reference lists what the node does, the role it plays in the pipeline, and the port types it can connect to. Only ports of the same type can be connected, so matching handle colors is the quickest way to see what fits together.
Showing 33 of 33
Input
Nodes that start a conversation. The text or audio they emit flows into the nodes downstream.
Text Input
Text input from the user
InputsNoneOutputsTextRole
Feeds the text that starts a conversation. Use it as the entry point of a text chat agent or to test a flow without audio, and connect it to the LLM processing node.
Audio Input
Input from speech recognition
InputsNoneOutputsAudioTextRole
Receives microphone audio and converts it to text with STT. Configure language, STT model, voice detection sensitivity, and noise suppression. For always-on conversation connect it to the turn taking node; for one-shot input connect it straight to the LLM processing node.
Processing
The core nodes that turn input into a response or a decision.
LLM Processing
Processing with an AI language model
InputsTextVector ResultsOutputsTextRole
The brain of the agent. Set the prompt, model, temperature, and max tokens to generate a response from the incoming text. Connect knowledge base or vector store results to its input to make the answer RAG-grounded.
Emotion Control AI
Generate AI responses with emotional balance
InputsNoneOutputsTextRole
A helper node that hands an emotion-aware response policy to the LLM processing node. It has no input port; connect its output to the LLM node to shape tone and emotional expression.
Turn Taking Control
Timing and turn control for voice conversations
InputsAudioOutputsAudioRole
Directs traffic in an always-on conversation. It sets end-of-utterance timing, minimum utterance length, and barge-in behavior, and sits between the audio input and the LLM processing or voice agent node.
Interview Analysis
Extract evidence and generate rubric scores, confidence, and missing evidence
InputsTextOutputsTextRole
Extracts supporting quotes from interview transcripts and produces per-criterion ratings, confidence, and unverified items. Place it after the conversation in the AI interviewer templates so a human can review the result.
Output
Nodes that deliver the response to the user as text, speech, or an avatar performance.
Text Output
Output the result as text
InputsTextOutputsNoneRole
A terminal node that shows the response as text on screen. Useful for flows without audio and for checking what the model produced.
TTS (voice output)
Convert LLM responses into voice output
InputsTextOutputsAudioRole
Converts the response text into speech and acts as the main output node of a voice agent. Pick the provider, voice, and speed, then pass the audio to the animation control or avatar node.
Audio Player
Show an audio playback icon and player output
InputsAudioOutputsAudioRole
Plays the incoming audio and shows player controls in the preview. Place it after the TTS node when you want to actually listen to the generated speech.
Voice Synthesis Control
Advanced speech synthesis parameters
InputsTextOutputsAudioRole
Use this node when you need finer control over speech synthesis. It exposes individual synthesis parameters for adjustments beyond what the TTS node offers.
2D Avatar Expression
Live2D-based 2D avatar expression control
InputsAudioOutputsNoneRole
A terminal node that renders a Live2D model and drives lip sync, expressions, and gaze from the incoming audio. It is the avatar itself in the 2D templates.
3D Avatar Expression
VRM-focused 3D avatar expression control
InputsAudioOutputsNoneRole
A terminal node that renders a VRM (3D) model and drives lip sync, expressions, and gaze from the incoming audio. It is the avatar itself in the 3D templates.
Animation Control
Adjust avatar motion and gestures
InputsAudioOutputsAudioRole
Sits between the TTS node and the avatar node and assigns idle, talking, and reaction motions. It passes audio through while adding gestures, so it is mainly used in 3D avatar setups.
RAG / Vector
Nodes that search your own documents so answers can be grounded in them.
Knowledge Base
Upload txt/md files and create an index
InputsNoneOutputsVector ResultsRole
Upload files such as txt or md, build an index, and hand search results to the LLM processing node. This single node is enough to get started with RAG.
Embeddings
Vectorize text and generate embeddings
InputsTextOutputsEmbeddingsRole
Turns text into vectors. Place it before the vector store node when you want to build the index yourself.
Vector Store
Store and search vector data
InputsEmbeddingsOutputsVector ResultsRole
Stores vectors and runs similarity search. Connect its results to the LLM processing node to ground answers in your own documents.
Integrations / Tools
Nodes that search, fetch, create, update, or notify external services, connecting a conversation to real work.
Tool Search
Search CRM, Notion, Drive, and similar systems
InputsTextOutputsTextRole
Searches external services such as CRM, Notion, or Drive and brings the matches into the conversation.
Tool Get
Fetch one record or document
InputsTextOutputsTextRole
Fetches a single record or document by ID or key.
Tool Create
Create events, issues, or records
InputsTextOutputsTextRole
Creates events, issues, or records. Use it when the conversation should be reflected in real business data.
Tool Update
Update existing data
InputsTextOutputsTextRole
Updates the status or fields of existing data.
Tool Notify
Notify Slack, Discord, Teams, and similar channels
InputsTextOutputsTextRole
Sends notifications to Slack, Discord, Teams, and similar channels. Useful for conversation summaries and handoffs.
HTTP Integration
Call a webhook or REST API
InputsTextOutputsTextRole
A general-purpose node that calls any webhook or REST API. Use it for integrations without a dedicated node. The target host must be registered under allowed hosts in settings.
The Integrations / Tools category also ships service presets such as Slack notify, Google Calendar create, HubSpot contact search, Notion page get, GitHub issue create, and webhook call. Choosing a preset adds the node with defaults already filled in for that service.
Voice Agents
Nodes that handle everything from voice input to voice response in one place, for low-latency conversation.
Voice Agent
Voice agent powered by OpenAI Realtime
InputsAudioTextOutputsAudioTextRole
A low-latency node that handles voice input through voice response in one piece using the OpenAI Realtime API. Place it after the turn taking node and pass its audio straight to the avatar node.
Custom Voice Agent
Custom OpenAI-based voice pipeline
InputsAudioTextOutputsAudioTextRole
A custom voice pipeline node for when you want to compose STT, LLM, and TTS yourself instead of leaving everything to Realtime.
Operation Agents
Nodes for agents that operate a GUI such as a browser through a local CLI. Combine them with a policy and human approval to stay on the safe side.
Local Agent Runner
Connect to a logged-in CLI (Codex / Claude Code)
InputsNoneOutputsTextRole
Connects to a signed-in CLI on your machine (Codex / Claude Code) and establishes the runtime for operation agents. CLI credentials stay on your device.
Browser Agent
Drive a CLI via the runner to operate an isolated browser
InputsTextPolicyOutputsTextAction LogScreenApprovalRole
The agent itself: it drives the CLI through the runner to operate an isolated browser. It takes an action policy as input and outputs results, action logs, screen frames, and approval requests.
Action Policy
Define allowed domains, blocked and approval-required actions
InputsNoneOutputsPolicyRole
The guardrail that defines allowed domains, blocked actions, and actions that require approval. Always connect it to the browser agent node.
Human Approval
Pause for approval of risky actions, then resume
InputsApprovalOutputsTextRole
Pauses before a dangerous action for human approval and resumes the flow once it is granted.
Action Log
Record and visualize action history and screen previews
InputsAction LogOutputsNoneRole
A terminal node that records and visualizes the action history and screen previews so you can audit what happened.
Education / Lessons
Nodes that drive the progression of a lesson or lecture.
Lesson
Design speech, interactions, and media cues as one lesson flow
InputsAudioOutputsTextRole
Manages the lecture script - what to say, what to ask, and which slide to show. It teaches in order, pauses to answer when a learner speaks up, and then resumes the lecture.
Learning Evaluation
Provisionally assess mastery, learning gaps, and next actions from learner evidence
InputsTextOutputsTextRole
Extracts evidence from learner utterances and provisionally assesses mastery, confidence, learning gaps, and next actions per objective. It also records attempts, hints used, first-attempt correctness, and unaided success, so the same score reads differently depending on how it was reached. A teacher reviews the source utterances before confirming results.
Presentation
Nodes that configure the slides and background music shown alongside the avatar.
Learning media
Manage PDFs, images, videos, YouTube content, and display layouts
InputsNoneOutputsNoneRole
A configuration node that registers PDFs, images, videos, and YouTube content and defines how they are laid out next to the avatar. It takes no edges, but it is referenced when a page needs to be shown during a lecture.
Background music
Configure background music for live broadcasts
InputsNoneOutputsNoneRole
A configuration node that sets the background music and volume used in live output and preview. It needs no edges either.
There is also a sticky note node for leaving comments on the canvas. Sticky notes take no part in the data flow.
Templates
A template is a ready-made graph with the nodes and connections a given use case needs. Apply one from Create from template on the dashboard, or from Templates (voice/text) in the node palette on the left of the editor. Applying a template first and then swapping only the prompt, voice, and avatar is the fastest way to build.
Templates are grouped into four categories by purpose.
General assistant
Answers questions from text or voice input
AI Agent (3D Avatar)
Text or push-to-talk input runs through LLM and TTS (voice output), then drives a 3D avatar through animation control.
8 nodes / 7 connections
AI Agent (2D Avatar)
Text or push-to-talk input runs through LLM and TTS (voice output), then drives a Live2D avatar.
7 nodes / 6 connections
Realtime conversation
Always-on, low-latency conversation with barge-in
Realtime Conversational AI Agent (3D Avatar, Preview)
Low-latency voice input, turn control, Realtime voice agent, and 3D avatar.
5 nodes / 4 connections
Realtime Conversational AI Agent (2D Avatar, Preview)
Low-latency voice input, turn control, Realtime voice agent, and Live2D avatar.
4 nodes / 3 connections
Realtime-style Chained Conversation Agent (3D Avatar)
Audio input (Realtime transcription) → turn taking → LLM → TTS → 3D avatar. Always-listening mic with barge-in, while STT, LLM and TTS stay separate nodes. The Realtime API is used only as streaming speech-to-text, so RAG, tools and any TTS voice remain under your control.
6 nodes / 5 connections
Realtime-style Chained Conversation Agent (2D Avatar)
Audio input (Realtime transcription) → turn taking → LLM → TTS → Live2D avatar. Always-listening mic with barge-in, while STT, LLM and TTS stay separate nodes.
6 nodes / 5 connections
AI interviewer
Runs interviews and summarizes evidence-based ratings
AI Interviewer (Realtime Conversation, 3D Avatar)
Realtime interviewing plus evidence-first analysis for a human-reviewed, source-linked assessment with a 3D avatar.
6 nodes / 5 connections
AI Interviewer (Realtime Conversation, 2D Avatar)
Realtime interviewing plus evidence-first analysis for a human-reviewed, source-linked assessment with a Live2D avatar.
5 nodes / 4 connections
AI instructor
Lectures with slides and answers questions on the way
AI Lecturer (Continuous Curriculum, 3D Avatar)
Learner voice input, interruption control, continuous curriculum narration, an AI lecturer for Q&A, TTS, and a 3D avatar. The avatar lectures in order; speak to interrupt, get an answer, then it resumes.
11 nodes / 8 connections
AI Lecturer (Continuous Curriculum, 2D Avatar)
Learner voice input, interruption control, continuous curriculum narration, an AI lecturer for Q&A, TTS, and a Live2D avatar. The avatar lectures in order; speak to interrupt, get an answer, then it resumes.
10 nodes / 7 connections
AI Lecturer (Realtime Q&A, 3D Avatar)
Lesson Sequencer narrates the curriculum through TTS while Realtime handles learner voice questions. Both speech paths share one 3D lecturer avatar without overlapping autonomous narration.
11 nodes / 8 connections
AI Lecturer (Realtime Q&A, 2D Avatar)
Lesson Sequencer narrates the curriculum through TTS while Realtime handles learner voice questions. Both speech paths share one Live2D lecturer avatar without overlapping autonomous narration.
10 nodes / 7 connections
Every template comes in a 3D avatar (VRM) and a 2D avatar (Live2D) variant. The graph is the same; only how the avatar is rendered differs. The dashboard creation screen lets you pick the avatar preset along with the template.
Right after applying a template, a "credential mapping required" notice appears if the API keys for the providers it uses are not registered yet. Register them under API management in settings before running a preview.
Use Save current graph as template in the node palette to keep a graph you have tuned as your own template. Saved templates appear at the top of the list as local templates, and the 20 most recent ones are kept.
Beyond the templates above, the editor node palette also offers deeper setups such as RAG (vector store) and the guarded browser agent.
Using RAG
When RAG is enabled on an LLM node, responses can reference your own documents and internal data. Add a vector store node and upload files such as PDFs or text documents. Uploaded data is stored in Cloudflare Vectorize and searched automatically during conversations.
API key setup
To use external APIs, register each service API key in advance. Open the API management tab in settings and enter the API key for the service you want to use. Registered keys are encrypted and stored securely, then used automatically when the agent runs.
Stripe billing
Professional / Team purchases are made from the Pricing page with Stripe Checkout. After purchase, you can review subscription status on the Subscription page and open Billing Portal to manage payment methods and invoices.
FAQ
- Q. Can I use it for free?
- Available node counts and API call counts differ by plan. See the pricing page for details.
- Q. Can I install the same agent on multiple websites?
- Yes. Paste the same snippet into multiple pages to use the same agent on any site.
- Q. Does it work on mobile browsers?
- Yes. When microphone input is used, the browser must grant microphone access.
- Q. Can I customize the avatar design?
- 2D templates can use custom images or Live2D models, and 3D templates can use glTF/VRM models. Upload them from the avatar node property panel.
Support
If you have questions, contact support from the support page or the official Discord server.
Join the official DiscordFor developers
Internal details of how Vtkool is built. You do not need this section to create and publish an agent.
System architecture
On the frontend, a React-based UI provides the node editor canvas and property panels. Users can build agent pipelines visually by operating nodes.
The node system consists of a node registry, node executor, and parameter validators. It owns node definitions, execution, and input validation.
The API integration layer centralizes clients for STT, LLM with RAG, TTS, avatar control, vector stores, and embed generation, then manages external API communication.
Supported external APIs include OpenAI, Aivis Cloud, ElevenLabs, Azure Speech, Google Cloud, and other providers that can be combined by use case.
The data layer uses Supabase (Postgres + RLS), Cloudflare R2, D1, and Vectorize. API keys are encrypted before storage. Supabase Auth handles authentication, and the Cloudflare Worker acts as the backend-for-frontend.
Stripe billing
The Cloudflare Worker requires `STRIPE_SECRET_KEY`, `STRIPE_WEBHOOK_SECRET`, `STRIPE_PRICE_ID_PROFESSIONAL`, and `STRIPE_PRICE_ID_TEAM`. Webhooks use `/api/billing/webhook`.
See `docs/stripe-billing.md` for detailed setup steps.