> ## 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 tool calling and 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
* Use tool calling to make your agent even smarter
* 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. Tool Calling (Advanced)

Use tool calling to make your agent even smarter! We will show you how to make your agent search the web before answering as an example.

* Change the `base_url` to `https://api.friendli.ai/serverless/tools/v1`
* Add `tools` parameter when calling chat completion API

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

friendli_client = OpenAI(
    base_url="https://api.friendli.ai/serverless/tools/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,
        tools=[{"type": "web:search"}],
    )
    res = ""
    for chunk in stream:
        if chunk.choices is None:
            yield "Waiting for tool response..."
        else:
            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 agent:
    gr.ChatInterface(chat_function)
agent.launch()
```

Here are the available built-in tools (Beta). Feel free to build your agent using the below tools.

* `linkup:search` (tool for high-quality, AI-powered web search with real-time data and improved accuracy)
* `math:calculator` (tool for calculating arithmetic operations)
* `math:statistics` (tool for analyzing statistical data)
* `math:calendar` (tool for handling date-related data)
* `web:search` (tool for retrieving data through the web search)
* `web:url` (tool for extracting data from a given website)
* `code:python-interpreter` (tool for writing and executing python code)
* `file:text` (tool for extracting text data from a given file)

## Step 4. Deploy Your Agent

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

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

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