> ## Documentation Index
> Fetch the complete documentation index at: https://praison.ai/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Streamlit Agent

> Learn how to create web interfaces for your AI agents using Streamlit

```mermaid theme={"theme":{"light":"vitesse-light","dark":"vitesse-dark"}}
flowchart LR
    In[User Input] --> UI[Streamlit 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 theme={"theme":{"light":"vitesse-light","dark":"vitesse-dark"}}
    pip install praisonaiagents streamlit
    ```
  </Step>

  <Step title="Create Script">
    Create a new file `app.py`:

    ```python theme={"theme":{"light":"vitesse-light","dark":"vitesse-dark"}}
    import streamlit as st
    from praisonaiagents import Agent, Tools
    from praisonaiagents import duckduckgo

    st.title("AI Research Assistant")
    st.write("Enter your research query below to get started!")

    # Initialize the research agent
    agent = Agent(instructions="You are a Research Agent", tools=[duckduckgo])

    # Create the input field
    query = st.text_input("Research Query", placeholder="Enter your research topic...")

    # Add a search button
    if st.button("Search"):
        if query:
            with st.spinner("Researching..."):
                result = agent.start(query)
                st.write(result)
        else:
            st.warning("Please enter a research query")
    ```
  </Step>

  <Step title="Run Application">
    Run your Streamlit app:

    ```bash theme={"theme":{"light":"vitesse-light","dark":"vitesse-dark"}}
    streamlit run app.py
    ```
  </Step>
</Steps>

## Features

<CardGroup cols={2}>
  <Card title="Easy Integration" icon="puzzle-piece">
    Seamlessly integrate AI agents with Streamlit's UI components.
  </Card>

  <Card title="Interactive UI" icon="hand-pointer">
    Create responsive interfaces with real-time updates.
  </Card>

  <Card title="Progress Indicators" icon="spinner">
    Built-in loading states and progress indicators.
  </Card>

  <Card title="Rich Output" icon="text-size">
    Display formatted text, markdown, and other rich content.
  </Card>
</CardGroup>

## Understanding the Code

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

1. **UI Setup**:
   * Title and description using `st.title()` and `st.write()`
   * Input field with `st.text_input()`
   * Search button with `st.button()`

2. **Agent Integration**:
   * Initialize the AI agent with specific instructions
   * Connect the agent to the UI components
   * Handle user input and display results

3. **User Experience**:
   * Loading spinner during processing
   * Input validation and error messages
   * Clean result display

## Customization

You can enhance the UI with additional Streamlit components:

```python theme={"theme":{"light":"vitesse-light","dark":"vitesse-dark"}}
# Add sidebar options
st.sidebar.title("Settings")
model = st.sidebar.selectbox("Select Model", ["GPT-3", "GPT-4"])

# Add multiple input types
text_input = st.text_area("Long Query", height=100)
file_input = st.file_uploader("Upload File")

# Display results with formatting
st.markdown("### Results")
st.json(structured_data)
st.dataframe(tabular_data)
```

## Next Steps

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