stream-builder

The framework-agnostic Stream builder (Steps 0-7 scaffold + enhance + Video audit), being extended to support app kinds beyond web. Use ONLY when the user explicitly names 'stream-builder' or '/stream-builder'. Web React / Next.js work - 'build me a chat app', 'scaffold', 'create a new ...', 'add Ch

By getstream · 646 installs

npx skills add getstream/agent-skills --skill stream-builder

Source repository · Upstream listing

Stream Builder scaffold + enhance Read first (every session): Glob ../stream/SKILL.md . If the path is empty, install with getstream skills stream (no confirmation, just run). Then Read [ ../stream/RULES.md ](../stream/RULES.md) it includes a Peer skills table for installing/invoking any other pack skills on demand. This skill covers three flows : Track A Scaffold a new app: Steps 0 7 below. Use when the cwd is empty / new and the user said "build me a ... app". Track E Enhance an existing app: see [ enhance.md ](enhance.md). Skips scaffold + theme; reuses the same SDK wiring and component blueprints. Track F Audit an existing integration (read only): for "audit/review my video integration", "check my app against best practices", "is my video app production ready?", "what am I missing before launch?". Load the Integration best practices audit section in [ references/VIDEO.md ](references/VIDEO.md) and follow its protocol. Skip onboarding, auth, the CLI, and all build steps this track does not scaffold, install, or run the CLI; it only reads the app and reports findings. Fix issues only if the user then asks. Start Track F (audit) skips this entire section. A read only best practices review runs no onboarding, no auth, no CLI, and none of Steps 0 7 go straight to the Integration best practices audit section in [ references/VIDEO.md ](references/VIDEO.md) and report findings. Only fall into the build flow below if the user asks you to fix what the audit found. Announce the network plan once (Trust readout below), then immediately start executing Steps 0 7 no interactive prompts at the start (the user has authorized the build by asking for it). Trust readout (announce, then continue on the same turn do not wait) Before the first network command, print this verbatim to the user, then proceed straight into Step 0 without stopping for a reply: Scaffolding now. Network calls you'll see: npx shadcn@latest ... (Vercel) scaffold + UI components from npm. npm install <stream packages legacy peer deps Stream SDKs from npm ( stream chat react , @stream io/video react sdk , etc.). getstream env local CLI, no network; writes .env (gitignored by the Next.js scaffold's default; Task B verifies). Interrupt me at any point if something looks wrong. The only step that pauses for explicit consent is the optional third party skill packs in Task A.2. Full per command audit (publisher, why unpinned, what each writes): section Install trust & integrity below. The user's continued silence after the readout is implicit consent for this scaffold; an objection or stop instruction aborts the run. Shadcn/ui is always installed during Step 3. Third party frontend skills ( vercel react best practices , web design guidelines , frontend design ) are installed only with explicit user consent see Task A.2 for the disclosure script. If the user declines, Step 4 proceeds using Stream references only. Precedence (when the skills are present): Stream references win for SDK wiring; frontend skills guide generic React / UI polish. Install trust & integrity The builder runs three classes of network touching commands. Each is listed here so a reviewer can audit before approving. (The getstream CLI itself is installed by the user from getstream.io, not by the builder.) Command Publisher Why unpinned What it writes npx shadcn@latest init ... (Task A) Vercel [ shadcn ui/ui ](https://github.com/shadcn ui/ui) Scaffolder; @latest is the maintainer's documented usage. Pinning ships outdated scaffolds. Project files in cwd. Next.js scaffold's .gitignore ignores .env by default. npx shadcn@latest add ... (Task A.1) Vercel same source as above Same scaffolder; component sync depends on registry parity. Component files under components/ui/ . npm install <stream packages legacy peer deps (Task C) GetStream (npm) for @stream io/ and stream chat react ; transitive deps via standard npm trust Latest published versions of GetStream's own SDKs same trust model as the CLI itself. Modules under node modules/ . Runtime SDKs + transitive deps. npx skills add <github (Task A.2) vercel labs/agent skills and anthropics/skills Optional. Markdown only skill packs; npx skills add is the published install path. Markdown files in the user's skills directory. Gated by explicit user consent in Task A.2 never runs without an affirmative answer. getstream env (Task B) GetStream (local CLI) n/a (local CLI, no network at this step) .env in the project root with STREAM API KEY + STREAM API SECRET . Task B verifies .gitignore covers .env before writing (Next.js scaffold's default already does). The agent never reads .env (RULES.md Secrets). Reviewer checklist: All npx invocations resolve to the publishers listed above; substitute a different publisher and the install fails. npx skills add runs only after the disclosure prompt in Task A.2 and an explicit user "yes." .env is written by the Stream CLI directly, not by the agent, and is not transmitted into the conversation. If the user wants to pin a specific shadcn version, replace @latest with @<version in Tasks A and A.1. Builder Steps Execute phases in order (later steps depend on earlier ones). Do not run independent phases in parallel. Shell discipline (one bash c per phase, no bash ce , browser sign in standalone) lives in the stream skill's [ RULES.md ](../stream/RULES.md) Shell discipline. Step 0: Package manager Always use npm . Never use bun. Step 1: Initialize the project Run getstream init . It authenticates, then lets you select or create the org and app and writes the project credentials follow its prompts and output. If the app uses Feeds , choose a Feeds v3 region when getstream init offers the region list (other regions default to legacy v2). If getstream isn't installed, ask the user to install it from https://getstream.io and wait never fetch or run an install script. Browser sign in must be its own invocation (RULES.md Shell discipline). Step 2: Theme pick Ask the user which Shadcn theme they'd like before scaffolding : Quick theme pick: I can use a random shadcn theme, or you can design your own at [ui.shadcn.com/create](https://ui.shadcn.com/create) and share the preset value (e.g. preset b1Gdi7z7r ). Want a random one or do you have a preset? STOP here and wait for the user's answer. Do not continue with scaffolding or any other steps until the user responds. Asking a question and continuing to work in parallel is confusing the user misses the question as output scrolls past. User provides a preset store it for Task A scaffold command. User says random / doesn't care / wants to move on pick a random preset from nova , vega , maia , lyra , mira , luma . Step 3: Scaffold + .env + SDKs + Configure SEQUENTIALLY Scaffold order Order: 1. Step 1: getstream init (auth + org/app + credentials). 2. Step 2: Theme pick (wait for answer). 3. Task A: Scaffold with Shadcn + Next.js using the chosen preset. 4. Task A.1: Add base Shadcn components. 5. Task A.2: Disclose + ask about third party frontend skill installs; install only with user consent. 6. Continue with Task B (.env), Task C (SDKs), Task D (CLI config). Task A: Scaffold scaffolds Next.js + Tailwind + Shadcn/ui (Base UI) into the current directory. Use the theme preset chosen in Step 2 . The scaffold command creates a new directory, so we scaffold into a temporary .scaffold subdirectory and move everything up. The n .scaffold flag also lands in the generated package.json as "name": ".scaffold" , which npm/pnpm/yarn reject (a package name can't start with . ), so the final step rewrites name to a valid slug derived from the project directory: Task A.1: Add base Shadcn components: Add more components as the use case requires (e.g. dialog , dropdown menu , tabs , popover ). Task A.2: Frontend skills third party skill packs. You must disclose and ask before installing. Do NOT construct your own command variant. Print this disclosure verbatim, then stop and wait for the user's answer: I'd like to install three third party skill packs that improve generic UI quality: vercel react best practices from [ vercel labs/agent skills ](https://github.com/vercel labs/agent skills) web design guidelines from [ vercel labs/agent skills ](https://github.com/vercel labs/agent skills) frontend design from [ anthropics/skills ](https://github.com/anthropics/skills) The packs are markdown only no scripts execute. If you say yes, I'll run npx skills add ... y once per pack from those GitHub repos at their current main branch ( y skips the installer's own confirmation since you've consented here). These aren't required Stream reference files cover SDK wiring either way. Install them? User agrees run: User declines skip silently and continue to Task B. Do not retry, do not bring it up again this session. Install fails continue with Stream reference files only; mention the failure briefly. Do not modify layout.tsx or globals.css after scaffold use Shadcn's defaults as is (RULES.md Theme). Task B: .env run AFTER scaffold so the .env lands inside the project directory. First, verify .env is gitignored (the stream skill's [ RULES.md ](../stream/RULES.md) Secrets). The Next.js scaffold's default already includes it; this is a safety net for projects whose .gitignore was hand edited or doesn't yet exist: Then write secrets: getstream env detects the Next.js project and writes NEXT PUBLIC STREAM API KEY + STREAM API SECRET to .env.local . The secret is server side only used by /api/token to mint tokens, never in the client bundle. The public API key may be read client side from NEXT PUBLIC STREAM API KEY or returned via /api/token . The agent never reads .env.local (RULES.md Secrets). Task C: Install Stream SDKs + verify icons Only what the use case needs: After installing SDKs, verify an icon package is available. Some Shadcn presets bundle one, others don't: If NO ICONS , install lucide react : npm install lucide react legacy peer deps . If an icon package is already present, use that one throughout the app do not install a second. Task D: Configure Stream run the CLI commands from the relevant references/<Product .md (App Integration Setup) for each product the use case needs. Step 4: Generate code and UI Load [ builder ui.md ](builder ui.md) and only the relevant [ references/<Product .md ](references/) header + references/<Product blueprints.md for the sections you are implementing not every reference file. For multi product apps (Chat + Video, Chat + Feeds, Video + Feeds, etc.), also load [ references/CROSS PRODUCT.md ](references/CROSS PRODUCT.md) before writing AppShell it has the canonical multi client provider hierarchy and an error cause fix table. If a use case recipe matched (see Use case recipes), load that recipe and its load with references and follow it as the build plan instead of inferring the product set yourself. Step 5: Verify Type check first (reports ALL errors at once, ~3s): Fix all type errors. Then run the full build: Fix any remaining errors. Do NOT skip tsc noEmit it catches every type error in one pass, while next build stops at the first error per file and requires multiple rebuild cycles. Step 6: Start dev server Pick a random 5 digit port (10000 65535). Run the server using run in background : Important: The dev server is a long running process. When run in the background it will eventually emit a "completed" notification this does not m