Visual Agent Builder to Code

Time to complete: 5 minutes
What you’ll get: A working AI agent built visually + full source code in your IDE ready for customization

Start with zero code using the visual Agent Workbench, then seamlessly transition to full development control with downloadable source code.

Quick Build-to-Code Process

Create Agent Visually

Go to app.xpander.ai and click + New Agent.The workbench has two main sections:

Left: Agent configuration (tools, instructions, settings)
Right: Agent preview (chat testing and visual graph)

No coding required - build everything through the UI!

Auto-Generate Instructions

In the Instructions tab:

Click “Write instructions with AI”
Enter a simple prompt like: AI Agent that can get the latest news about any topic from Google News, and send those news via email
Watch as the system automatically populates:
- System prompt
- Agent rules
- Goals and behavior guidelines

Add Tools Visually

In the Tools tab, click + Add tools and select:

Google News → Retrieve News Articles By Topic
Built-in actions → Send Email
Add any other tools you need from the gallery

Test in Workbench

Use the Chat module in the Agent Preview panel to test your agent.Test with: Get the latest news about LLM reasoning models, and send them to me over email

Download Your Code

Ready to add custom logic? Click the Download code button in the top right.Or use the CLI:

# Install CLI
npm install -g xpander-cli

# Download your agent code
xpander agent init "your-agent-name"

You’ll get a complete project with:

Pre-configured Python/Node.js code
All your workbench settings
Environment variables ready
Your tools and instructions baked in

What You Get in Your IDE

🎉 Complete codebase with everything from the workbench:

from xpander_sdk import Backend, on_task, Task, register_tool
from agno.agent import Agent

# Your workbench tools are automatically available
# Add custom tools here:

@register_tool
def my_custom_function(data: str) -> str:
    """Your custom business logic"""
    # Add your own logic here
    return f"Processed: {data}"

@on_task
def handle_request(task: Task):
    backend = Backend(task.configuration)
    agent = Agent(**backend.get_args())
    
    # Your workbench instructions are already configured
    result = agent.arun(message=task.to_message())
    task.result = result.content
    return task

Key Benefits of This Approach

Visual Prototyping

Build and test ideas quickly without writing code

AI-Generated Instructions

Get optimized prompts and configurations automatically

Seamless Transition

Download includes all your visual configurations

Full Development Control

Add custom functions, APIs, and business logic

Advanced Customization Ideas

Add Custom Business Logic

@register_tool
def validate_customer(email: str) -> dict:
    """Check customer status in your CRM"""
    # Connect to your database/CRM
    return {"status": "premium", "tier": "gold"}

@register_tool
def process_payment(amount: float, customer_id: str) -> str:
    """Process payment via your payment gateway"""
    # Custom payment processing logic
    return "Payment processed successfully"

Transform Incoming Data

@on_task
def handle_slack_message(task: Task):
    # Custom preprocessing of Slack messages
    if task.source == "slack":
        # Add user context, filter sensitive data, etc.
        task.metadata["user_role"] = get_user_role(task.user_id)
    
    # Continue with agent processing
    backend = Backend(task.configuration)
    agent = Agent(**backend.get_args())
    result = agent.arun(message=task.to_message())
    return task

External API Integrations

@register_tool
def check_inventory(product_id: str) -> dict:
    """Check real-time inventory from your system"""
    import requests
    response = requests.get(f"https://api.yourcompany.com/inventory/{product_id}")
    return response.json()

Testing Your Custom Code

Local Development

xpander dev --debug

All Slack messages, webhook calls, and UI interactions route to your local machine.

Real-time Testing

Test through the workbench chat UI
Send Slack messages (if connected)
Trigger webhooks from external systems
See debug logs in your terminal

Deploy When Ready

xpander deploy

Your customizations go live instantly with automatic scaling.

Next Steps

Now that you have both visual design and code control:

Backend Configuration - Advanced agent settings
API Reference - Full SDK documentation
Examples - See more complex agent implementations

Getting Started

5 Minute Wins

Backend Configuration

Task Sources

Visual Agent Builder to Code

Quick Build-to-Code Process

What You Get in Your IDE

Key Benefits of This Approach

Visual Prototyping

AI-Generated Instructions

Seamless Transition

Full Development Control

Advanced Customization Ideas

Testing Your Custom Code

Next Steps

Getting Started

5 Minute Wins

Backend Configuration

Task Sources

​Quick Build-to-Code Process

​What You Get in Your IDE

​Key Benefits of This Approach

Visual Prototyping

AI-Generated Instructions

Seamless Transition

Full Development Control

​Advanced Customization Ideas

​Testing Your Custom Code

​Next Steps

Quick Build-to-Code Process

What You Get in Your IDE

Key Benefits of This Approach

Advanced Customization Ideas

Testing Your Custom Code

Next Steps