mirror of
https://github.com/microsoft/autogen.git
synced 2025-07-12 11:30:41 +00:00
8efe0c45b0
* Add tiktoken as a dependency in pyproject.toml Signed-off-by: Johan Forngren <johan.forngren@decerno.se> Update uv.lock with tiktoken dependency from fbfdc9f652384b70f7461c90ada13f87e83677e0 Signed-off-by: Johan Forngren <johan.forngren@decerno.se> * Updating autogen-ext dependencies per https://github.com/microsoft/autogen/pull/5008#issuecomment-2585383877 Signed-off-by: Johan Forngren <johan.forngren@decerno.se> * PoC dev container Signed-off-by: Johan Forngren <johan.forngren@decerno.se> * 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 <johan.forngren@decerno.se> * 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 <johan.forngren@decerno.se> * 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 <johan.forngren@decerno.se> * Include dev containers tutorial Signed-off-by: Johan Forngren <johan.forngren@decerno.se> * Update dev container installation instructions Signed-off-by: Johan Forngren <johan.forngren@decerno.se> --------- Signed-off-by: Johan Forngren <johan.forngren@decerno.se> Co-authored-by: Victor Dibia <victordibia@microsoft.com>
37 lines
1.9 KiB
Markdown
37 lines
1.9 KiB
Markdown
# AutoGen Studio frontend
|
|
|
|
## 🚀 Running UI in Dev Mode
|
|
|
|
Run the UI in dev mode (make changes and see them reflected in the browser with hot reloading):
|
|
|
|
```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](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/>.
|
|
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.
|
|
|
|
## Modifying the UI, Adding Pages
|
|
|
|
The core of the app can be found in the `src` folder. To add pages, add a new folder in `src/pages` and add a `index.js` file. This will be the entry point for the page. For example to add a route in the app like `/about`, add a folder `about` in `src/pages` and add a `index.tsx` file. You can follow the content style in `src/pages/index.tsx` to add content to the page.
|
|
|
|
Core logic for each component should be written in the `src/components` folder and then imported in pages as needed.
|
|
|
|
## Connecting to backend
|
|
|
|
The frontend makes requests to the backend api and expects it at /api on localhost port 8081.
|
|
|
|
## setting env variables for the UI
|
|
|
|
- please look at `.env.default`
|
|
- make a copy of this file and name it `.env.development`
|
|
- set the values for the variables in this file
|
|
- The main variable here is `GATSBY_API_URL` which should be set to `http://localhost:8081/api` for local development. This tells the UI where to make requests to the backend.
|