From e83263f75aca46d660ac095c2be6b80ba8c543b0 Mon Sep 17 00:00:00 2001 From: Johan Forngren Date: Sat, 11 Jan 2025 18:54:12 +0100 Subject: [PATCH 1/8] Add tiktoken as a dependency in pyproject.toml Signed-off-by: Johan Forngren Update uv.lock with tiktoken dependency from fbfdc9f652384b70f7461c90ada13f87e83677e0 Signed-off-by: Johan Forngren --- python/packages/autogen-studio/pyproject.toml | 1 + python/uv.lock | 2 ++ 2 files changed, 3 insertions(+) diff --git a/python/packages/autogen-studio/pyproject.toml b/python/packages/autogen-studio/pyproject.toml index 869bdb78b8f6..6e5a8677816f 100644 --- a/python/packages/autogen-studio/pyproject.toml +++ b/python/packages/autogen-studio/pyproject.toml @@ -37,6 +37,7 @@ dependencies = [ "autogen-agentchat==0.4.0", "autogen-ext[magentic-one]==0.4.0", "azure-identity", + "tiktoken" ] optional-dependencies = {web = ["fastapi", "uvicorn"], database = ["psycopg"]} diff --git a/python/uv.lock b/python/uv.lock index 95db2f3c8185..bdecfd1f9ff0 100644 --- a/python/uv.lock +++ b/python/uv.lock @@ -670,6 +670,7 @@ dependencies = [ { name = "python-dotenv" }, { name = "pyyaml" }, { name = "sqlmodel" }, + { name = "tiktoken" }, { name = "typer" }, { name = "uvicorn" }, { name = "websockets" }, @@ -703,6 +704,7 @@ requires-dist = [ { name = "python-dotenv" }, { name = "pyyaml" }, { name = "sqlmodel" }, + { name = "tiktoken" }, { name = "typer" }, { name = "uvicorn" }, { name = "uvicorn", marker = "extra == 'web'" }, From 312717f9bd12ec7ff6eef281092ec4d55e6635e3 Mon Sep 17 00:00:00 2001 From: Johan Forngren Date: Mon, 13 Jan 2025 10:38:17 +0100 Subject: [PATCH 2/8] Updating autogen-ext dependencies per https://github.com/microsoft/autogen/pull/5008#issuecomment-2585383877 Signed-off-by: Johan Forngren --- python/packages/autogen-studio/pyproject.toml | 5 ++--- python/uv.lock | 6 ++---- 2 files changed, 4 insertions(+), 7 deletions(-) diff --git a/python/packages/autogen-studio/pyproject.toml b/python/packages/autogen-studio/pyproject.toml index 6e5a8677816f..5c9cbcc6cf47 100644 --- a/python/packages/autogen-studio/pyproject.toml +++ b/python/packages/autogen-studio/pyproject.toml @@ -35,9 +35,8 @@ dependencies = [ "pyyaml", "autogen-core==0.4.0", "autogen-agentchat==0.4.0", - "autogen-ext[magentic-one]==0.4.0", - "azure-identity", - "tiktoken" + "autogen-ext[magentic-one, openai, azure]==0.4.0", + "azure-identity" ] optional-dependencies = {web = ["fastapi", "uvicorn"], database = ["psycopg"]} diff --git a/python/uv.lock b/python/uv.lock index bdecfd1f9ff0..156a298cc262 100644 --- a/python/uv.lock +++ b/python/uv.lock @@ -659,7 +659,7 @@ dependencies = [ { name = "alembic" }, { name = "autogen-agentchat" }, { name = "autogen-core" }, - { name = "autogen-ext", extra = ["magentic-one"] }, + { name = "autogen-ext", extra = ["azure", "magentic-one", "openai"] }, { name = "azure-identity" }, { name = "fastapi" }, { name = "loguru" }, @@ -670,7 +670,6 @@ dependencies = [ { name = "python-dotenv" }, { name = "pyyaml" }, { name = "sqlmodel" }, - { name = "tiktoken" }, { name = "typer" }, { name = "uvicorn" }, { name = "websockets" }, @@ -691,7 +690,7 @@ requires-dist = [ { name = "alembic" }, { name = "autogen-agentchat", editable = "packages/autogen-agentchat" }, { name = "autogen-core", editable = "packages/autogen-core" }, - { name = "autogen-ext", extras = ["magentic-one"], editable = "packages/autogen-ext" }, + { name = "autogen-ext", extras = ["azure", "magentic-one", "openai"], editable = "packages/autogen-ext" }, { name = "azure-identity" }, { name = "fastapi" }, { name = "fastapi", marker = "extra == 'web'" }, @@ -704,7 +703,6 @@ requires-dist = [ { name = "python-dotenv" }, { name = "pyyaml" }, { name = "sqlmodel" }, - { name = "tiktoken" }, { name = "typer" }, { name = "uvicorn" }, { name = "uvicorn", marker = "extra == 'web'" }, From 596663f5b3c11d999583ba60a75f9857c9f87ae9 Mon Sep 17 00:00:00 2001 From: Johan Forngren Date: Mon, 13 Jan 2025 10:23:37 +0100 Subject: [PATCH 3/8] PoC dev container Signed-off-by: Johan Forngren --- .../.devcontainer/devcontainer.json | 46 +++++++++++++++++++ python/packages/autogen-studio/README.md | 28 ++++++++++- 2 files changed, 72 insertions(+), 2 deletions(-) create mode 100644 python/packages/autogen-studio/.devcontainer/devcontainer.json diff --git a/python/packages/autogen-studio/.devcontainer/devcontainer.json b/python/packages/autogen-studio/.devcontainer/devcontainer.json new file mode 100644 index 000000000000..a02b521c0658 --- /dev/null +++ b/python/packages/autogen-studio/.devcontainer/devcontainer.json @@ -0,0 +1,46 @@ +// For format details, see https://aka.ms/devcontainer.json. For config options, see the +// README at: https://github.com/devcontainers/templates/tree/main/src/python +{ + "name": "Python 3", + "image": "mcr.microsoft.com/devcontainers/python:1-3.12-bullseye", + "features": { + "ghcr.io/devcontainers/features/node:1": { + "nodeGypDependencies": true, + "installYarnUsingApt": true, + "version": "lts", + "pnpmVersion": "latest", + "nvmVersion": "latest" + } + }, + + "portsAttributes": { + "8000": { + "label": "Frontend develop" + }, + "8081": { + "label": "AutoGen Studio" + } + }, + + // Performance optimizations for Windows + "mounts": [ + "source=${localWorkspaceFolderBasename}-node_modules,target=/workspace/frontend/node_modules,type=volume", + "source=${localWorkspaceFolderBasename}-yarn-cache,target=/usr/local/share/.cache/yarn,type=volume" + ], + "containerEnv": { + "npm_config_cache": "/tmp/.npm", + "YARN_CACHE_FOLDER": "/tmp/.yarn-cache", + "PYTHONUNBUFFERED": "1", + "PIP_NO_CACHE_DIR": "false", + // Use this to enable Gatsby polling when Docker is used + "CHOKIDAR_USEPOLLING":"true", + // This is used for Hot Module + Reloading with Gatsby + "INTERNAL_STATUS_PORT":"5001" + }, + // Add workspaceMount for better performance + "workspaceMount": "source=${localWorkspaceFolder},target=/workspace,type=bind,consistency=cached", + "workspaceFolder": "/workspace", + + // Use 'postCreateCommand' to install dependencies after the container is created. + "postCreateCommand": "mkdir -p frontend/node_modules && sudo chown vscode frontend/node_modules && pip install --upgrade pip gunicorn && pip install -e . && npm install -g gatsby-cli && cd frontend && yarn install --cache-folder /tmp/.yarn-cache" +} diff --git a/python/packages/autogen-studio/README.md b/python/packages/autogen-studio/README.md index e75d6d3d4309..d709cc92e37e 100644 --- a/python/packages/autogen-studio/README.md +++ b/python/packages/autogen-studio/README.md @@ -30,7 +30,7 @@ Project Structure: 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** +#### 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: @@ -38,7 +38,7 @@ There are two ways to install AutoGen Studio - from PyPi or from source. We **re pip install autogenstudio ``` -2. **Install from Source** +#### 2. Install from Source > Note: This approach requires some familiarity with building interfaces in React. @@ -68,6 +68,30 @@ For Windows users, to build the frontend, you may need alternative commands to b ``` +#### 3. Install from Source using dev container + + > 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: + + 1. Clone the AutoGen Studio repository. + 2. Navigate to the `python/packages/autogen-studio/` directory + 3. Open in devcontainer + 4. Build the UI: + + ```bash + cd frontend + 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: From a6f0f2f340faeb8aac00e6b4be2f7982e67f8e7a Mon Sep 17 00:00:00 2001 From: Johan Forngren Date: Mon, 13 Jan 2025 14:18:58 +0100 Subject: [PATCH 4/8] Enhance devcontainer setup with post-create script for dependency installation and improved performance. Removed partial hot reload setup, as it required bigger changes to the project. Improved documentation, and fixed markdown lint issues. Signed-off-by: Johan Forngren --- .../.devcontainer/devcontainer.json | 29 +++-- .../.devcontainer/post-create-command.sh | 21 ++++ python/packages/autogen-studio/README.md | 113 ++++++------------ .../autogen-studio/frontend/README.md | 15 ++- 4 files changed, 82 insertions(+), 96 deletions(-) create mode 100644 python/packages/autogen-studio/.devcontainer/post-create-command.sh diff --git a/python/packages/autogen-studio/.devcontainer/devcontainer.json b/python/packages/autogen-studio/.devcontainer/devcontainer.json index a02b521c0658..eb18ec25acaf 100644 --- a/python/packages/autogen-studio/.devcontainer/devcontainer.json +++ b/python/packages/autogen-studio/.devcontainer/devcontainer.json @@ -12,35 +12,34 @@ "nvmVersion": "latest" } }, - "portsAttributes": { "8000": { "label": "Frontend develop" }, "8081": { "label": "AutoGen Studio" + }, + "9000": { + "label": "Frontend serve (production)" } }, + // Use 'postCreateCommand' to install dependencies after the container is created. + "postCreateCommand": "bash .devcontainer/post-create-command.sh", + // Performance optimizations for Windows "mounts": [ - "source=${localWorkspaceFolderBasename}-node_modules,target=/workspace/frontend/node_modules,type=volume", - "source=${localWorkspaceFolderBasename}-yarn-cache,target=/usr/local/share/.cache/yarn,type=volume" + "source=node_modules,target=/workspace/frontend/node_modules,type=volume", + "source=yarn-cache,target=/usr/local/share/.cache/yarn,type=volume" ], + // Add workspaceMount for better performance + "workspaceMount": "source=${localWorkspaceFolder},target=/workspace,type=bind", + "workspaceFolder": "/workspace", + "containerEnv": { "npm_config_cache": "/tmp/.npm", "YARN_CACHE_FOLDER": "/tmp/.yarn-cache", "PYTHONUNBUFFERED": "1", - "PIP_NO_CACHE_DIR": "false", - // Use this to enable Gatsby polling when Docker is used - "CHOKIDAR_USEPOLLING":"true", - // This is used for Hot Module + Reloading with Gatsby - "INTERNAL_STATUS_PORT":"5001" - }, - // Add workspaceMount for better performance - "workspaceMount": "source=${localWorkspaceFolder},target=/workspace,type=bind,consistency=cached", - "workspaceFolder": "/workspace", - - // Use 'postCreateCommand' to install dependencies after the container is created. - "postCreateCommand": "mkdir -p frontend/node_modules && sudo chown vscode frontend/node_modules && pip install --upgrade pip gunicorn && pip install -e . && npm install -g gatsby-cli && cd frontend && yarn install --cache-folder /tmp/.yarn-cache" + "PIP_NO_CACHE_DIR": "false" + } } diff --git a/python/packages/autogen-studio/.devcontainer/post-create-command.sh b/python/packages/autogen-studio/.devcontainer/post-create-command.sh new file mode 100644 index 000000000000..bf9d1433e8cd --- /dev/null +++ b/python/packages/autogen-studio/.devcontainer/post-create-command.sh @@ -0,0 +1,21 @@ +#!/bin/bash + +# Create the node_modules directory in the frontend folder if it doesn't exist +# This ensures the directory exists before mounting +mkdir -p frontend/node_modules + +# Change ownership of node_modules to vscode user +# This prevents permission issues when installing packages +sudo chown vscode frontend/node_modules + +pip install --upgrade pip gunicorn + +# Install the AutoGen Studio project in editable mode (-e flag) +# This allows for development changes to be reflected immediately +pip install -e . + +npm install -g gatsby-cli@latest + +# Install yarn dependencies with cache to improve performance +cd frontend && \ +yarn install --cache-folder /tmp/.yarn-cache \ No newline at end of file diff --git a/python/packages/autogen-studio/README.md b/python/packages/autogen-studio/README.md index d709cc92e37e..aa4c6e36afcf 100644 --- a/python/packages/autogen-studio/README.md +++ b/python/packages/autogen-studio/README.md @@ -10,87 +10,66 @@ AutoGen Studio is an AutoGen-powered AI app (user interface) to help you rapidly Code for AutoGen Studio is on GitHub at [microsoft/autogen](https://github.com/microsoft/autogen/tree/main/python/packages/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. - +> > [!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. 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** +## Updates > Nov 14: AutoGen Studio is being rewritten to use the updated AutoGen 0.4.0 api AgentChat api. + > 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//.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. +> 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. Project Structure: - _autogenstudio/_ code for the backend classes and web api (FastAPI) - _frontend/_ code for the webui, built with Gatsby and TailwindCSS -### Installation +## 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 `python/packages/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 - -``` +### Install from PyPi -#### 3. Install from Source using dev container + 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: - > Note: This approach requires some familiarity with building interfaces in React. + ```bash + pip install autogenstudio + ``` - 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: +### Install from Source - 1. Clone the AutoGen Studio repository. - 2. Navigate to the `python/packages/autogen-studio/` directory - 3. Open in devcontainer - 4. Build the UI: + _Note: This approach requires some familiarity with building interfaces in React._ - ```bash - cd frontend - yarn build - ``` + You have two options for installing from source; manually or using a dev container. -For Windows users, to build the frontend, you may need alternative commands to build the frontend. +#### A) Install from source manually -```bash + 1. Ensure you have Python 3.10+ and Node.js (version above 14.15.0) installed. + 2. Clone the AutoGen Studio repository and install its Python dependencies using `pip install -e .` + 3. Navigate to the `python/packages/autogen-studio/frontend` directory, install the 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. + 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 + ``` - 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 +#### B) Install from Source using dev container -``` + 1. Clone the AutoGen Studio repository. + 2. In vscode, open to the `python/packages/autogen-studio/` folder. + 3. Open in Container TODO: describe how + 4. Build the UI: + ```bash + cd frontend + yarn build + ``` ### Running the Application @@ -113,27 +92,9 @@ 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. -#### If running from source - -When running from source, you need to separately bring up the frontend server. - -1. Open a separate terminal and change directory to the frontend - -```bash -cd frontend -``` - -3. Create a `.env.development` file. +#### Local front end development server -```bash -cp .env.default .env.development -``` - -3. Launch frontend server - -```bash -npm run start -``` +See `./frontend/README.md` ## Contribution Guide diff --git a/python/packages/autogen-studio/frontend/README.md b/python/packages/autogen-studio/frontend/README.md index 768541b0d06a..20e9092442b0 100644 --- a/python/packages/autogen-studio/frontend/README.md +++ b/python/packages/autogen-studio/frontend/README.md @@ -1,17 +1,22 @@ +# AutoGen Studio front end + ## 🚀 Running UI in Dev Mode Run the UI in dev mode (make changes and see them reflected in the browser with hotreloading): -- yarn install -- yarn start +```bash +yarn install +yarn start # local development +yarn start --host 0.0.0.0 # in container (enables external access) +``` -This should start the server on port 8000. +This should start the server on [port 8000](http://localhost:8000). ## Design Elements -- **Gatsby**: The app is created in Gatsby. A guide on bootstrapping a Gatsby app can be found here - https://www.gatsbyjs.com/docs/quick-start/. +- **Gatsby**: The app is created in Gatsby. A guide on bootstrapping a Gatsby app can be found here - . This provides an overview of the project file structure include functionality of files like `gatsby-config.js`, `gatsby-node.js`, `gatsby-browser.js` and `gatsby-ssr.js`. -- **TailwindCSS**: The app uses TailwindCSS for styling. A guide on using TailwindCSS with Gatsby can be found here - https://tailwindcss.com/docs/guides/gatsby.https://tailwindcss.com/docs/guides/gatsby . This will explain the functionality in tailwind.config.js and postcss.config.js. +- **TailwindCSS**: The app uses TailwindCSS for styling. A guide on using TailwindCSS with Gatsby can be found here - . This will explain the functionality in tailwind.config.js and postcss.config.js. ## Modifying the UI, Adding Pages From 96bf728d11516205157d04af0e7aac15cb56757f Mon Sep 17 00:00:00 2001 From: Johan Forngren Date: Mon, 13 Jan 2025 16:18:12 +0100 Subject: [PATCH 5/8] Update installation documentation for AutoGen Studio, clarifying installation methods and improving formatting. Adjusted notes for Windows users and corrected minor grammatical issues. Signed-off-by: Johan Forngren --- .../autogenstudio-user-guide/installation.md | 48 +++++++------ python/packages/autogen-studio/README.md | 68 ++++++++++--------- .../autogen-studio/frontend/README.md | 8 +-- 3 files changed, 65 insertions(+), 59 deletions(-) diff --git a/python/packages/autogen-core/docs/src/user-guide/autogenstudio-user-guide/installation.md b/python/packages/autogen-core/docs/src/user-guide/autogenstudio-user-guide/installation.md index 2ca91af58251..6bd5fec9f4bc 100644 --- a/python/packages/autogen-core/docs/src/user-guide/autogenstudio-user-guide/installation.md +++ b/python/packages/autogen-core/docs/src/user-guide/autogenstudio-user-guide/installation.md @@ -57,7 +57,7 @@ conda deactivate `````` -## Install Using pip (Recommended) +## Install from PyPi (Recommended) You can install AutoGen Studio using pip, the Python package manager. @@ -65,19 +65,17 @@ You can install AutoGen Studio using pip, the Python package manager. pip install -U autogenstudio ``` -### Install from Source\*\* +## Install from Source -> Note: This approach requires some familiarity with building interfaces in React. +_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: +You have two options for installing from source: manually or using a dev container. -- Clone the AutoGen Studio repository and install its Python dependencies: +### A) Install from source manually - ```bash - pip install -e . - ``` - -- Navigate to the `samples/apps/autogen-studio/frontend` directory, install dependencies, and build the UI: +1. Ensure you have Python 3.10+ and Node.js (version above 14.15.0) installed. +2. Clone the AutoGen Studio repository and install its Python dependencies using `pip install -e .` +3. Navigate to the `python/packages/autogen-studio/frontend` directory, install the dependencies, and build the UI: ```bash npm install -g gatsby-cli @@ -85,33 +83,39 @@ If you prefer to install from source, ensure you have Python 3.10+ and Node.js ( cd frontend yarn install yarn build + # Windows users may need alternative commands to build the frontend: + 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 ``` -For Windows users, to build the frontend, you may need alternative commands to build the frontend. - -```bash +### B) Install from Source using a dev container - 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 +1. Clone the AutoGen Studio repository. +2. In vscode, open to the `python/packages/autogen-studio/` folder. +3. Open in Container TODO: describe how +4. Build the UI: -``` + ```bash + cd frontend + yarn build + ``` ## Running the Application -Once installed, run the web UI by entering the following in a terminal: +Once installed, run the web UI by entering the following in your terminal: ```bash -autogenstudio ui --port 8081 --appdir /path/to/folder +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. +This command will start the application on the specified port. Open your web browser and go to to use AutoGen Studio. AutoGen Studio also takes several parameters to customize the application: -- `--host ` argument to specify the host address. By default, it is set to `localhost`. -- `--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. +- `--host ` argument to specify the host address. By default, it is set to `localhost`. Y +- `--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 `.autogenstudio` directory in the user's home directory. - `--port ` argument to specify the port number. By default, it is set to `8080`. -- `--upgrade-database` argument to force-upgrade it's internal database schema (assuming there are changes in the version you are installing). By default, it is set to `False`. - `--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 `autogen.db` file in the `--appdir` directory. +- `--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 URIL defaults to a `database.sqlite` file in the `--appdir` directory. +- `--upgrade-database` argument to upgrade the database schema to the latest version. By default, it is set to `False`. 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. diff --git a/python/packages/autogen-studio/README.md b/python/packages/autogen-studio/README.md index aa4c6e36afcf..c14aaca33b95 100644 --- a/python/packages/autogen-studio/README.md +++ b/python/packages/autogen-studio/README.md @@ -31,45 +31,47 @@ Project Structure: 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. -### Install from PyPi +### Install from PyPi (Recommended) - 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: +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 - ``` +```bash +pip install -U autogenstudio +``` ### Install from Source - _Note: This approach requires some familiarity with building interfaces in React._ +_Note: This approach requires some familiarity with building interfaces in React._ - You have two options for installing from source; manually or using a dev container. +You have two options for installing from source: manually or using a dev container. #### A) Install from source manually - 1. Ensure you have Python 3.10+ and Node.js (version above 14.15.0) installed. - 2. Clone the AutoGen Studio repository and install its Python dependencies using `pip install -e .` - 3. Navigate to the `python/packages/autogen-studio/frontend` directory, install the 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. - 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 - ``` - -#### B) Install from Source using dev container - - 1. Clone the AutoGen Studio repository. - 2. In vscode, open to the `python/packages/autogen-studio/` folder. - 3. Open in Container TODO: describe how - 4. Build the UI: - ```bash - cd frontend - yarn build - ``` +1. Ensure you have Python 3.10+ and Node.js (version above 14.15.0) installed. +2. Clone the AutoGen Studio repository and install its Python dependencies using `pip install -e .` +3. Navigate to the `python/packages/autogen-studio/frontend` directory, install the dependencies, and build the UI: + + ```bash + npm install -g gatsby-cli + npm install --global yarn + cd frontend + yarn install + yarn build + # Windows users may need alternative commands to build the frontend: + 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 + ``` + +#### B) Install from Source using a dev container + +1. Clone the AutoGen Studio repository. +2. In vscode, open to the `python/packages/autogen-studio/` folder. +3. Open in Container TODO: describe how +4. Build the UI: + + ```bash + cd frontend + yarn build + ``` ### Running the Application @@ -79,12 +81,12 @@ Once installed, run the web UI by entering the following in your terminal: 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. +This command will start the application on the specified port. Open your web browser and go to to use AutoGen Studio. AutoGen Studio also takes several parameters to customize the application: - `--host ` argument to specify the host address. By default, it is set to `localhost`. Y -- `--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. +- `--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 `.autogenstudio` directory in the user's home directory. - `--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 URIL defaults to a `database.sqlite` file in the `--appdir` directory. @@ -92,7 +94,7 @@ 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. -#### Local front end development server +#### Local frontend development server See `./frontend/README.md` diff --git a/python/packages/autogen-studio/frontend/README.md b/python/packages/autogen-studio/frontend/README.md index 20e9092442b0..ee8b9fc00367 100644 --- a/python/packages/autogen-studio/frontend/README.md +++ b/python/packages/autogen-studio/frontend/README.md @@ -1,8 +1,8 @@ -# AutoGen Studio front end +# AutoGen Studio frontend ## 🚀 Running UI in Dev Mode -Run the UI in dev mode (make changes and see them reflected in the browser with hotreloading): +Run the UI in dev mode (make changes and see them reflected in the browser with hot reloading): ```bash yarn install @@ -24,9 +24,9 @@ The core of the app can be found in the `src` folder. To add pages, add a new fo Core logic for each component should be written in the `src/components` folder and then imported in pages as needed. -## connecting to front end +## Connecting to backend -the front end makes request to the backend api and expects it at /api on localhost port 8081 +The frontend makes requests to the backend api and expects it at /api on localhost port 8081. ## setting env variables for the UI From af9b8d4f190442c89f738d4620c05d0affff9ad0 Mon Sep 17 00:00:00 2001 From: Johan Forngren Date: Tue, 14 Jan 2025 12:14:13 +0100 Subject: [PATCH 6/8] Fixing typos. Restructuring text to avoid consecutive markdown quote blocks separated only by a blank line to avoid MD028 - Blank line inside blockquote. Signed-off-by: Johan Forngren --- .../autogenstudio-user-guide/installation.md | 4 ++-- python/packages/autogen-studio/README.md | 16 ++++++---------- 2 files changed, 8 insertions(+), 12 deletions(-) diff --git a/python/packages/autogen-core/docs/src/user-guide/autogenstudio-user-guide/installation.md b/python/packages/autogen-core/docs/src/user-guide/autogenstudio-user-guide/installation.md index 6bd5fec9f4bc..3b154302131b 100644 --- a/python/packages/autogen-core/docs/src/user-guide/autogenstudio-user-guide/installation.md +++ b/python/packages/autogen-core/docs/src/user-guide/autogenstudio-user-guide/installation.md @@ -111,11 +111,11 @@ This command will start the application on the specified port. Open your web bro AutoGen Studio also takes several parameters to customize the application: -- `--host ` argument to specify the host address. By default, it is set to `localhost`. Y +- `--host ` argument to specify the host address. By default, it is set to `localhost`. - `--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 `.autogenstudio` directory in the user's home directory. - `--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 URIL defaults to a `database.sqlite` file in the `--appdir` directory. +- `--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 URL defaults to a `database.sqlite` file in the `--appdir` directory. - `--upgrade-database` argument to upgrade the database schema to the latest version. By default, it is set to `False`. 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. diff --git a/python/packages/autogen-studio/README.md b/python/packages/autogen-studio/README.md index c14aaca33b95..628666df65b6 100644 --- a/python/packages/autogen-studio/README.md +++ b/python/packages/autogen-studio/README.md @@ -9,18 +9,14 @@ AutoGen Studio is an AutoGen-powered AI app (user interface) to help you rapidly Code for AutoGen Studio is on GitHub at [microsoft/autogen](https://github.com/microsoft/autogen/tree/main/python/packages/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. -> > [!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. Please see the AutoGen Studio [docs](https://microsoft.github.io/autogen/docs/autogen-studio/getting-started) page for the most up-to-date information. +> AutoGen Studio is under active development and is currently not meant to be a production-ready app. Expect breaking changes in upcoming releases. [Documentation](https://microsoft.github.io/autogen/docs/autogen-studio/getting-started) and the `README.md` might be outdated. ## Updates -> Nov 14: AutoGen Studio is being rewritten to use the updated AutoGen 0.4.0 api AgentChat api. - -> 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. +- **2024-11-14:** AutoGen Studio is being rewritten to use the updated AutoGen 0.4.0 api AgentChat api. +- **2024-04-17:** 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. +- **2024-03-12:** Default directory for AutoGen Studio is now /home/\/.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. Project Structure: @@ -85,11 +81,11 @@ This command will start the application on the specified port. Open your web bro AutoGen Studio also takes several parameters to customize the application: -- `--host ` argument to specify the host address. By default, it is set to `localhost`. Y +- `--host ` argument to specify the host address. By default, it is set to `localhost`. - `--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 `.autogenstudio` directory in the user's home directory. - `--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 URIL defaults to a `database.sqlite` file in the `--appdir` directory. +- `--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 URL defaults to a `database.sqlite` file in the `--appdir` directory. - `--upgrade-database` argument to upgrade the database schema to the latest version. By default, it is set to `False`. 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. From 417431b49606d6d47f56981358899cbbda23f64e Mon Sep 17 00:00:00 2001 From: Johan Forngren Date: Tue, 14 Jan 2025 12:22:18 +0100 Subject: [PATCH 7/8] Include dev containers tutorial Signed-off-by: Johan Forngren --- .../user-guide/autogenstudio-user-guide/installation.md | 9 +++++---- python/packages/autogen-studio/README.md | 9 +++++---- 2 files changed, 10 insertions(+), 8 deletions(-) diff --git a/python/packages/autogen-core/docs/src/user-guide/autogenstudio-user-guide/installation.md b/python/packages/autogen-core/docs/src/user-guide/autogenstudio-user-guide/installation.md index 3b154302131b..bf0917628381 100644 --- a/python/packages/autogen-core/docs/src/user-guide/autogenstudio-user-guide/installation.md +++ b/python/packages/autogen-core/docs/src/user-guide/autogenstudio-user-guide/installation.md @@ -89,10 +89,11 @@ You have two options for installing from source: manually or using a dev contain ### B) Install from Source using a dev container -1. Clone the AutoGen Studio repository. -2. In vscode, open to the `python/packages/autogen-studio/` folder. -3. Open in Container TODO: describe how -4. Build the UI: +1. Follow the [Dev Containers tutorial](https://code.visualstudio.com/docs/devcontainers/tutorial) to install Visual Studio Code, Docker and relevant extensions. +2. Clone the AutoGen Studio repository. +3. In Visual Studio Code, open to the `python/packages/autogen-studio/` folder. +4. Open in Container TODO: describe how +5. Build the UI: ```bash cd frontend diff --git a/python/packages/autogen-studio/README.md b/python/packages/autogen-studio/README.md index 628666df65b6..22beb8f46bb4 100644 --- a/python/packages/autogen-studio/README.md +++ b/python/packages/autogen-studio/README.md @@ -59,10 +59,11 @@ You have two options for installing from source: manually or using a dev contain #### B) Install from Source using a dev container -1. Clone the AutoGen Studio repository. -2. In vscode, open to the `python/packages/autogen-studio/` folder. -3. Open in Container TODO: describe how -4. Build the UI: +1. Follow the [Dev Containers tutorial](https://code.visualstudio.com/docs/devcontainers/tutorial) to install Visual Studio Code, Docker and relevant extensions. +2. Clone the AutoGen Studio repository. +3. In Visual Studio Code, open to the `python/packages/autogen-studio/` folder. +4. Open in Container TODO: describe how +5. Build the UI: ```bash cd frontend From 25d2957b5b8ce98368da916dac8a1c1af2f97aeb Mon Sep 17 00:00:00 2001 From: Johan Forngren Date: Tue, 14 Jan 2025 13:03:47 +0100 Subject: [PATCH 8/8] Update dev container installation instructions Signed-off-by: Johan Forngren --- .../autogenstudio-user-guide/installation.md | 11 +++++------ python/packages/autogen-studio/README.md | 11 +++++------ 2 files changed, 10 insertions(+), 12 deletions(-) diff --git a/python/packages/autogen-core/docs/src/user-guide/autogenstudio-user-guide/installation.md b/python/packages/autogen-core/docs/src/user-guide/autogenstudio-user-guide/installation.md index bf0917628381..0dd73c3cc0af 100644 --- a/python/packages/autogen-core/docs/src/user-guide/autogenstudio-user-guide/installation.md +++ b/python/packages/autogen-core/docs/src/user-guide/autogenstudio-user-guide/installation.md @@ -65,7 +65,7 @@ You can install AutoGen Studio using pip, the Python package manager. pip install -U autogenstudio ``` -## Install from Source +## Install from source _Note: This approach requires some familiarity with building interfaces in React._ @@ -87,13 +87,12 @@ You have two options for installing from source: manually or using a dev contain 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 ``` -### B) Install from Source using a dev container +### B) Install from source using a dev container -1. Follow the [Dev Containers tutorial](https://code.visualstudio.com/docs/devcontainers/tutorial) to install Visual Studio Code, Docker and relevant extensions. +1. Follow the [Dev Containers tutorial](https://code.visualstudio.com/docs/devcontainers/tutorial) to install VS Code, Docker and relevant extensions. 2. Clone the AutoGen Studio repository. -3. In Visual Studio Code, open to the `python/packages/autogen-studio/` folder. -4. Open in Container TODO: describe how -5. Build the UI: +3. Open `python/packages/autogen-studio/`in VS Code. Click the blue button in bottom the corner or press F1 and select _"Dev Containers: Reopen in Container"_. +4. Build the UI: ```bash cd frontend diff --git a/python/packages/autogen-studio/README.md b/python/packages/autogen-studio/README.md index 22beb8f46bb4..9bb9884a019e 100644 --- a/python/packages/autogen-studio/README.md +++ b/python/packages/autogen-studio/README.md @@ -35,7 +35,7 @@ We recommend using a virtual environment (e.g., conda) to avoid conflicts with e pip install -U autogenstudio ``` -### Install from Source +### Install from source _Note: This approach requires some familiarity with building interfaces in React._ @@ -57,13 +57,12 @@ You have two options for installing from source: manually or using a dev contain 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 ``` -#### B) Install from Source using a dev container +#### B) Install from source using a dev container -1. Follow the [Dev Containers tutorial](https://code.visualstudio.com/docs/devcontainers/tutorial) to install Visual Studio Code, Docker and relevant extensions. +1. Follow the [Dev Containers tutorial](https://code.visualstudio.com/docs/devcontainers/tutorial) to install VS Code, Docker and relevant extensions. 2. Clone the AutoGen Studio repository. -3. In Visual Studio Code, open to the `python/packages/autogen-studio/` folder. -4. Open in Container TODO: describe how -5. Build the UI: +3. Open `python/packages/autogen-studio/`in VS Code. Click the blue button in bottom the corner or press F1 and select _"Dev Containers: Reopen in Container"_. +4. Build the UI: ```bash cd frontend