AutoGen UI

!IMPORTANT] This repo has been updated to use the [AutoGen AgentChat interface based on the new AutoGen 0.4x AgentChat api. Also, the API might change, so expect some breaking changes in the future.

The hello world for building a UI interface with AutoGen AgentChat API.

Example UI to demonstrate how to build interfaces using the AutoGen AgentChat API. The UI is built using Next.js and web apis built using FastApi.

What Does the App Do?

• `autogenui.manager` - provides a simple run method that takes a prompt and returns a response from a predefined agent team. Take a look at the agent team json config file to see how the agents are configured. It gives a general idea on what types of agents are supported etc. Check out the tutorial notebook for an example on how to use the provide class to load a team spec.

• `autogenui.web.app.py` - FastApi backend that serves a simple /generate endpoint that takes a prompt and returns a response from a predefined agent team.

• Creates a manager to run tasks
• Streams results of the task run to the client ui

• `frontend` - Next.js frontend that provides a simple chat interface to interact with the backend.

What's Next?

This app is clearly just a starting point. Here are some ideas on how to extend it:

• Extend the manager to support multiple team configurations from the UI
• Storing and loading interaction history in a database.
• Security - add authentication and authorization to the app

!TIP] Note [AutoGen Studio is being rewritten on the AgentChat api to address most of the above points. Take a look at the implementation there for a more complete example.

Getting Started

Note that you will have to setup your OPENAI_API_KEY to run the app.

export OPENAI_API_KEY=

Install dependencies. Python 3.9+ is required. You can install from pypi using pip.

pip install autogenui

or to install from source

git clone git@github.com:victordibia/autogen-ui.git
cd autogenui
pip install -e .

Run ui server.

Set env vars OPENAI_API_KEY

export OPENAI_API_KEY=

autogenui # or with --port 8081

Open http://localhost:8081 in your browser.

To modify the source files, make changes in the frontend source files and run npm run build to rebuild the frontend.

Development

To run the app in development mode, you will need to run the backend and frontend separately.

Backend - with hot-reload

autogenui --reload