mirror of
https://github.com/microsoft/autogen.git
synced 2025-07-31 04:42:09 +00:00
fe1feb3906
<!-- 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? https://github.com/user-attachments/assets/b649053b-c377-40c7-aa51-ee64af766fc2 <img width="100%" alt="image" src="https://github.com/user-attachments/assets/03ba1df5-c9a2-4734-b6a2-0eb97ec0b0e0" /> ## Authentication This PR implements an experimental authentication feature to enable personalized experiences (multiple users). Currently, only GitHub authentication is supported. You can extend the base authentication class to add support for other authentication methods. By default authenticatio is disabled and only enabled when you pass in the `--auth-config` argument when running the application. ### Enable GitHub Authentication To enable GitHub authentication, create a `auth.yaml` file in your app directory: ```yaml type: github jwt_secret: "your-secret-key" token_expiry_minutes: 60 github: client_id: "your-github-client-id" client_secret: "your-github-client-secret" callback_url: "http://localhost:8081/api/auth/callback" scopes: ["user:email"] ``` Please see the documentation on [GitHub OAuth](https://docs.github.com/en/apps/oauth-apps/building-oauth-apps/authenticating-to-the-rest-api-with-an-oauth-app) for more details on obtaining the `client_id` and `client_secret`. To pass in this configuration you can use the `--auth-config` argument when running the application: ```bash autogenstudio ui --auth-config /path/to/auth.yaml ``` Or set the environment variable: ```bash export AUTOGENSTUDIO_AUTH_CONFIG="/path/to/auth.yaml" ``` ```{note} - Authentication is currently experimental and may change in future releases - User data is stored in your configured database - When enabled, all API endpoints require authentication except for the authentication endpoints - WebSocket connections require the token to be passed as a query parameter (`?token=your-jwt-token`) ``` ## Related issue number <!-- For example: "Closes #1234" --> Closes #4350 ## Checks - [ ] 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. - [ ] I've made sure all auto checks have passed. --------- Co-authored-by: Copilot Autofix powered by AI <62310815+github-advanced-security[bot]@users.noreply.github.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