Skip to content
Candor UI
Start free

Screens / The app around the agent

Sign-in and first run

Get a person signed in, into the right account and through the setup that comes before the first useful answer.

For: Anyone opening the product for the first time, and anyone whose sign-in has run out.

Markdown

3 ways to lay it out

1. Sign-in, then a setup checklist

Pick it when: The default: the person signs in with SSO or a code, lands in the app and sees what's left to do.

A centred sign-in card; after it, the app with a checklist of what's left before the first answer.
  • Sign inProSign in without a password: SSO or a one-time code sent to the person's email.
  • Setup checklistProWhat's left before the first useful answer: connect an environment, let the agents read it, invite the team.
  • Integration connectProA checklist step that connects an outside service, by the provider's sign-in or an API key, with the access it asks for in plain words and a connection test.
  • Terms consentProThe AI disclosure and terms, asked once per terms version.
  • Session expiredProShown when the sign-in ran out while the app was open.
Install sign-in, then a setup checklist

Pro and Premium items need a licence key; free ones install as they are.

2. Create the account, then walk through

Pick it when: A new company signs up: an account has to exist before anyone can use the product.

Account creation, then a walk through the stages with the current one as a focus card.
  • Create accountProCreate the company's account.
  • Step walkerProA guided walk through stages, the current one as a focus card.
  • Consent ceremonyProConsent that names what flows where, how long it's kept and how to take it back.
  • Invite chooserProShown at sign-in when more than one account has invited the person.
Install create the account, then walk through

Pro and Premium items need a licence key; free ones install as they are.

3. A page that says why nothing can be shown yet

Pick it when: The person is signed in but the app can't show anything: no account, removed from one, email not verified, an invite to accept.

A whole-page stop in the middle of an otherwise empty frame, naming the reason and the one next step.
Install a page that says why nothing can be shown yet

Pro and Premium items need a licence key; free ones install as they are.

Rules that matter most here

Already covered elsewhere

Brief for a coding agent

Paste this into the agent that builds the screen. The docs MCP server returns the same text from get_screen.

Build sign-in and first run with Candor UI.
SignIn offers SSO or a one-time code by email, with no password. When more than one account has invited the person, InviteChooser comes next.
TermsConsent asks for the AI disclosure and terms once per terms version. Its box starts unticked.
A signed-in person with nothing to see gets AccountState, which names the reason (no account, removed, email not verified, an invite waiting) and one next step.
SetupChecklist lists what is left before the first useful answer; each item says what it needs. Mark an item done from your records, not from the model.
A step that connects an outside service opens IntegrationConnect: optional access starts unticked, and the step is done when its connection test passes, not when the form is sent.
When the sign-in runs out, show SessionExpiredDialog over the page and keep what the person had open.
For a new company, AccountCreate comes first and StepWalker takes them through the stages.

Start from the "Sign-in, then a setup checklist" layout: A centred sign-in card; after it, the app with a checklist of what's left before the first answer.
Candor items: sign-in (https://candor.themethodic.com/docs/sign-in.md), setup-checklist (https://candor.themethodic.com/docs/setup-checklist.md), integration-connect (https://candor.themethodic.com/docs/integration-connect.md), terms-consent (https://candor.themethodic.com/docs/terms-consent.md), session-expired (https://candor.themethodic.com/docs/session-expired.md).
Install: npx candor-ui add sign-in setup-checklist integration-connect terms-consent session-expired
Read each item's docs before using it and take its props from there; don't guess them. Pro and Premium items need the person's licence key, which they add with `npx candor-ui key <key>`; don't ask for it.