Onboarding Card
Shells used by every chat-driven onboarding step. The shells lock typography, surface tiers, and footer alignment so the cards don't drift visually. Card-specific behavior (data fetching, sentinels, mutations) stays in the apps/web wrappers — these are presentation only.
Basic shell
OnbCard + OnbCardHeader + arbitrary body + OnbCardFooter with a single primary CTA.
Competitors
Acme's competitive radar
These brands become the benchmark Adside watches — their live ads, the conversations on Reddit / X / G2, and the hooks worth borrowing.
Confirmed state
OnbCardConfirmed replaces the CTA once the user locks the step in. Default label is 'Confirmed' — override with the label prop for step-specific copy ('Got it', 'Skipped', '3 invites sent').
Brand kit
Acme, decoded.
We pulled this from acme.com. Click Looks good to keep going.
@ shortcut
Scope the chat to anything
Type @ in the input below to reference a campaign, ad set, ad, asset, or competitor.
Between-aligned footer
align='between' puts status text on the left and the CTA on the right. Used by the brand-kit card to surface 'extraction is taking longer than usual' alongside a Continue anyway button.
Brand kit
Decoding Acme…
Reading the site, sampling colors, listening for tone.
Compact tip card (no border on header)
The @/slash shortcut tour cards put their icon next to the title rather than on top, and omit the bottom border between header and content. Pass noBorder on OnbCardHeader to skip the divider.
@ shortcut
Scope the chat to anything
Type @ in the input below to reference a campaign, ad set, ad, asset, or competitor.
Capability announcement (no footer)
Awareness-only cards rendered at the very end of the chat onboarding tour ('what you can connect next' — e.g. the customer MCP, later the Slack agent). Icon-on-top, mono eyebrow, display title, body line, and no footer/CTA — the push-to-connect lives in the sidebar install nudges, not on the card.
What's next
Connect Claude or ChatGPT to Adside
You can now use Adside straight from your AI assistant. Connect Claude or ChatGPT over MCP to ask about your clients' campaigns, pull reports, and launch work without leaving the chat.