mirror of
https://github.com/microsoft/autogen.git
synced 2025-07-24 09:20:52 +00:00
7e01350d46
<!-- Thank you for your contribution! Please review
https://microsoft.github.io/autogen/docs/Contribute before opening a
pull request. -->
<!-- Please add a reviewer to the assignee section when you create a PR.
If you don't have the access to it, we will shortly find a reviewer and
assign them to your PR. -->
## Why are these changes needed?
<!-- Please give a short summary of the change and the problem this
solves. -->
(I'm not familiar with English, so I use Goggle translation a lot. So
please forgive me if I say something rude.)
I started autogen-studio and opened the page in the browser, nothing was
rendered.
I checked using the Developer tool, the following error appeared:
```
TypeError: Cannot read properties of null (reading 'label')
at editor.tsx:114:42
```
I check the implementation, it looks like `team.component` is `null`,
which seems to be caused during initialization process when the team is
not registered.
[source](78ff883d24/python/packages/autogen-studio/frontend/src/components/views/playground/manager.tsx (L199))
So I fixed the issue where the gallery wasn't being retrieved which was
causing the issue.
### Reproduce bug
1. clone this repository
2. open devcontainer(`python/packages/autogen-studio`)
3. Running the application
```sh
cd frontend
yarn build
cd -
OPENAI_API_KEY="" autogenstudio ui --port 8081
```
4. Open `localhost:8081` in browser.
## Related issue number
<!-- For example: "Closes #1234" -->
Probably not found. (sorry if I had to raise an issue before PR)
## Checks
- [x] I've included any doc changes needed for
<https://microsoft.github.io/autogen/>. See
<https://github.com/microsoft/autogen/blob/main/CONTRIBUTING.md> to
build and test documentation locally.
- [-] I've added tests (if relevant) corresponding to the changes
introduced in this PR.
- [x] I've made sure all auto checks have passed.
Co-authored-by: Victor Dibia <victordibia@microsoft.com>
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):
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.
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.jsandgatsby-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_URLwhich should be set tohttp://localhost:8081/apifor local development. This tells the UI where to make requests to the backend.
- The main variable here is