Guide
From scope to social card
One intake conversation becomes a structured brief, which seeds your OG (and thumbnail) workspace — without AtroUI hosting the AI. Own the UI. Borrow the API. Bring your own keys.
The path
- Scope Chat (+ optional
@atroui/api-scope) — describe the project; draft an OG card from the last message. - Project Planner — confirm type, features, budget; Preview social card opens OG with the estimate prefilled.
- OG Workspace / Thumbnail — Quick mode accepts
?mode=quick&title=&subtitle=. Preview without keys; AI needs your Host API env.
Shared brief
Install the type + helpers into your repo:
bash
npx shadcn@latest add @atroui/project-briefts
import {
type ProjectBrief,
buildOgHref,
briefFromScopeMessage,
} from "@/lib/project-brief"
const brief: ProjectBrief = {
name: "LaunchKit",
oneLiner: "Scope to social card in one loop",
audience: "indie founders",
pages: ["home", "pricing"],
tone: "direct",
constraints: ["7-day sprint"],
ogTitle: "Ship the social card",
ogSubtitle: "Scope → planner → OG",
}
// Prefill the OG workspace (docs host: /og)
window.location.href = buildOgHref(brief)Package export: import { buildOgHref } from "atroui" when you already depend on the npm package for Host APIs.
Try it
Live brief
Edit fields, then open the OG workspace with Quick-mode prefills. No keys required for preview.
/og?mode=quick&title=Ship+the+social+card&subtitle=Scope+%E2%86%92+planner+%E2%86%92+OG#og-workspaceOpen OG workspaceInstall checklist
bash
# Brief helpers (always)
npx shadcn@latest add @atroui/project-brief
# Scope (UI + optional Host API)
npx shadcn@latest add @atroui/scope-chat
npx shadcn@latest add @atroui/api-scope
# Planner
npx shadcn@latest add @atroui/project-planner
# Social cards (UI + Host APIs when you want AI)
npx shadcn@latest add @atroui/og-workspace
npx shadcn@latest add @atroui/api-generate
# optional:
npx shadcn@latest add @atroui/thumbnail-workspace
npx shadcn@latest add @atroui/api-thumbnailForms / AI Host APIs need npm i atroui + transpilePackages. See Host APIs.