Autogenstudio docs (#2890)

* add autogenstudio docs

* update ags readme to point to docs page

* update docs

* update docs

* update faqs

* update, fix typos

samples/apps/autogen-studio/README.md

@@ -12,24 +12,14 @@ Code for AutoGen Studio is on GitHub at [microsoft/autogen](https://github.com/m
 > **Note**: AutoGen Studio is meant to help you rapidly prototype multi-agent workflows and demonstrate an example of end user interfaces built with AutoGen. It is not meant to be a production-ready app.
 
 > [!WARNING]
-> AutoGen Studio is currently under active development and we are iterating quickly. Kindly consider that we may introduce breaking changes in the releases during the upcoming weeks, and also the `README` might be outdated. We'll update the `README` as soon as we stabilize the API.
+> AutoGen Studio is currently under active development and we are iterating quickly. Kindly consider that we may introduce breaking changes in the releases during the upcoming weeks, and also the `README` might be outdated. Please see the AutoGen Studio [docs](https://microsoft.github.io/autogen/docs/autogen-studio/getting-started) page for the most up-to-date information.
+
+**Updates**
 
-> [!NOTE] Updates
 > April 17: AutoGen Studio database layer is now rewritten to use [SQLModel](https://sqlmodel.tiangolo.com/) (Pydantic + SQLAlchemy). This provides entity linking (skills, models, agents and workflows are linked via association tables) and supports multiple [database backend dialects](https://docs.sqlalchemy.org/en/20/dialects/) supported in SQLAlchemy (SQLite, PostgreSQL, MySQL, Oracle, Microsoft SQL Server). The backend database can be specified a `--database-uri` argument when running the application. For example, `autogenstudio ui --database-uri sqlite:///database.sqlite` for SQLite and `autogenstudio ui --database-uri postgresql+psycopg://user:password@localhost/dbname` for PostgreSQL.
 
 > March 12: Default directory for AutoGen Studio is now /home/<user>/.autogenstudio. You can also specify this directory using the `--appdir` argument when running the application. For example, `autogenstudio ui --appdir /path/to/folder`. This will store the database and other files in the specified directory e.g. `/path/to/folder/database.sqlite`. `.env` files in that directory will be used to set environment variables for the app.
 
-### Capabilities / Roadmap
-
-Some of the capabilities supported by the app frontend include the following:
-
-- [x] Build / Configure agents (currently supports two agent workflows based on `UserProxyAgent` and `AssistantAgent`), modify their configuration (e.g. skills, temperature, model, agent system message, model etc) and compose them into workflows.
-- [x] Chat with agent works and specify tasks.
-- [x] View agent messages and output files in the UI from agent runs.
-- [x] Add interaction sessions to a gallery.
-- [ ] Support for more complex agent workflows (e.g. `GroupChat` workflows).
-- [ ] Improved user experience (e.g., streaming intermediate model output, better summarization of agent responses, etc).
-
 Project Structure:
 
 - _autogenstudio/_ code for the backend classes and web api (FastAPI)
@@ -97,32 +87,6 @@ AutoGen Studio also takes several parameters to customize the application:
 
 Now that you have AutoGen Studio installed and running, you are ready to explore its capabilities, including defining and modifying agent workflows, interacting with agents and sessions, and expanding agent skills.
 
-## Capabilities
-
-AutoGen Studio proposes some high-level concepts.
-
-**Agent Workflow**: An agent workflow is a specification of a set of agents that can work together to accomplish a task. The simplest version of this is a setup with two agents – a user proxy agent (that represents a user i.e. it compiles code and prints result) and an assistant that can address task requests (e.g., generating plans, writing code, evaluating responses, proposing error recovery steps, etc.). A more complex flow could be a group chat where even more agents work towards a solution.
-
-**Session**: A session refers to a period of continuous interaction or engagement with an agent workflow, typically characterized by a sequence of activities or operations aimed at achieving specific objectives. It includes the agent workflow configuration, the interactions between the user and the agents. A session can be “published” to a “gallery”.
-
-**Skills**: Skills are functions (e.g., Python functions) that describe how to solve a task. In general, a good skill has a descriptive name (e.g. `generate_images`), extensive docstrings and good defaults (e.g., writing out files to disk for persistence and reuse). You can add new skills AutoGen Studio app via the provided UI. At inference time, these skills are made available to the assistant agent as they address your tasks.
-
-## Example Usage
-
-Consider the following query.
-
-```
-Plot a chart of NVDA and TESLA stock price YTD. Save the result to a file named nvda_tesla.png
-```
-
-The agent workflow responds by _writing and executing code_ to create a python program to generate the chart with the stock prices.
-
-> Note than there could be multiple turns between the `AssistantAgent` and the `UserProxyAgent` to produce and execute the code in order to complete the task.
-
-![ARA](./docs/ara_stockprices.png)
-
-> Note: You can also view the debug console that generates useful information to see how the agents are interacting in the background.
-
 ## Contribution Guide
 
 We welcome contributions to AutoGen Studio. We recommend the following general steps to contribute to the project:
@@ -137,29 +101,7 @@ We welcome contributions to AutoGen Studio. We recommend the following general s
 
 ## FAQ
 
-**Q: How do I specify the directory where files(e.g. database) are stored?**
-
-A: You can specify the directory where files are stored by setting the `--appdir` argument when running the application. For example, `autogenstudio ui --appdir /path/to/folder`. This will store the database (default) and other files in the specified directory e.g. `/path/to/folder/database.sqlite`.
-
-**Q: Where can I adjust the default skills, agent and workflow configurations?**
-A: You can modify agent configurations directly from the UI or by editing the [dbdefaults.json](autogenstudio/utils/dbdefaults.json) file which is used to initialize the database.
-
-**Q: If I want to reset the entire conversation with an agent, how do I go about it?**
-A: To reset your conversation history, you can delete the `database.sqlite` file in the `--appdir` directory. This will reset the entire conversation history. To delete user files, you can delete the `files` directory in the `--appdir` directory.
-
-**Q: Is it possible to view the output and messages generated by the agents during interactions?**
-A: Yes, you can view the generated messages in the debug console of the web UI, providing insights into the agent interactions. Alternatively, you can inspect the `database.sqlite` file for a comprehensive record of messages.
-
-**Q: Can I use other models with AutoGen Studio?**
-Yes. AutoGen standardizes on the openai model api format, and you can use any api server that offers an openai compliant endpoint. In the AutoGen Studio UI, each agent has an `llm_config` field where you can input your model endpoint details including `model`, `api key`, `base url`, `model type` and `api version`. For Azure OpenAI models, you can find these details in the Azure portal. Note that for Azure OpenAI, the `model name` is the deployment id or engine, and the `model type` is "azure".
-For other OSS models, we recommend using a server such as vllm to instantiate an openai compliant endpoint.
-
-**Q: The server starts but I can't access the UI**
-A: If you are running the server on a remote machine (or a local machine that fails to resolve localhost correstly), you may need to specify the host address. By default, the host address is set to `localhost`. You can specify the host address using the `--host <host>` argument. For example, to start the server on port 8081 and local address such that it is accessible from other machines on the network, you can run the following command:
-
-```bash
-autogenstudio ui --port 8081 --host 0.0.0.0
-```
+Please refer to the AutoGen Studio [FAQs](https://microsoft.github.io/autogen/docs/autogen-studio/faqs) page for more information.
 
 ## Acknowledgements
 

website/blog/2023-12-01-AutoGenStudio/index.mdx

@@ -25,6 +25,9 @@ To help you rapidly prototype multi-agent solutions for your tasks, we are intro
 - Explicitly add skills to your agents and accomplish more tasks.
 - Publish your sessions to a local gallery.
 
+
+See the official AutoGen Studio documentation [here](https://microsoft.github.io/autogen/docs/autogen-studio/getting-started) for more details.
+
 AutoGen Studio is open source [code here](https://github.com/microsoft/autogen/tree/main/samples/apps/autogen-studio), and can be installed via pip. Give it a try!
 
 ```bash

website/docs/autogen-studio/faqs.md

@@ -0,0 +1,86 @@
+# AutoGen Studio FAQs
+
+## Q: How do I specify the directory where files(e.g. database) are stored?
+
+A: You can specify the directory where files are stored by setting the `--appdir` argument when running the application. For example, `autogenstudio ui --appdir /path/to/folder`. This will store the database (default) and other files in the specified directory e.g. `/path/to/folder/database.sqlite`.
+
+## Q: Where can I adjust the default skills, agent and workflow configurations?
+
+A: You can modify agent configurations directly from the UI or by editing the `init_db_samples` function in the `autogenstudio/database/utils.py` file which is used to initialize the database.
+
+## Q: If I want to reset the entire conversation with an agent, how do I go about it?
+
+A: To reset your conversation history, you can delete the `database.sqlite` file in the `--appdir` directory. This will reset the entire conversation history. To delete user files, you can delete the `files` directory in the `--appdir` directory.
+
+## Q: Is it possible to view the output and messages generated by the agents during interactions?
+
+A: Yes, you can view the generated messages in the debug console of the web UI, providing insights into the agent interactions. Alternatively, you can inspect the `database.sqlite` file for a comprehensive record of messages.
+
+## Q: Can I use other models with AutoGen Studio?
+
+Yes. AutoGen standardizes on the openai model api format, and you can use any api server that offers an openai compliant endpoint. In the AutoGen Studio UI, each agent has an `llm_config` field where you can input your model endpoint details including `model`, `api key`, `base url`, `model type` and `api version`. For Azure OpenAI models, you can find these details in the Azure portal. Note that for Azure OpenAI, the `model name` is the deployment id or engine, and the `model type` is "azure".
+For other OSS models, we recommend using a server such as vllm, LMStudio, Ollama, to instantiate an openai compliant endpoint.
+
+## Q: The server starts but I can't access the UI
+
+A: If you are running the server on a remote machine (or a local machine that fails to resolve localhost correctly), you may need to specify the host address. By default, the host address is set to `localhost`. You can specify the host address using the `--host <host>` argument. For example, to start the server on port 8081 and local address such that it is accessible from other machines on the network, you can run the following command:
+
+```bash
+autogenstudio ui --port 8081 --host 0.0.0.0
+```
+
+## Q: Can I export my agent workflows for use in a python app?
+
+Yes. In the Build view, you can click the export button to save your agent workflow as a JSON file. This file can be imported in a python application using the `WorkflowManager` class. For example:
+
+```python
+
+from autogenstudio import WorkflowManager
+# load workflow from exported json workflow file.
+workflow_manager = WorkflowManager(workflow="path/to/your/workflow_.json")
+
+# run the workflow on a task
+task_query = "What is the height of the Eiffel Tower?. Dont write code, just respond to the question."
+workflow_manager.run(message=task_query)
+
+```
+
+## Q: Can I deploy my agent workflows as APIs?
+
+Yes. You can launch the workflow as an API endpoint from the command line using the `autogenstudio` commandline tool. For example:
+
+```bash
+autogenstudio serve --workflow=workflow.json --port=5000
+```
+
+Similarly, the workflow launch command above can be wrapped into a Dockerfile that can be deployed on cloud services like Azure Container Apps or Azure Web Apps.
+
+## Q: Can I run AutoGen Studio in a Docker container?
+
+A: Yes, you can run AutoGen Studio in a Docker container. You can build the Docker image using the provided [Dockerfile](https://github.com/microsoft/autogen/blob/autogenstudio/samples/apps/autogen-studio/Dockerfile) and run the container using the following commands:
+
+```bash
+FROM python:3.10
+
+WORKDIR /code
+
+RUN pip install -U gunicorn autogenstudio
+
+RUN useradd -m -u 1000 user
+USER user
+ENV HOME=/home/user \
+    PATH=/home/user/.local/bin:$PATH \
+    AUTOGENSTUDIO_APPDIR=/home/user/app
+
+WORKDIR $HOME/app
+
+COPY --chown=user . $HOME/app
+
+CMD gunicorn -w $((2 * $(getconf _NPROCESSORS_ONLN) + 1)) --timeout 12600 -k uvicorn.workers.UvicornWorker autogenstudio.web.app:app --bind "0.0.0.0:8081"
+```
+
+Using Gunicorn as the application server for improved performance is recommended. To run AutoGen Studio with Gunicorn, you can use the following command:
+
+```bash
+gunicorn -w $((2 * $(getconf _NPROCESSORS_ONLN) + 1)) --timeout 12600 -k uvicorn.workers.UvicornWorker autogenstudio.web.app:app --bind
+```

website/docs/autogen-studio/getting-started.md

@@ -0,0 +1,121 @@
+# AutoGen Studio - Getting Started
+
+[![PyPI version](https://badge.fury.io/py/autogenstudio.svg)](https://badge.fury.io/py/autogenstudio)
+[![Downloads](https://static.pepy.tech/badge/autogenstudio/week)](https://pepy.tech/project/autogenstudio)
+
+![ARA](./img/ara_stockprices.png)
+
+AutoGen Studio is an low-code interface built to help you rapidly prototype AI agents, enhance them with skills, compose them into workflows and interact with them to accomplish tasks. It is built on top of the [AutoGen](https://microsoft.github.io/autogen) framework, which is a toolkit for building AI agents.
+
+Code for AutoGen Studio is on GitHub at [microsoft/autogen](https://github.com/microsoft/autogen/tree/main/samples/apps/autogen-studio)
+
+> **Note**: AutoGen Studio is meant to help you rapidly prototype multi-agent workflows and demonstrate an example of end user interfaces built with AutoGen. It is not meant to be a production-ready app. Developers are encouraged to use the AutoGen framework to build their own applications, implementing authentication, security and other features required for deployed applications.
+
+**Updates**
+
+- April 17: AutoGen Studio database layer is now rewritten to use [SQLModel](https://sqlmodel.tiangolo.com/) (Pydantic + SQLAlchemy). This provides entity linking (skills, models, agents and workflows are linked via association tables) and supports multiple [database backend dialects](https://docs.sqlalchemy.org/en/20/dialects/) supported in SQLAlchemy (SQLite, PostgreSQL, MySQL, Oracle, Microsoft SQL Server). The backend database can be specified with a `--database-uri` argument when running the application. For example, `autogenstudio ui --database-uri sqlite:///database.sqlite` for SQLite and `autogenstudio ui --database-uri postgresql+psycopg://user:password@localhost/dbname` for PostgreSQL.
+
+- March 12: Default directory for AutoGen Studio is now /home/<user>/.autogenstudio. You can also specify this directory using the `--appdir` argument when running the application. For example, `autogenstudio ui --appdir /path/to/folder`. This will store the database and other files in the specified directory e.g. `/path/to/folder/database.sqlite`. `.env` files in that directory will be used to set environment variables for the app.
+
+### Installation
+
+There are two ways to install AutoGen Studio - from PyPi or from source. We **recommend installing from PyPi** unless you plan to modify the source code.
+
+1.  **Install from PyPi**
+
+    We recommend using a virtual environment (e.g., conda) to avoid conflicts with existing Python packages. With Python 3.10 or newer active in your virtual environment, use pip to install AutoGen Studio:
+
+    ```bash
+    pip install autogenstudio
+    ```
+
+2.  **Install from Source**
+
+    > Note: This approach requires some familiarity with building interfaces in React.
+
+    If you prefer to install from source, ensure you have Python 3.10+ and Node.js (version above 14.15.0) installed. Here's how you get started:
+
+    - Clone the AutoGen Studio repository and install its Python dependencies:
+
+      ```bash
+      pip install -e .
+      ```
+
+    - Navigate to the `samples/apps/autogen-studio/frontend` directory, install dependencies, and build the UI:
+
+      ```bash
+      npm install -g gatsby-cli
+      npm install --global yarn
+      cd frontend
+      yarn install
+      yarn build
+      ```
+
+For Windows users, to build the frontend, you may need alternative commands to build the frontend.
+
+```bash
+
+  gatsby clean && rmdir /s /q ..\\autogenstudio\\web\\ui 2>nul & (set \"PREFIX_PATH_VALUE=\" || ver>nul) && gatsby build --prefix-paths && xcopy /E /I /Y public ..\\autogenstudio\\web\\ui
+
+```
+
+### Running the Application
+
+Once installed, run the web UI by entering the following in your terminal:
+
+```bash
+autogenstudio ui --port 8081
+```
+
+This will start the application on the specified port. Open your web browser and go to `http://localhost:8081/` to begin using AutoGen Studio.
+
+AutoGen Studio also takes several parameters to customize the application:
+
+- `--host <host>` argument to specify the host address. By default, it is set to `localhost`. Y
+- `--appdir <appdir>` argument to specify the directory where the app files (e.g., database and generated user files) are stored. By default, it is set to the a `.autogenstudio` directory in the user's home directory.
+- `--port <port>` argument to specify the port number. By default, it is set to `8080`.
+- `--reload` argument to enable auto-reloading of the server when changes are made to the code. By default, it is set to `False`.
+- `--database-uri` argument to specify the database URI. Example values include `sqlite:///database.sqlite` for SQLite and `postgresql+psycopg://user:password@localhost/dbname` for PostgreSQL. If this is not specified, the database URI defaults to a `database.sqlite` file in the `--appdir` directory.
+
+Now that you have AutoGen Studio installed and running, you are ready to explore its capabilities, including defining and modifying agent workflows, interacting with agents and sessions, and expanding agent skills.
+
+### Capabilities / Roadmap
+
+Some of the capabilities supported by the app frontend include the following:
+
+- [x] Build / Configure agents (currently supports two agent workflows based on `UserProxyAgent` and `AssistantAgent`), modify their configuration (e.g. skills, temperature, model, agent system message, model etc) and compose them into workflows.
+- [x] Chat with agent workflows and specify tasks.
+- [x] View agent messages and output files in the UI from agent runs.
+- [x] Support for more complex agent workflows (e.g. `GroupChat` and `Sequential` workflows).
+- [x] Improved user experience (e.g., streaming intermediate model output, better summarization of agent responses, etc).
+
+Review project roadmap and issues [here](https://github.com/microsoft/autogen/issues/737) .
+
+Project Structure:
+
+- _autogenstudio/_ code for the backend classes and web api (FastAPI)
+- _frontend/_ code for the webui, built with Gatsby and TailwindCSS
+
+## Contribution Guide
+
+We welcome contributions to AutoGen Studio. We recommend the following general steps to contribute to the project:
+
+- Review the overall AutoGen project [contribution guide](https://github.com/microsoft/autogen?tab=readme-ov-file#contributing)
+- Please review the AutoGen Studio [roadmap](https://github.com/microsoft/autogen/issues/737) to get a sense of the current priorities for the project. Help is appreciated especially with Studio issues tagged with `help-wanted`
+- Please initiate a discussion on the roadmap issue or a new issue to discuss your proposed contribution.
+- Please review the autogenstudio dev branch here [dev branch](https://github.com/microsoft/autogen/tree/autogenstudio) and use as a base for your contribution. This way, your contribution will be aligned with the latest changes in the AutoGen Studio project.
+- Submit a pull request with your contribution!
+- If you are modifying AutoGen Studio, it has its own devcontainer. See instructions in `.devcontainer/README.md` to use it
+- Please use the tag `studio` for any issues, questions, and PRs related to Studio
+
+## A Note on Security
+
+AutoGen Studio is a research prototype and is not meant to be used in a production environment. Some baseline practices are encouraged e.g., using Docker code execution environment for your agents.
+
+However, other considerations such as rigorous tests related to jailbreaking, ensuring LLMs only have access to the right keys of data given the end user's permissions, and other security features are not implemented in AutoGen Studio.
+
+If you are building a production application, please use the AutoGen framework and implement the necessary security features.
+
+## Acknowledgements
+
+AutoGen Studio is Based on the [AutoGen](https://microsoft.github.io/autogen) project. It was adapted from a research prototype built in October 2023 (original credits: Gagan Bansal, Adam Fourney, Victor Dibia, Piali Choudhury, Saleema Amershi, Ahmed Awadallah, Chi Wang).

website/docs/autogen-studio/usage.md

@@ -0,0 +1,114 @@
+# Using AutoGen Studio
+
+AutoGen Studio supports the declarative creation of an agent workflow and tasks can be specified and run in a chat interface for the agents to complete. The expected usage behavior is that developers can create skills and models, _attach_ them to agents, and compose agents into workflows that can be tested interactively in the chat interface.
+
+## Building an Agent Workflow
+
+AutoGen Studio implements several entities that are ultimately composed into a workflow.
+
+### Skills
+
+A skill is a python function that implements the solution to a task. In general, a good skill has a descriptive name (e.g. generate*images), extensive docstrings and good defaults (e.g., writing out files to disk for persistence and reuse). Skills can be \_associated with* or _attached to_ agent specifications.
+
+![AutoGen Studio Skill Interface](./img/skill.png)
+
+### Models
+
+A model refers to the configuration of an LLM. Similar to skills, a model can be attached to an agent specification.
+The AutoGen Studio interface supports multiple model types including OpenAI models (and any other model endpoint provider that supports the OpenAI endpoint specification), Azure OpenAI models and Gemini Models.
+
+![AutoGen Studio Create new model](./img/model_new.png)
+![AutoGen Studio Create new model](./img/model_openai.png)
+
+### Agents
+
+An agent entity declaratively specifies properties for an AutoGen agent (mirrors most but not all of the members of a base AutoGen Conversable agent class). Currently `UserProxyAgent` and `AssistantAgent` and `GroupChat` agent abstractions are supported.
+
+![AutoGen Studio Create new agent](./img/agent_new.png)
+![AutoGen Studio Createan assistant agent](./img/agent_groupchat.png)
+
+Once agents have been created, existing models or skills can be _added_ to the agent.
+
+![AutoGen Studio Add skills and models to agent](./img/agent_skillsmodel.png)
+
+### Workflows
+
+An agent workflow is a specification of a set of agents (team of agents) that can work together to accomplish a task. AutoGen Studio supports two types of high level workflow patterns:
+
+#### Autonomous Chat :
+
+This workflow implements a paradigm where agents are defined and a chat is initiated between the agents to accomplish a task. AutoGen simplifies this into defining an `initiator` agent and a `receiver` agent where the receiver agent is selected from a list of previously created agents. Note that when the receiver is a `GroupChat` agent (i.e., contains multiple agents), the communication pattern between those agents is determined by the `speaker_selection_method` parameter in the `GroupChat` agent configuration.
+
+![AutoGen Studio Autonomous Chat Workflow](./img/workflow_chat.png)
+
+#### Sequential Chat
+
+This workflow allows users to specify a list of `AssistantAgent` agents that are executed in sequence to accomplish a task. The runtime behavior here follows the following pattern: at each step, each `AssistantAgent` is _paired_ with a `UserProxyAgent` and chat initiated between this pair to process the input task. The result of this exchange is summarized and provided to the next `AssistantAgent` which is also paired with a `UserProxyAgent` and their summarized result is passed to the next `AssistantAgent` in the sequence. This continues until the last `AssistantAgent` in the sequence is reached.
+
+![AutoGen Studio Sequential Workflow](./img/workflow_sequential.png)
+
+<!-- ```
+Plot a chart of NVDA and TESLA stock price YTD. Save the result to a file named nvda_tesla.png
+```
+
+The agent workflow responds by _writing and executing code_ to create a python program to generate the chart with the stock prices.
+
+> Note than there could be multiple turns between the `AssistantAgent` and the `UserProxyAgent` to produce and execute the code in order to complete the task.
+
+![ARA](./img/ara_stockprices.png)
+
+> Note: You can also view the debug console that generates useful information to see how the agents are interacting in the background. -->
+
+<!-- - Build: Users begin by constructing their workflows. They may incorporate previously developed skills/models into agents within the workflow. User's can immediately test their workflows in the the same view or in a saved session in the playground.
+
+- Playground: Users can start a new session, select an agent workflow, and engage in a "chat" with this agent workflow. It is important to note the significant differences between a traditional chat with a Large Language Model (LLM) and a chat with a group of agents. In the former, the response is typically a single formatted reply, while in the latter, it consists of a history of conversations among the agents.
+
+## Entities and Concepts -->
+
+## Testing an Agent Workflow
+
+AutoGen Studio allows users to interactively test workflows on tasks and review resulting artifacts (such as images, code, and documents).
+
+![AutoGen Studio Test Workflow](./img/workflow_test.png)
+
+Users can also review the “inner monologue” of agent workflows as they address tasks, and view profiling information such as costs associated with the run (such as number of turns, number of tokens etc.), and agent actions (such as whether tools were called and the outcomes of code execution).
+
+![AutoGen Studio Profile Workflow Results](./img/workflow_profile.png)
+
+## Exporting Agent Workflows
+
+Users can download the skills, agents, and workflow configurations they create as well as share and reuse these artifacts. AutoGen Studio also offers a seamless process to export workflows and deploy them as application programming interfaces (APIs) that can be consumed in other applications deploying workflows as APIs.
+
+### Export Workflow
+
+AutoGen Studio allows you to export a selected workflow as a JSON configuration file.
+
+Build -> Workflows -> (On workflow card) -> Export
+
+![AutoGen Studio Export Workflow](./img/workflow_export.png)
+
+### Using AutoGen Studio Workflows in a Python Application
+
+An exported workflow can be easily integrated into any Python application using the `WorkflowManager` class with just two lines of code. Underneath, the WorkflowManager rehydrates the workflow specification into AutoGen agents that are subsequently used to address tasks.
+
+```python
+
+from autogenstudio import WorkflowManager
+# load workflow from exported json workflow file.
+workflow_manager = WorkflowManager(workflow="path/to/your/workflow_.json")
+
+# run the workflow on a task
+task_query = "What is the height of the Eiffel Tower?. Dont write code, just respond to the question."
+workflow_manager.run(message=task_query)
+
+```
+
+### Deploying AutoGen Studio Workflows as APIs
+
+The workflow can be launched as an API endpoint from the command line using the autogenstudio commandline tool.
+
+```bash
+autogenstudio serve --workflow=workflow.json --port=5000
+```
+
+Similarly, the workflow launch command above can be wrapped into a Dockerfile that can be deployed on cloud services like Azure Container Apps or Azure Web Apps.

website/docusaurus.config.js

@@ -8,9 +8,9 @@ customPostCssPlugin = () => {
     configurePostCss(options) {
       options.plugins.push(require("postcss-preset-env"));
       return options;
-    }
+    },
   };
-}
+};
 
 module.exports = {
   title: "AutoGen",
@@ -24,13 +24,13 @@ module.exports = {
   projectName: "AutoGen", // Usually your repo name.
   scripts: [
     {
-      src: '/autogen/js/custom.js',
+      src: "/autogen/js/custom.js",
       async: true,
       defer: true,
     },
   ],
   markdown: {
-    format: 'detect', // Support for MD files with .md extension
+    format: "detect", // Support for MD files with .md extension
   },
   themeConfig: {
     docs: {
@@ -80,6 +80,11 @@ module.exports = {
               docId: "FAQ",
               label: "FAQs",
             },
+            {
+              type: "doc",
+              docId: "autogen-studio/getting-started",
+              label: "AutoGen Studio",
+            },
             {
               type: "doc",
               docId: "ecosystem",
@@ -127,9 +132,8 @@ module.exports = {
             {
               label: "Dotnet",
               href: "https://microsoft.github.io/autogen-for-net/",
-            }
+            },
           ],
-
         },
         {
           to: "blog",
@@ -175,7 +179,6 @@ module.exports = {
             {
               label: "Discord",
               href: "https://aka.ms/autogen-dc",
-
             },
             {
               label: "Twitter",
@@ -187,17 +190,17 @@ module.exports = {
       copyright: `Copyright © ${new Date().getFullYear()} AutoGen Authors |  <a target="_blank" style="color:#10adff" href="https://go.microsoft.com/fwlink/?LinkId=521839">Privacy and Cookies</a>`,
     },
     announcementBar: {
-      id: 'whats_new',
+      id: "whats_new",
       content:
         'What\'s new in AutoGen? Read <a href="/autogen/blog/2024/03/03/AutoGen-Update">this blog</a> for an overview of updates',
-      backgroundColor: '#fafbfc',
-      textColor: '#091E42',
+      backgroundColor: "#fafbfc",
+      textColor: "#091E42",
       isCloseable: true,
     },
     /* Clarity Config */
     clarity: {
       ID: "lnxpe6skj1", // The Tracking ID provided by Clarity
-    }
+    },
   },
   presets: [
     [
@@ -281,14 +284,10 @@ module.exports = {
           {
             to: "/docs/contributor-guide/contributing",
             from: ["/docs/Contribute"],
-          }
+          },
         ],
       },
     ],
-    [
-      'docusaurus-plugin-clarity',
-      {
-      }
-    ],
+    ["docusaurus-plugin-clarity", {}],
   ],
 };

website/sidebars.js

@@ -9,114 +9,143 @@
  Create as many sidebars as you want.
  */
 
- module.exports = {
+module.exports = {
   docsSidebar: [
-    'Getting-Started',
+    "Getting-Started",
     {
       type: "category",
       label: "Installation",
       collapsed: true,
       items: ["installation/Docker", "installation/Optional-Dependencies"],
       link: {
-        type: 'doc',
-        id: "installation/Installation"
+        type: "doc",
+        id: "installation/Installation",
       },
     },
     {
-      type: 'category',
-      label: 'Tutorial',
+      type: "category",
+      label: "Tutorial",
       collapsed: false,
       link: {
-        type: 'generated-index',
-        title: 'Tutorial',
-        description: 'Tutorial on the basic concepts of AutoGen',
-        slug: 'tutorial',
+        type: "generated-index",
+        title: "Tutorial",
+        description: "Tutorial on the basic concepts of AutoGen",
+        slug: "tutorial",
       },
       items: [
         {
-          type: 'doc',
-          id: 'tutorial/introduction',
-          label: 'Introduction',
+          type: "doc",
+          id: "tutorial/introduction",
+          label: "Introduction",
         },
         {
-          type: 'doc',
-          id: 'tutorial/chat-termination',
-          label: 'Chat Termination',
+          type: "doc",
+          id: "tutorial/chat-termination",
+          label: "Chat Termination",
         },
         {
-          type: 'doc',
-          id: 'tutorial/human-in-the-loop',
-          label: 'Human in the Loop',
+          type: "doc",
+          id: "tutorial/human-in-the-loop",
+          label: "Human in the Loop",
         },
         {
-          type: 'doc',
-          id: 'tutorial/code-executors',
-          label: 'Code Executors',
+          type: "doc",
+          id: "tutorial/code-executors",
+          label: "Code Executors",
         },
         {
-          type: 'doc',
-          id: 'tutorial/tool-use',
-          label: 'Tool Use',
+          type: "doc",
+          id: "tutorial/tool-use",
+          label: "Tool Use",
         },
         {
-          type: 'doc',
-          id: 'tutorial/conversation-patterns',
-          label: 'Conversation Patterns',
+          type: "doc",
+          id: "tutorial/conversation-patterns",
+          label: "Conversation Patterns",
         },
         {
-          type: 'doc',
-          id: 'tutorial/what-next',
-          label: 'What Next?',
-        }
+          type: "doc",
+          id: "tutorial/what-next",
+          label: "What Next?",
+        },
       ],
     },
-    {'Use Cases': [{type: 'autogenerated', dirName: 'Use-Cases'}]},
+    { "Use Cases": [{ type: "autogenerated", dirName: "Use-Cases" }] },
     {
-      type: 'category',
-      label: 'User Guide',
+      type: "category",
+      label: "User Guide",
       collapsed: false,
       link: {
-        type: 'generated-index',
-        title: 'User Guide',
-        slug: 'topics',
+        type: "generated-index",
+        title: "User Guide",
+        slug: "topics",
       },
-      items: [{type: 'autogenerated', dirName: 'topics'}]
+      items: [{ type: "autogenerated", dirName: "topics" }],
     },
     {
-      type: 'link',
-      label: 'API Reference',
-      href: '/docs/reference/agentchat/conversable_agent',
+      type: "link",
+      label: "API Reference",
+      href: "/docs/reference/agentchat/conversable_agent",
     },
     {
-      type: 'doc',
-      label: 'FAQs',
-      id: 'FAQ',
+      type: "doc",
+      label: "FAQs",
+      id: "FAQ",
     },
+
     {
-      'type': 'category',
-      'label': 'Ecosystem',
-      'link': {
-        type: 'generated-index',
-        title: 'Ecosystem',
-        description: 'Learn about the ecosystem of AutoGen',
-        slug: 'ecosystem',
+      type: "category",
+      label: "AutoGen Studio",
+      collapsed: true,
+      items: [
+        {
+          type: "doc",
+          id: "autogen-studio/getting-started",
+          label: "Getting Started",
+        },
+        {
+          type: "doc",
+          id: "autogen-studio/usage",
+          label: "Using AutoGen Studio",
+        },
+        {
+          type: "doc",
+          id: "autogen-studio/faqs",
+          label: "AutoGen Studio FAQs",
+        },
+      ],
+      link: {
+        type: "generated-index",
+        title: "AutoGen Studio",
+        description: "Learn about AutoGen Studio",
+        slug: "autogen-studio",
       },
-      'items': [{type: 'autogenerated', dirName: 'ecosystem'}]
+    },
+    {
+      type: "category",
+      label: "Ecosystem",
+      link: {
+        type: "generated-index",
+        title: "Ecosystem",
+        description: "Learn about the ecosystem of AutoGen",
+        slug: "ecosystem",
+      },
+      items: [{ type: "autogenerated", dirName: "ecosystem" }],
     },
     {
       type: "category",
       label: "Contributor Guide",
       collapsed: true,
-      items: [{type: 'autogenerated', dirName: 'contributor-guide'}],
+      items: [{ type: "autogenerated", dirName: "contributor-guide" }],
       link: {
-        type: 'generated-index',
-        title: 'Contributor Guide',
-        description: 'Learn how to contribute to AutoGen',
-        slug: 'contributor-guide',
+        type: "generated-index",
+        title: "Contributor Guide",
+        description: "Learn how to contribute to AutoGen",
+        slug: "contributor-guide",
       },
     },
-    'Research',
-    'Migration-Guide'
+    "Research",
+    "Migration-Guide",
   ],
   // pydoc-markdown auto-generated markdowns from docstrings
   referenceSideBar: [require("./docs/reference/sidebar.json")],
@@ -124,14 +153,16 @@
     {
       type: "category",
       label: "Notebooks",
-      items: [{
-        type: "autogenerated",
-        dirName: "notebooks",
-      },],
+      items: [
+        {
+          type: "autogenerated",
+          dirName: "notebooks",
+        },
+      ],
       link: {
-        type: 'doc',
-        id: "notebooks"
+        type: "doc",
+        id: "notebooks",
       },
     },
-  ]
+  ],
 };