Agentok Studio Documentation

Agentok Studio is a diagram-based code generator for AG2 (formerly AutoGen). It allows users to build agentic applications using drag-and-drop simplicity.

Key Features:

• Visualizing AG2: Provides intuitive visual tools to manage complex multi-agent workflows.
• Conversation Relations: Allows configuring tools on the edges between nodes to manage how LLMs interact with users and tools.
• Tool Editor: A dedicated interface to create and manage tools, including support for configurable variables.
• Code Generation: Generates native, self-contained Python code targeting the official ag2 1.0 API (Agent + ag2.network).
• Full Visibility: Provides access to the underlying data representation of the flow and original AG2 execution logs (stdout/stderr) for debugging.

Agentok Studio is a visual development layer built on top of AG2 (a multi-agent conversation framework).

While AG2 provides the high-level abstraction for building with foundation models—integrating LLMs, tools, and humans through automated agent chat—Agentok Studio provides the interface to:

• Design agent workflows on a visual canvas.
• Run agent chats directly in the browser.
• Export the designed workflows as Python code that utilizes the official ag2 library.

This allows you to move from visual prototyping to production-ready Python code seamlessly.

Agentok Studio inherits the AG2 agent model, which consists of three primary roles used to orchestrate multi-agent conversations:

1. Assistant Agent: An AI assistant powered by an LLM. It is responsible for generating content (such as Python code blocks), receiving execution results, and suggesting fixes. Its behavior is configured via system_message and llm_config.
2. UserProxy Agent: Acts as a proxy for a human. It can automatically execute code blocks when detected and call tools. Code execution behavior is managed via code_execution_config. By default, LLM replies are disabled, but they can be enabled using llm_config.
3. GroupChat Manager: A specialized agent that orchestrates conversations within a group, responsible for deciding the sequence of which agent speaks next.

Agentok Studio is built around four primary abstractions:

• Agent: The core unit of work. In AG2, this is typically a ConversableAgent. Common types include:
  • Assistant Agent: An LLM-powered helper (e.g., chatbot, coder, or planner).
  • UserProxy Agent: Acts as a human interface, a code executor, or both.
• Workflow: A network of agents connected on the canvas. A typical workflow contains one UserProxy and one or more Assistant agents.
• Chat: A live execution session initiated from a specific workflow.
• Template: A published workflow that can be shared via URL, forked by others, or run directly.

You can explore Agentok Studio's features without local installation by visiting the hosted version at https://studio.agentok.ai.

Steps to start:

1. Sign in using GitHub, Google, or email.
2. Click Create New Project to initialize a new project with a sample workflow.
3. Switch to the Chat tab to interact with the agents.

Note: The online deployment is for exploration only and is not intended for production use. Data may be wiped due to breaking changes.

The frontend is a standard Next.js application. It is configured for deployment on Railway using the Railpack builder via the included railway.toml.

Deployment Steps

1. Set the service Root Directory to frontend in your hosting provider (e.g., Railway).
2. Set the following environment variables before the build starts:
   • NEXT_PUBLIC_SUPABASE_URL
   • NEXT_PUBLIC_SUPABASE_ANON_KEY
   • NEXT_PUBLIC_BACKEND_URL

Critical Note on Environment Variables

Variables prefixed with NEXT_PUBLIC_* are embedded into the client-side JavaScript bundle at build time. If you change these values in your hosting dashboard after a deployment, the changes will not take effect until you trigger a new build.

You can extend agent capabilities by defining custom Python functions within the Agentok Studio Function Editor:

1. Open Editor: In the configuration node, select the Build Functions option.
2. Add Function: Click 'Add Function'.
3. Define Metadata: Provide a clear name (e.g., search_bing_news), a detailed description (e.g., Search Bing with the query and return a compilation of links.), and define parameters (e.g., keyword with description The Bing search term.). Precise descriptions are critical for accurate AI code generation.
4. Generate Code: Click Generate Code to let the AI write the implementation based on your metadata.
5. Review: Manually inspect the generated code for errors before proceeding.

To build a collaborative agent workflow in Agentok Studio, follow these steps:

1. Create a new flow: Click 'Build from Scratch' in the Agentok Studio dashboard.
2. Add Agent Nodes: Drag and drop the following nodes from the left panel:
   • Assistant Agent (e.g., named Searcher)
   • Assistant Agent (e.g., named Writer). Note: Append add TERMINATE at the end to the system_message to prevent infinite loops.
   • UserProxy Agent (e.g., named UserProxy)
   • GroupChat node. Enable the Involve User option in the GroupChat configuration.
3. Configure UserProxy: In the UserProxy node's More Options, ensure Code Execution is enabled and set TERMINATE as the message's termination flag using the robot icon.

You can run the Agentok API as a containerized service. While the project uses a multi-stage build approach (base image and app image) for caching, you can typically build the app image directly using the pre-built base image from Docker Hub.

To build and run the app image:

1. Build the image locally using the Dockerfile in the root.
2. Run the container, mapping port 5004 to the host.

# Build the app image
docker build -t agentok-api .

# Run the container
docker run -d -p 5004:5004 agentok-api

Agentok Studio APIs support OAuth2 Bearer Tokens and API Keys. For third-party integrations, it is recommended to use an API Key provided in the X-API-KEY request header.

API Keys can be managed, generated for different environments (e.g., development vs. production), and invalidated via the Agentok Studio Platform.

curl --request GET \
    --url 'https://api.agentok.ai/chats' \
    --header 'X-API-KEY: <api-key>'

Agentok uses Supabase as its backend database service. To set up a full database structure, follow these steps in your Supabase project:

1. Create a project at https://supabase.io.
2. Enable the pgvector extension by running CREATE EXTENSION IF NOT EXISTS vector; in the Supabase SQL Editor.
3. Initialize the schema by executing the contents of sql/schema.sql in the SQL Editor.
4. Create the initial user by executing the contents of sql/create_user.sql.
5. Populate the database with sample data by executing the contents of sql/sample_data.sql.
6. Verify that tables (such as api_keys and chat_message) are visible under the public schema in the Table Editor.

Note: Once the database is initialized, you must configure the environment variables for both the API and frontend projects to connect to your Supabase instance.