autogen ui

Ui autogène

Important

Ce dépôt a été mis à jour pour utiliser l'interface Autogen AgentChat basée sur la nouvelle API Autogen 0.4x AgentChat. De plus, l'API pourrait changer, alors attendez-vous à des changements de rupture à l'avenir.

Le monde Hello pour construire une interface d'interface utilisateur avec Autogen AgentChat API.

Exemple d'interface utilisateur pour démontrer comment construire des interfaces à l'aide de l'API Autogen AgentChat. L'interface utilisateur est construite à l'aide de Next.js et des API Web construites à l'aide de FastAPI.

Que fait l'application?

• autogenui.manager - fournit une méthode d'exécution simple qui prend une invite et renvoie une réponse d'une équipe d'agent prédéfinie. Jetez un œil au fichier de configuration de l'agent Team JSON pour voir comment les agents sont configurés. Il donne une idée générale sur les types d'agents pris en charge, etc. Consultez le cahier de didacticiel pour un exemple sur la façon d'utiliser la classe Fourniture pour charger une spécification d'équipe.

• autogenui.web.app.py - backend fastapi qui sert un point final simple /generate qui prend une invite et renvoie une réponse d'une équipe d'agent prédéfinie.

  • Crée un manager pour exécuter des tâches
  • Streams Résultats de la tâche exécutée vers l'interface utilisateur client

• frontend - Next.js Frontend qui fournit une interface de chat simple pour interagir avec le backend.

Quelle est la prochaine étape?

Cette application n'est clairement qu'un point de départ. Voici quelques idées sur la façon de l'étendre:

• Étendre le gestionnaire pour prendre en charge plusieurs configurations d'équipe à partir de l'interface utilisateur
• Stockage et chargement de l'historique d'interaction dans une base de données.
• Sécurité - Ajoutez l'authentification et l'autorisation à l'application

[! TIP] Remarque Autogen Studio est réécrit sur l'API AgentChat pour aborder la plupart des points ci-dessus. Jetez un œil à la mise en œuvre là-bas pour un exemple plus complet.

Commencer

Notez que vous devrez configurer votre openai_api_key pour exécuter l'application.

 export OPENAI_API_KEY= < your key >

Installez les dépendances. Python 3.9+ est requis. Vous pouvez installer à partir de PYPI en utilisant PIP.

pip install autogenui

ou pour installer à partir de la source

git clone [email protected]:victordibia/autogen-ui.git
cd autogenui
pip install -e .

Exécutez le serveur d'interface utilisateur.

Définir Env Vars OPENAI_API_KEY

 export OPENAI_API_KEY= < your_key > 

autogenui # or with --port 8081

Ouvrez http: // localhost: 8081 dans votre navigateur.

Pour modifier les fichiers source, apportez des modifications dans les fichiers source Frontend et exécutez npm run build pour reconstruire le frontend.

Développement

Pour exécuter l'application en mode développement, vous devrez exécuter le backend et le frontend séparément.

Backend - avec recharge à chaud

autogenui --reload

[! Astuce] Astuce l'interface utilisateur chargée par cette CLI dans une version pré-complée en exécutant la commande Frontend Build Show Blow. Cela signifie que si vous apportez des modifications, le code Frontend ou modifie le nom d'hôte ou le port, le backend s'exécute sur le code frontal frontal Frontend doit être reconstruit pour qu'il se charge via cette commande.

L'extrémité avant

 cd frontend

Installer des dépendances

yarn install

Exécuter en mode Dev - avec recharge à chaud

Définissez NEXT_PUBLIC_API_SERVER sur la ligne de commande.

 export NEXT_PUBLIC_API_SERVER=http:// < your_backend_hostname > /api

Ou créez un fichier .env dans le dossier Frontend avec le contenu suivant.

NEXT_PUBLIC_API_SERVER=http:// < your_backend_hostname > /api

où votre_backend_hostname - est le nom d'hôte qu'Autogenui fonctionne sur par exemple localhost:8081

yarn dev

(Reconstruire

N'oubliez pas d'installer des dépendances et de définir NEXT_PUBLIC_API_SERVER avant la construction.

yarn build

Feuille de route

Il n'y a pas vraiment de feuille de route pour ce projet. Il est conçu comme un exemple simple pour commencer avec l'API Autogen AgentChat. Pour un exemple plus complet, jetez un œil au projet Autogen Studio.

Références

• Autogen Studio.

 @inproceedings{dibia2024autogen,
  title={AutoGen Studio: A No-Code Developer Tool for Building and Debugging Multi-Agent Systems},
  author={Dibia, Victor and Chen, Jingya and Bansal, Gagan and Syed, Suff and Fourney, Adam and Zhu, Erkang and Wang, Chi and Amershi, Saleema},
  journal={EMNLP 2024},
  year={2024}
}

• Autogène.

 @inproceedings{wu2023autogen,
      title={AutoGen: Enabling Next-Gen LLM Applications via Multi-Agent Conversation Framework},
      author={Qingyun Wu and Gagan Bansal and Jieyu Zhang and Yiran Wu and Shaokun Zhang and Erkang Zhu and Beibin Li and Li Jiang and Xiaoyun Zhang and Chi Wang},
      year={2023},
      eprint={2308.08155},
      archivePrefix={arXiv},
      primaryClass={cs.AI}
}