Template System

Create reusable templates with HTML, CSS, and prompt configurations

Overview

Templates in AgentOp provide reusable starting points for agents, combining visual presentation (HTML/CSS/JS) with behavioral defaults (prompts, Python code, packages). Templates can be shared across agents and customized for specific use cases.

Template Components

1. Presentation Layer

HTML Code: Structure and layout of the agent interface
CSS Code: Styling and visual design
JavaScript Code: Client-side interactivity

2. Behavioral Defaults

Python Code: Default agent logic and tools
System Prompt: Agent personality and instructions
User Prompt Template: How to format user input
Few-Shot Examples: Example interactions
Prompt Variables: Configurable placeholders

3. Configuration

Default Packages: Python dependencies
Memory Settings: Conversation history configuration
Metadata: Name, description, tags, category

Creating a Template

Step 1: Navigate to Template Builder

Go to /templates/new/ to start creating a template.

Step 2: Fill Metadata

Name: Unique, descriptive name
Description: What agents built from this template will do
Category: chatbot, data-analysis, code-assistant, etc.
Tags: For discovery and organization

Step 3: Design the Interface

HTML Structure

Define the layout using template variables:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{{agent_name}}</title>
    <style>{{css_code}}</style>
</head>
<body>
    <div class="container">
        <h1>{{agent_name}}</h1>
        <p class="description">{{description}}</p>

        <div id="chat-container">
            <div id="messages"></div>
            <input type="text" id="user-input" placeholder="Type a message...">
            <button id="send-btn">Send</button>
        </div>
    </div>

    <script>{{js_code}}</script>
    <script>{{python_code}}</script>
</body>
</html>

Template Variables

Use these placeholders that get replaced when generating agents:

{{agent_name}} - Agent's display name
{{description}} - Agent description
{{css_code}} - CSS styles from template
{{js_code}} - JavaScript from template
{{python_code}} - Python agent logic

CSS Styling

Style your template's interface:

body {
    font-family: system-ui, sans-serif;
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    background: #f5f5f5;
}

.container {
    background: white;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

#chat-container {
    margin-top: 20px;
}

#messages {
    height: 400px;
    overflow-y: auto;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 16px;
}

#user-input {
    width: calc(100% - 100px);
    padding: 10px;
    border: 1px solid #e5e5e5;
    border-radius: 6px;
}

#send-btn {
    width: 80px;
    padding: 10px;
    background: #10b981;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
}

JavaScript Interactivity

Add client-side logic:

// Initialize UI
document.addEventListener('DOMContentLoaded', function() {
    const input = document.getElementById('user-input');
    const sendBtn = document.getElementById('send-btn');
    const messages = document.getElementById('messages');
    
    sendBtn.addEventListener('click', sendMessage);
    input.addEventListener('keypress', function(e) {
        if (e.key === 'Enter') sendMessage();
    });
    
    async function sendMessage() {
        const userText = input.value.trim();
        if (!userText) return;
        
        appendMessage('user', userText);
        input.value = '';
        
        // Call Python agent (bridge provided by AgentOp)
        const response = await callAgent(userText);
        appendMessage('agent', response);
    }
    
    function appendMessage(role, text) {
        const div = document.createElement('div');
        div.className = `message ${role}`;
        div.textContent = text;
        messages.appendChild(div);
        messages.scrollTop = messages.scrollHeight;
    }
});

Step 4: Configure Prompts

System Prompt

Define the agent's role and behavior:

You are a helpful assistant specializing in {{domain}}.
Your goal is to provide accurate and helpful information.

Guidelines:
- Be concise and clear
- Use tools when appropriate
- Ask clarifying questions if needed
- Stay within your domain of expertise

User Prompt Template

User: {input}

Context: {context}

Please provide a helpful response.

Prompt Variables

Define configurable variables in JSON format:

{
  "domain": {
    "type": "string",
    "default": "general assistance",
    "description": "The agent's area of expertise"
  },
  "tone": {
    "type": "string",
    "default": "professional",
    "options": ["professional", "casual", "formal"]
  }
}

Step 5: Add Default Python Code

Provide starter code for agents using this template:

from langchain.agents import AgentExecutor, create_openai_tools_agent
from langchain_openai import ChatOpenAI
from langchain.prompts import ChatPromptTemplate, MessagesPlaceholder
from langchain.tools import tool

# Define default tools
@tool
def example_tool(query: str) -> str:
    """Example tool that agents can customize."""
    return f"Processed: {query}"

# Set up agent
llm = ChatOpenAI(model="gpt-3.5-turbo")
tools = [example_tool]

prompt = ChatPromptTemplate.from_messages([
    ("system", "{{system_prompt}}"),
    MessagesPlaceholder(variable_name="chat_history", optional=True),
    ("human", "{{user_prompt}}"),
    MessagesPlaceholder(variable_name="agent_scratchpad")
])

agent = create_openai_tools_agent(llm, tools, prompt)
agent_executor = AgentExecutor(agent=agent, tools=tools, verbose=True)

Step 6: Configure Packages

Specify default Python packages:

{
  "pyodide_builtins": ["micropip"],
  "pypi_packages": {
    "langchain": ">=0.1.0",
    "langchain_openai": ">=0.1.0"
  }
}

Step 7: Preview and Test

Use the preview feature to see how your template looks with sample data. The preview runs in a sandboxed iframe for safety.

Step 8: Publish

Save your template and set it to "Active" to make it available for agent creation.

Template Versioning

Creating Versions

Templates support prompt versioning to track changes over time:

Edit a template's prompts
Click "Save as New Version"
Add a description of changes
The version is saved with a sequential number

Managing Versions

View History: See all saved versions
Compare: Diff two versions side-by-side
Activate: Restore an older version
Description: Each version has a change log

💡 Version Control Best Practices

Create a new version before making major prompt changes. This allows you to roll back if the changes don't work as expected.

Using Templates

When Creating Agents

When creating a new agent, you select a template which provides:

Initial HTML structure and styling
Default Python code to customize
Prompt configurations
Recommended packages

Customizing from Templates

After selecting a template, you can customize everything:

Modify the Python code
Adjust prompts and variables
Add or remove packages
Change metadata

Template Independence

Agents created from a template are independent. Changes to the template don't affect existing agents (only new agents created from it).

Best Practices

Template Design

Keep HTML structure simple and semantic
Use CSS variables for easy theming
Make layouts responsive for mobile devices
Include accessibility features (ARIA labels, keyboard navigation)

Code Quality

Provide well-commented default Python code
Include error handling examples
Use clear tool names and descriptions
Keep default implementations simple but functional

Prompts

Make system prompts clear and specific
Use variables for customizable parts
Provide helpful few-shot examples
Document variable options and defaults

Documentation

Write clear template descriptions
Explain what variables do
List required vs. optional packages
Include usage examples in the description

Sharing Templates

Public vs. System Templates

Public Templates: Created by users, visible to all
System Templates: Curated by AgentOp team, cannot be deleted

Template Marketplace

Popular templates appear in the template marketplace, sorted by:

Usage count (agents created from template)
Recently updated
Category
Creator