3cf198eea1
This PR adds backend to make Onboarding UI added in https://github.com/Significant-Gravitas/AutoGPT/pull/9485 functional and adds missing confetti screen at the end of Onboarding. *Make sure to have at least any 2 agents in store when testing locally.* Otherwise the onboarding will finish without showing agents. Visit `/onboarding/reset` to reset onboarding state, otherwise it'll always redirect to `/library` once finished. ### Changes 🏗️ - Onboarding opens automatically on sign up and login (if unfinished) for all users - Update db schema to add `UserOnboarding` and add migration - Add GET and PATCH `/onboarding` endpoints and logic to retrieve and update data Onboarding for a user - Update `POST /library/agents` endpoint (`addMarketplaceAgentToLibrary`), so it includes input and output nodes; these are needed to know input schema for the Onboarding - Use new endpoints during onboarding to fetch and update data - Use agents from the marketplace and their input schema for the onboarding - Add algorithm to choose store agents based on user answers and related endpoint `GET /onboarding/agents` - Redirect outside onboarding if finished and resume on proper page - Add `canvas-confetti` and `@types/canvas-confetti` frontend packages - Add and show congrats confetti screen when user runs and agent and before opening library - Minor design updates and onboarding fixes ### Checklist 📋 #### For code changes: - [x] I have clearly listed my changes in the PR description - [x] I have made a test plan - [x] I have tested my changes according to the test plan: - [x] Redirect to `/onboarding/*` on sign up and sign in (if onboarding unfinished) - [x] Onboarding works and can be finished - [x] Agent runs on finish - [x] Onboarding state is saved and logging out or refreshing page restores correct state (user choices) - [x] When onboarding finished, trying to go into `/onboarding` redirects to `/library` --------- Co-authored-by: Nicholas Tindle <nicholas.tindle@agpt.co> Co-authored-by: Reinier van der Leer <pwuts@agpt.co>
This is the frontend for AutoGPT's next generation
Getting Started
Run the following installation once.
npm install
# or
yarn install
# or
pnpm install
# or
bun install
Next, run the development server:
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
Open http://localhost:3000 with your browser to see the result.
You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.
For subsequent runs, you do not have to npm install again. Simply do npm run dev.
If the project is updated via git, you will need to npm install after each update.
This project uses next/font to automatically optimize and load Inter, a custom Google Font.
Deploy
TODO
Storybook
Storybook is a powerful development environment for UI components. It allows you to build UI components in isolation, making it easier to develop, test, and document your components independently from your main application.
Purpose in the Development Process
- Component Development: Develop and test UI components in isolation.
- Visual Testing: Easily spot visual regressions.
- Documentation: Automatically document components and their props.
- Collaboration: Share components with your team or stakeholders for feedback.
How to Use Storybook
-
Start Storybook: Run the following command to start the Storybook development server:
npm run storybookThis will start Storybook on port 6006. Open http://localhost:6006 in your browser to view your component library.
-
Build Storybook: To build a static version of Storybook for deployment, use:
npm run build-storybook -
Running Storybook Tests: Storybook tests can be run using:
npm run test-storybookFor CI environments, use:
npm run test-storybook:ci -
Writing Stories: Create
.stories.tsxfiles alongside your components to define different states and variations of your components.
By integrating Storybook into our development workflow, we can streamline UI development, improve component reusability, and maintain a consistent design system across the project.