mirror of
https://github.com/microsoft/autogen.git
synced 2025-08-10 09:42:18 +00:00
26b7aff2dc
* add new autogen-studio renamed folder * remove old autogen-assistant files * formatting updates * add support for upsert/updates to agents and workflows * version bump, general fixes * support deleting db items * add support for summary method to flowmanager * formatting updates * update serverl urls * version bump * add support for updated metadata messages object to include sender information * formatting updates * update documentation and blog post * blog post update * add description field example to agent workflow spec * readme and blog update * Update website/blog/2023-12-01-AutoGenStudio/index.mdx Co-authored-by: Chi Wang <wang.chi@microsoft.com> * add fix to ensure working directory is cleared after each run * update version * minor updates * formatting updates --------- Co-authored-by: Chi Wang <wang.chi@microsoft.com>
31 lines
1.6 KiB
Markdown
31 lines
1.6 KiB
Markdown
## 🚀 Running UI in Dev Mode
|
|
|
|
Run the UI in dev mode (make changes and see them reflected in the browser with hotreloading):
|
|
|
|
- npm install
|
|
- npm run start
|
|
|
|
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.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 front end
|
|
|
|
the front end makes request 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
|