Skip to content

Commit

Permalink
Enhance devcontainer setup with post-create script for dependency ins…
Browse files Browse the repository at this point in the history 
…tallation 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 <[email protected]>
  • Loading branch information
@JohanForngren
JohanForngren committed Jan 13, 2025
1 parent 596663f commit a6f0f2f
Show file tree
Hide file tree
Showing 4 changed files with 82 additions and 96 deletions.
29 changes: 14 additions & 15 deletions python/packages/autogen-studio/.devcontainer/devcontainer.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
}
}
21 changes: 21 additions & 0 deletions python/packages/autogen-studio/.devcontainer/post-create-command.sh
View file
Original file line number Diff line number Diff line change
@@ -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
113 changes: 37 additions & 76 deletions python/packages/autogen-studio/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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/<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.
> 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

Expand All @@ -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
Expand Down
15 changes: 10 additions & 5 deletions python/packages/autogen-studio/frontend/README.md
View file
Original file line number Diff line number Diff line change
@@ -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 - <https://www.gatsbyjs.com/docs/quick-start/>.
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 - <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.

## Modifying the UI, Adding Pages

Expand Down

0 comments on commit a6f0f2f

Please sign in to comment.