​
Overview

Every agent comes with a beautiful web UI out of the box. The interface is fully customizable and supports both static customization (header/intro) and dynamic generative UI that can render arbitrary HTML and TailwindCSS.

​
Default Web UI

When you deploy your agent, it automatically gets a web interface accessible at your agent’s URL. The default UI includes:
  • Chat Interface: A modern, responsive chat interface
  • Message History: Automatic conversation history management
  • Real-time Streaming: Support for streaming responses
  • Mobile Responsive: Works seamlessly on all devices
  • Auto RTL Support: The UI automatically detects and supports right-to-left (RTL) languages for proper display and alignment

​
Header and Intro Customization

You can customize the header and introduction sections of your agent’s web UI using HTML and TailwindCSS: 
import cycls

# Initialize the agent
agent = cycls.Agent()

header = """
<raw>
<div style="width:100%;padding:32px 0;background:linear-gradient(90deg,#e3eafc,#f5f7fa,#d1d9e6);color:#2c3e50;text-align:center;font-size:2.5rem;font-weight:bold;letter-spacing:2px;box-shadow:0 4px 16px rgba(44,62,80,0.08);border-radius:16px;margin:32px 0;">
  🚀 This is a <span style="text-decoration:underline;color:#4682b4;">Header</span>
</div>
</raw>
"""

intro = """
this is an intro
"""

# Decorate your function to register it as an agent
@agent(header=header, intro=intro)
async def my_agent(context):
    return "Hello, world!"

agent.run()
Header and Intro Customization Example

​
Customization Parameters

​
header
string
HTML/TailwindCSS string for the header section of your agent’s web UI. Use to customize the top portion of the interface. Must be wrapped in <raw> tags.
​
intro
string
HTML/TailwindCSS string for the introduction section of your agent’s web UI. Use to customize the welcome message and suggested questions.

​
Styling Guidelines

  • HTML Support: Full HTML5 support with inline styles
  • TailwindCSS: Complete TailwindCSS framework available
  • Raw Tags: Wrap custom HTML in <raw> tags to prevent escaping
  • Responsive Design: Use TailwindCSS responsive classes for mobile compatibility
You can create clickable links that automatically send encoded text to the chat when clicked. This is useful for providing suggested questions or actions: 
import cycls

# Initialize the agent
agent = cycls.Agent()

header = """
<raw>
<div style="width:100%;padding:32px 0;background:linear-gradient(90deg,#e3eafc,#f5f7fa,#d1d9e6);color:#2c3e50;text-align:center;font-size:2.5rem;font-weight:bold;letter-spacing:2px;box-shadow:0 4px 16px rgba(44,62,80,0.08);border-radius:16px;margin:32px 0;">
  🚀 This is a <span style="text-decoration:underline;color:#4682b4;">Header</span>
</div>
</raw>
"""

intro = """
Welcome! Here are some things you can ask me:

- [What can you help me with?](https://cycls.com/send/${encodeURIComponent("What can you help me with?")})
- [Tell me about your features](https://cycls.com/send/${encodeURIComponent("Tell me about your features")})
- [Show me an example](https://cycls.com/send/${encodeURIComponent("Show me an example")})
"""

# Decorate your function to register it as an agent
@agent(header=header, intro=intro)
async def my_agent(context):
    return """- [this a link](https://cycls.com/send/${encodeURIComponent("this is a link")})"""

agent.run()
The clickable link format follows this pattern: 
[Link Text](https://cycls.com/send/${encodeURIComponent("Text to send to chat")})

​
Use Cases

  • Suggested Questions: Provide common questions users might ask
  • Quick Actions: Create shortcuts for frequent tasks
  • Navigation: Guide users through different conversation paths
  • Examples: Show users what they can ask about

​
Generative UI

The default chat UI can render arbitrary HTML and TailwindCSS in responses. This enables you to create rich, interactive interfaces: 
import cycls

# Initialize the agent
agent = cycls.Agent()

header = """
<raw>
<div style="width:100%;padding:32px 0;background:linear-gradient(90deg,#e3eafc,#f5f7fa,#d1d9e6);color:#2c3e50;text-align:center;font-size:2.5rem;font-weight:bold;letter-spacing:2px;box-shadow:0 4px 16px rgba(44,62,80,0.08);border-radius:16px;margin:32px 0;">
  🚀 This is a <span style="text-decoration:underline;color:#4682b4;">Header</span>
</div>
</raw>
"""

intro = """
this is an intro
"""

# Decorate your function to register it as an agent
@agent(header=header, intro=intro)
async def my_agent(context):
    return """<div class="max-w-md mx-auto mt-10 bg-white rounded-xl shadow-md overflow-hidden md:max-w-2xl border border-gray-200"><div class="p-8"><div class="uppercase tracking-wide text-sm text-indigo-500 font-semibold">Card Title</div><p class="mt-2 text-gray-500">Hello, world! This is a card rendered with <span class="font-bold">HTML</span> and <span class="font-bold">TailwindCSS</span>.</p></div></div>"""

agent.run()
Generative UI Example

​
Generative UI Tips

  • Progressive Enhancement: Start with simple text, add rich UI gradually
  • Context Awareness: Use conversation context to generate relevant UI
  • Error Handling: Provide fallback content for failed UI generation
  • Testing: Test your generative UI across different devices and browsers

​
Custom Themes

For advanced customization, you can create your own custom UI themes:

​
Using Custom Themes

import cycls

agent = cycls.Agent(
    pip=["openai", "requests"],
    keys=["ak-<token_id>", "as-<token_secret>"],
    front_end="my_theme"  # Custom theme directory
)

@agent("my-agent")
async def my_agent(context):
    return "Hello from custom theme!"

agent.push(prod=True)

​
Theme Structure

Your custom theme should include: 
my_theme/
├── index.html          # Main HTML template
├── styles.css          # Custom styles
├── script.js           # Custom JavaScript
└── assets/             # Images, fonts, etc.
    ├── logo.png
    └── favicon.ico

​
Building Custom Themes

  1. Create Theme Directory: Set up your theme files
  2. Build Process: Compile your frontend (React, Vue, etc.)
  3. Include in Agent: Add the theme directory to your agent configuration
  4. Deploy: The custom theme will be used instead of the default UI

​
Mobile and API Integration

​
Mobile Applications

Use the chat completion API to integrate your agent into mobile apps or any interface: 
# Your agent provides an OpenAI-compatible API
# Mobile apps can use the standard OpenAI SDK

import openai

client = openai.OpenAI(
    api_key="sk-proj-1234567890",
    base_url="https://my-agent.cycls.ai"
)

response = client.chat.completions.create(
    model="my-agent",
    messages=[
        {"role": "user", "content": "Hello from mobile app!"}
    ]
)

​
Custom Frontend Applications

Build your own frontend and connect to your agent’s API: 
// React, Vue, Angular, or any frontend framework
const response = await fetch('https://my-agent.cycls.ai/chat/completions', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json',
        'Authorization': 'Bearer sk-proj-1234567890'
    },
    body: JSON.stringify({
        model: 'my-agent',
        messages: [
            { role: 'user', content: 'Hello from custom frontend!' }
        ]
    })
});