> ## Documentation Index
> Fetch the complete documentation index at: https://ikun.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.
# 为您的 Agent 提供精美的 UI
> 用于与 AI Agent 交互的精美、开源界面
Agno 提供了一个精美的 UI，用于与您的 Agent 进行交互，完全开源，可免费使用和扩展。这是一个简单的界面，允许您与 Agent 聊天、查看它们的记忆、知识等。
任何数据都不会发送到 [agno.com](https://app.agno.com)，所有 Agent 数据都存储在您本地的 sqlite 数据库中。
开源 Agent UI 是使用 Next.js 和 TypeScript 构建的。在 [Agent Playground](/introduction/playground) 取得成功后，社区要求提供一个自托管的替代方案，我们做到了！
# 开始使用 Agent UI
要克隆 Agent UI，请在终端中运行以下命令：
```bash theme={null}
npx create-agent-ui@latest
```
输入 `y` 创建一个新项目，安装依赖项，然后运行 agent-ui：
```bash theme={null}
cd agent-ui && npm run dev
```
打开 [http://localhost:3000](http://localhost:3000) 查看 Agent UI，请记住连接到您的本地 Agent。
您也可以手动克隆仓库
```bash theme={null}
git clone https://github.com/agno-agi/agent-ui.git
```
并运行 agent-ui
```bash theme={null}
cd agent-ui && pnpm install && pnpm dev
```
## 连接到本地 Agent
Agent UI 需要连接到一个 playground 服务器，您可以在本地或任何云提供商上运行它。
让我们从本地 playground 服务器开始。创建一个文件 `playground.py`
```python playground.py theme={null}
from agno.agent import Agent
from agno.models.openai import OpenAIChat
from agno.playground import Playground
from agno.storage.sqlite import SqliteStorage
from agno.tools.duckduckgo import DuckDuckGoTools
from agno.tools.yfinance import YFinanceTools
agent_storage: str = "tmp/agents.db"
web_agent = Agent(
name="Web Agent",
model=OpenAIChat(id="gpt-4o"),
tools=[DuckDuckGoTools()],
instructions=["Always include sources"],
# Store the agent sessions in a sqlite database
storage=SqliteStorage(table_name="web_agent", db_file=agent_storage),
# Adds the current date and time to the instructions
add_datetime_to_instructions=True,
# Adds the history of the conversation to the messages
add_history_to_messages=True,
# Number of history responses to add to the messages
num_history_responses=5,
# Adds markdown formatting to the messages
markdown=True,
)
finance_agent = Agent(
name="Finance Agent",
model=OpenAIChat(id="gpt-4o"),
tools=[YFinanceTools(stock_price=True, analyst_recommendations=True, company_info=True, company_news=True)],
instructions=["Always use tables to display data"],
storage=SqliteStorage(table_name="finance_agent", db_file=agent_storage),
add_datetime_to_instructions=True,
add_history_to_messages=True,
num_history_responses=5,
markdown=True,
)
playground = Playground(agents=[web_agent, finance_agent])
app = playground.get_app()
if __name__ == "__main__":
playground.serve("playground:app", reload=True)
```
在另一个终端中，运行 playground 服务器：
```bash Mac theme={null}
python3 -m venv .venv
source .venv/bin/activate
```
```bash Windows theme={null}
python3 -m venv aienv
aienv/scripts/activate
```
```bash Mac theme={null}
pip install -U openai duckduckgo-search yfinance sqlalchemy 'fastapi[standard]' agno
```
```bash Windows theme={null}
pip install -U openai duckduckgo-search yfinance sqlalchemy 'fastapi[standard]' agno
```
```bash Mac theme={null}
export OPENAI_API_KEY=sk-***
```
```bash Windows theme={null}
setx OPENAI_API_KEY sk-***
```
```shell theme={null}
python playground.py
```
确保 `serve_playground_app()` 指向包含您的 `Playground` 应用程序的文件。
## 查看 playground
* 打开 [http://localhost:3000](http://localhost:3000) 查看 Agent UI
* 选择 `localhost:7777` 端点，开始与您的 Agent 聊天！