Build a team onboarding flow

Guide a new team through setup with a checklist, invitation review and connected-app controls.

Onboarding checklist

Track workspace setup tasks and unlock the final launch action when requirements are complete.

Setup progress: 1 of 3

Prepare your workspace

Confirm organization profileCreate the first projectInvite your teammates

Ready for your first release

Complete the three setup tasks to open the workspace for your team.

Interactive example with illustrative data. Your application supplies the connected services.

Components in this recipe

2877Onboarding checklistBlocksTrack workspace setup tasks and unlock the final launch action when requirements are complete.

2870Invitation review panelCardsReview an invitation, choose the assigned role, and accept or decline with a recorded outcome.

2854Connected apps managerBlocksInspect application scopes and connect or disconnect sample workspace integrations.

Build it yourself

Model completion as saved task IDs. Render the onboarding checklist from that state so returning users resume their progress.
Add invitation review before submitting invitations. Validate addresses and roles on the server and show per-invitation results.
Offer connected apps after the required account steps. Use your provider's authorization flow and return a clear connection status.

Build with your agent

A ready-to-use task for your connected coding agent.

Build a team onboarding flow

Use the Fieldbook MCP tools search_components and get_component. Select the framework already used by this project. Inspect access requirements and the returned props before editing.

Components: onboarding-checklist, invitation-review-panel, connected-apps-manager.

Model completion as saved task IDs. Render the onboarding checklist from that state so returning users resume their progress.

Add invitation review before submitting invitations. Validate addresses and roles on the server and show per-invitation results.

Offer connected apps after the required account steps. Use your provider's authorization flow and return a clear connection status.

Checklist completion is a UI state, not authorization. Your server sends invitations, stores progress and owns OAuth credentials; never place secrets in component props.

Test returning users, duplicate invitations, denied connections and partial failures. Optional steps must remain skippable and all actions keyboard accessible.

Preserve the project's styling conventions. Replace illustrative data with application inputs, add meaningful checks, and report integration work that remains.

Members only

Set up MCP Included with Pro

Connect your application

Checklist completion is a UI state, not authorization. Your server sends invitations, stores progress and owns OAuth credentials; never place secrets in component props.

Verify the result

Test returning users, duplicate invitations, denied connections and partial failures. Optional steps must remain skippable and all actions keyboard accessible.