Customize UI

@cycls.app()
async def app(context):
    yield "Hello! Here's some **bold** and *italic* text."
    yield "\n\n## A Heading\n\nAnd a paragraph below it."

@cycls.app()
async def app(context):
    yield {"type": "thinking", "thinking": "Let me analyze this question..."}
    yield {"type": "thinking", "thinking": "Considering multiple approaches..."}
    yield "Based on my analysis, here's the answer:"

@cycls.app()
async def app(context):
    yield {
        "type": "code",
        "code": "def hello():\n    print('Hello, World!')",
        "language": "python"
    }

@cycls.app()
async def app(context):
    yield {
        "type": "table",
        "headers": ["Name", "Age", "City"],
        "rows": [
            ["Alice", "30", "New York"],
            ["Bob", "25", "San Francisco"],
            ["Charlie", "35", "Chicago"]
        ]
    }

@cycls.app()
async def app(context):
    yield {
        "type": "callout",
        "callout": "This operation completed successfully!",
        "style": "success",
        "title": "Success"
    }

    yield {
        "type": "callout",
        "callout": "Please review before proceeding.",
        "style": "warning",
        "title": "Warning"
    }

    yield {
        "type": "callout",
        "callout": "Here's some helpful information.",
        "style": "info",
        "title": "Info"
    }

    yield {
        "type": "callout",
        "callout": "An error occurred during processing.",
        "style": "error",
        "title": "Error"
    }

@cycls.app()
async def app(context):
    yield {
        "type": "image",
        "src": "https://example.com/image.png",
        "alt": "Description of image",
        "caption": "Figure 1: An example image"
    }

@cycls.app()
async def app(context):
    yield {"type": "status", "status": "Processing your request..."}
    # ... do work ...
    yield {"type": "status", "status": "Almost done..."}
    yield "Here are the results!"

import cycls
import urllib.parse

header = """
<raw>
<div class="flex flex-col border border-gray-200 rounded-lg bg-white p-6 my-12 max-w-7xl mx-auto">
  <div class="text-3xl font-bold text-gray-900 mb-3">
    Welcome to My Agent
  </div>
  <p class="text-gray-600 text-base">
    Your AI-powered assistant for exploring new ideas.
  </p>
</div>
</raw>
"""

intro = f"""
<div class="py-3">
  <div class="flex flex-wrap gap-3 justify-center">
    <a href="https://cycls.com/send/{urllib.parse.quote('Tell me about Python')}" class="px-4 py-2 border rounded-xl hover:shadow-lg">
      Tell me about Python
    </a>
    <a href="https://cycls.com/send/{urllib.parse.quote('Write a poem')}" class="px-4 py-2 border rounded-xl hover:shadow-lg">
      Write a poem
    </a>
  </div>
</div>
"""

@cycls.app(copy_public=["logo.png"], header=header, intro=intro)
async def app(context):
    yield "Hello! How can I help you today?"

app.local()

import urllib.parse

@cycls.app()
async def app(context):
    link = f"https://cycls.com/send/{urllib.parse.quote('Tell me more')}"
    yield f"Click here to [learn more]({link})"

[Link Text](https://cycls.com/send/Encoded%20message)