---
title: "Gradio Agent"
sidebarTitle: "Gradio"
description: "Learn how to create web interfaces for your AI agents using Gradio"
icon: "browser"
---

```mermaid
flowchart LR
    In[User Input] --> UI[Gradio UI]
    UI --> Agent[AI Agent]
    Agent --> Out[Results Display]
    
    style In fill:#8B0000,color:#fff
    style UI fill:#2E8B57,color:#fff
    style Agent fill:#2E8B57,color:#fff
    style Out fill:#8B0000,color:#fff
```

## Quick Start

<Steps>
    <Step title="Install Dependencies">
        First, install the required packages:
        ```bash
        pip install praisonaiagents gradio
        ```
    </Step>

    <Step title="Create Script">
        Create a new file `app.py`:
        ```python
        import gradio as gr
        from praisonaiagents import Agent, Tools
        from praisonaiagents.tools import duckduckgo

        def research(query):
            agent = Agent(instructions="You are a Research Agent", tools=[duckduckgo])
            result = agent.start(query)
            # Format the result with enhanced markdown
            formatted_result = f"""
{result}
----
*Generated by PraisonAI Research Assistant*
            """
            return formatted_result

        # Create a simple Gradio interface
        demo = gr.Interface(
            fn=research,
            inputs=gr.Textbox(
                label="Research Query",
                placeholder="Enter your research topic...",
                lines=2
            ),
            outputs=gr.Markdown(
                show_copy_button=True,
                height=500,
                container=True
            ),
            title="AI Research Assistant",
            description="Enter your research query below to get started!",
        )

        if __name__ == "__main__":
            demo.launch()
        ```
    </Step>

    <Step title="Run Application">
        Run your Gradio app:
        ```bash
        python app.py
        ```
    </Step>
</Steps>

## Features

<CardGroup cols={2}>
  <Card title="Simple Interface" icon="wand-magic-sparkles">
    Create beautiful UIs with minimal code.
  </Card>
  <Card title="Markdown Support" icon="markdown">
    Rich text output with built-in markdown rendering.
  </Card>
  <Card title="Copy Button" icon="copy">
    One-click copying of results.
  </Card>
  <Card title="Responsive Design" icon="mobile">
    Mobile-friendly interface out of the box.
  </Card>
</CardGroup>

## Understanding the Code

The example demonstrates a simple research assistant with these key components:

1. **Function Definition**:
   - `research()` function that processes user input
   - Agent initialization and execution
   - Result formatting with markdown

2. **Interface Setup**:
   - Input textbox configuration
   - Markdown output with copy button
   - Title and description settings

3. **Launch Configuration**:
   - Main entry point check
   - Server launch with default settings

## Customization

You can enhance the UI with additional Gradio components:

```python
# Add multiple input types
demo = gr.Interface(
    fn=process_inputs,
    inputs=[
        gr.Textbox(label="Query"),
        gr.File(label="Upload Document"),
        gr.Dropdown(choices=["Option 1", "Option 2"])
    ],
    outputs=[
        gr.Markdown(label="Results"),
        gr.Plot(label="Visualization")
    ]
)

# Add themes and styling
demo = gr.Interface(
    ...
    theme="default",
    css=".gradio-container {background-color: #f0f0f0}"
)

# Add authentication
demo.launch(auth=("username", "password"))
```

## Next Steps

- Learn about [Prompt Chaining](/features/promptchaining) for complex UI workflows
- Explore [Evaluator Optimizer](/features/evaluator-optimiser) for improving responses
- Check out [Streamlit Integration](/ui/streamlit) for an alternative UI framework