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

# Build an Agent with Gradio

> Build and deploy an AI agent with Friendli Model APIs and Gradio in under 50 lines of Python. Includes chat UI setup.

## Goals

* Build your own AI agent using [**Friendli Model APIs**](https://friendli.ai/product/model-apis) and [**Gradio**](https://www.gradio.app) in less than 50 LoC
* Share your AI agent with the world and gather feedback

> [**Gradio**](https://www.gradio.app) is the fastest way to demo your model with a friendly web interface.

## Getting Started

1. Head to [**Friendli Suite**](https://friendli.ai/suite), and create an account.
2. Grab a [Personal API Key](https://friendli.ai/suite/~/setting/keys) to use Friendli Model APIs within an agent.

## Step 1. Prerequisite

Install dependencies.

```bash theme={null}
pip install openai gradio
```

## Step 2. Launch Your Agent

Build your own AI agent using **Friendli Model APIs** and **Gradio**.

* Gradio provides a `ChatInterface` that implements a chatbot UI running the `chat_function`.
  * More information about the *chat\_function(message, history)*
    > *The input function should accept two parameters: a string input message and list of two-element lists of the form \[\[user\_message, bot\_message], ...] representing the chat history, and return a string response.*
* Implement the `chat_function` using Friendli Model APIs.
  * Here, we used the `zai-org/GLM-5.2` model.
  * Feel free to explore [other available models](https://friendli.ai/models?products=SERVERLESS).

```python theme={null}
from openai import OpenAI
import gradio as gr

friendli_client = OpenAI(
    base_url="https://api.friendli.ai/serverless/v1",
    api_key="YOUR_API_KEY"
)

def chat_function(message, history):
    messages = []
    for user, chatbot in history:
        messages.append({"role" : "user", "content": user})
        messages.append({"role" : "assistant", "content": chatbot})
    messages.append({"role": "user", "content": message})

    stream = friendli_client.chat.completions.create(
        model="zai-org/GLM-5.2",
        messages=messages,
        stream=True
    )
    res = ""
    for chunk in stream:
        res += chunk.choices[0].delta.content or ""
        yield res

css = """
.gradio-container {
    max-width: 800px !important;
    margin-top: 100px !important;
}

.pending {
    display: none !important;
}

.sm {
    box-shadow: None !important;
}

#component-2 {
    height: 400px !important;
}
"""

with gr.Blocks(theme=gr.themes.Soft(), css=css) as friendli_agent:
    gr.ChatInterface(chat_function)

friendli_agent.launch()
```

## Step 3. Deploy Your Agent

For the temporary deployment, change the last line of the code.

```python theme={null}
friendli_agent.launch(share=True)
```

For the permanent deployment, you can use [Hugging Face Spaces](https://huggingface.co/spaces)!