An AI-powered social media agent that creates brand-aware posts for LinkedIn and Instagram through an interactive chat interface with live visual previews.
BrandChat Studio helps teams create on-brand social posts faster without losing voice or visual consistency. Social teams often struggle to keep a steady posting cadence, adapt content for different platforms, and preserve brand tone across campaigns. BrandChat Studio turns a simple intent and brand signal (company URL or brief) into ready-to-post drafts and visuals inside a chat-first workflow. It infers brand voice and design cues once, caches the profile to control costs, then generates platform-specific copy and preview mockups. Users can iterate by describing edits in plain language or by editing directly on the mockup -- every change triggers an AI re-evaluation with updated quality scores. The result is a junior-manager-like assistant that scales post creation while keeping humans in the loop.
- Brand Inference: Provide a company URL and the AI extracts voice, tone, CTA style, color palette, and platform guidance via Firecrawl web scraping. Profiles are cached for reuse.
- Platform-Aware Generation: One request produces simultaneous Instagram (square, punchy) and LinkedIn (landscape, professional) post mockups with AI-generated branded backgrounds and tailored copy.
- Quality Scoring: Each post is scored (0-10) on Brand Fit, Clarity, CTA Effectiveness, and Readability -- transparent, measurable quality feedback.
- Chat-Driven Iteration: Refine posts in natural language ("make the CTA more urgent," "add a Super Bowl reference"). New versions appear with visible score improvements.
- Inline Editing + Live Re-Scoring: Click directly on any text element (headline, CTA, caption, hashtags) to edit. The AI re-scores and adjusts related fields in real time.
| Technology | Role |
|---|---|
| Next.js 15 (App Router) | Framework, SSR |
| React 19 + TypeScript | UI, type safety |
| Tambo AI SDK | Generative UI, tool registration, chat thread management |
| Firecrawl API | Structured web scraping for brand inference |
| OpenAI (gpt-image-1.5) | Platform-sized branded background image generation |
| OpenAI (gpt-5.2) | Structured quality scoring and field adjustment |
| Tailwind CSS v4 | Styling, responsive design |
| Zod | End-to-end schema validation |
- Install dependencies:
npm install
- Configure environment: Copy
example.env.localto.env.local, then set: - Run the dev server:
Open http://localhost:3000
npm run dev
- Infer a brand: Ask the assistant to analyze a company URL (e.g., "Infer the brand profile for Hack Nation from hack-nation.ai").
- Generate posts: Request a post for one or both platforms (e.g., "Generate a post announcing Hack Nation 2026 for Instagram and LinkedIn with a Super Bowl angle").
- Iterate via chat: Describe changes in natural language (e.g., "Make the CTA more urgent -- add deadline Feb 28th").
- Edit inline: Click any text on the mockup to edit directly. The AI re-scores automatically.
User Input --> Tambo AI Agent --> Tool Calls --> Service Layer --> API Routes --> External APIs
|
Generative UI Component <-- Props Update <-- Tool Response
- Brand inference (
inferBrandProfile) -- Firecrawl scrapes the target URL in three modes (branding/CSS colors, structured JSON for voice/tone, links for page discovery). Merges data from multiple sources into a single brand profile. - Post generation (
generateBrandedPost) -- Loads the cached brand profile, builds platform-specific prompts, generates images in parallel via OpenAI, returns structured post data. - Generative UI -- Tambo renders
BrandProfileCardorPostPreviewCarddirectly in the chat thread as interactive React components. - Re-scoring (
rescoreBrandedPost) -- Inline edits trigger a dedicated AI endpoint that evaluates brand fit, clarity, CTA effectiveness, and readability, then adjusts related fields.
| File | Purpose |
|---|---|
src/lib/tambo.ts |
Central config -- registers components + tools for the AI agent |
src/services/brand-profile.ts |
Brand inference, save/load helpers |
src/services/branded-post-generator.ts |
Image prompt building + parallel generation |
src/services/post-rescore.ts |
Re-scoring service for inline edits |
src/app/api/brand-profile/infer/route.ts |
Firecrawl integration + multi-source brand extraction |
src/app/api/generate-image/route.ts |
OpenAI image generation endpoint |
src/app/api/post-rescore/route.ts |
AI-powered quality scoring endpoint |
src/components/tambo/post-preview-card.tsx |
Main post preview with dual mockups + inline editing |
src/components/tambo/brand-profile-card.tsx |
Brand profile display card |
data/brand-profiles.json-- Cached brand profiles (file-based, no database needed).public/generated/-- AI-generated background images (UUID-named PNGs).