Custom Auto-Onboarding Demo

AI-powered, zero-config onboarding flow built with Next.js, Browserbase and Tailwind CSS v4.
Drop a company URL ➜ we scrape the site, extract the logo/banner/title, and spin up a branded dashboard in seconds.

Notes

This demo is using Zustand to manage state. In a production environment, you would likely be saving this information to a database somewhere.

🚀 Quick Start

1. Clone & install

pnpm install # or npm i / yarn

2. Environment

Create a .env file in the project root:

# Browserbase / Stagehand
BROWSERBASE_API_KEY="your-api-key"
BROWSERBASE_PROJECT_ID="your-project-id"

3. Run dev server

pnpm dev            # http://localhost:3000

Scripts: pnpm build, pnpm start, pnpm lint.

🔌 API

POST /api/extract-company-info

{
  "url": "https://example.com"
}

Returns (validated with zod):

{
  "title": "Example Inc.",
  "faviconUrl": "https://example.com/favicon.ico",
  "bannerUrl": "https://example.com/og.png"
}

🛠 Tech Stack

• Next.js 15 · React 19 · TypeScript 5
• Stagehand 2.4 (Browserbase)
• Zustand for client state
• zod for runtime validation
• Tailwind CSS 4 + Radix primitives + Lucide icons

⚙️ Security & Best Practices

• Secrets are never sent to the client – Browserbase credentials live in server env.
• All external input is validated with zod.
• No SQL/db layer here, but in real apps use parameterised queries / ORM.
• Safe headers / CSP should be enabled at the platform (Vercel) level.

📄 License

MIT

Credit

Demo inspired by Resend onboarding.