Brand Builder

Brand Builder turns a single product description into a consistent campaign set across multiple marketing mediums: billboard, newspaper advertisement, and social post.

The app first expands the product brief into a reusable visual identity, then uses Google's Nano-Banana image model (gemini-2.5-flash-image) to render each medium while preserving the same product form, materials, colors, logo placement, and brand motifs. Gemini API calls run on the Express server so API keys are never exposed in the browser bundle.

Key Highlights

• Single product brief: Describe the product once, including name, packaging, colors, materials, and positioning.
• Shared visual identity: The server generates a consistency protocol that is reused for every image request.
• Three campaign outputs: Billboard, newspaper advertisement, and square social post.
• Nano-Banana rendering: Image generation uses gemini-2.5-flash-image through the server-side Gemini API.
• Server-side secrets: GEMINI_API_KEY stays on the backend and is not shipped to the client.
• npm-ready CLI: The brand-builder command runs the compiled full-stack app from an installed package.

Installation

Brand Builder is distributed through npm and GitHub Packages:

npmjs.com:        @nayannath/brand-builder
GitHub Packages: @nayan07cse/brand-builder

Install globally from npm:

npm install -g @nayannath/brand-builder

Set your Gemini API key and launch the app:

export GEMINI_API_KEY="your-gemini-api-key"
brand-builder

This runs the compiled full-stack server serving the app on http://localhost:3000.

GitHub Packages users can install the GitHub-scoped package after authenticating npm for GitHub's registry:

npm login --scope=@nayan07cse --auth-type=legacy --registry=https://npm.pkg.github.com
npm install -g @nayan07cse/brand-builder --registry=https://npm.pkg.github.com

Local Development

Use these scripts when running the project from source.

Prerequisites

Define your Gemini API credentials in a .env file at the root:

# .env file
GEMINI_API_KEY="your_api_key_here"

Install Dependencies

npm install

Run Active Developer Environment

npm run dev

This boots the Express server, mounts Vite development middleware, and starts the app on port 3000.

Build for Production

Compile the Vite client and bundle the Express server:

npm run build

This command executes a two-stage build:

1. Compiles the Vite SPA index, assets, and styling libraries into /dist.
2. Bundles /server.ts into /dist/server.cjs using esbuild.

Run Built Package

Once built, execute the compiled production package directly:

npm run start

The server reads PORT and HOST if your deployment platform provides them. By default it listens on 0.0.0.0:3000.

Distribution

Release builds are published to both npmjs.com and GitHub Packages. Package versions are immutable in each registry, so a new release requires a version bump:

npm version patch
git push --follow-tags

Automation is handled by GitHub Actions:

• .github/workflows/ci.yml: validates pushes and pull requests.
• .github/workflows/npm-publish.yml: publishes @nayannath/brand-builder to npmjs.com.
• .github/workflows/github-packages.yml: publishes @nayan07cse/brand-builder to GitHub Packages.

Architecture

• Server (server.ts): Express API that expands product briefs, calls Gemini image generation, and returns base64 image data to the UI.
• Client (src/App.tsx): React interface for entering the product brief, showing the shared brand system, and displaying each generated medium.
• Build (npm run build): Vite compiles the SPA and esbuild bundles the server into dist/server.cjs.
• Package (bin/cli.js): Starts the compiled server when installed as an npm binary.

Metadata

• package.json designates executable commands inside "bin" points.
• metadata.json lists "MAJOR_CAPABILITY_SERVER_SIDE_GEMINI_API" for cloud run environments, declaring proxying compliance.

© 2026 Brand Builder. Distributed under standard release conventions.