Getting Started
Prerequisites
- Node.js 20+ and npm
- Git
- Chromium dependencies for Remotion's headless renderer (bundled in the Docker image; on a dev box Remotion installs its own)
- API keys: Azure OpenAI (for the AI Director) and Azure TTS (for narration). The system also runs fully offline with a deterministic stub runner if no keys are present — useful for trying the editor.
Install
git clone <repo-url>
cd AI_Marketing_Studio
npm install # installs root workspaces (server + packages/*)
cd web && npm install # the Next.js app has its own dependency tree
The root package.json workspaces are packages/*, packages/renderers/*, and server. The Next.js app under web/ is a separate install (its own node_modules).
Configure
Environment is shared from a single repo-root .env (the Next.js app loads ../.env at startup; a committed web/.env.local takes precedence in dev). In the container these come from Azure app settings.
Director (video) — Azure OpenAI + TTS
# Azure OpenAI — storyboard analysis, copywriting, clarify questions, chat edits
AZURE_OPENAI_ENDPOINT=https://your-resource.openai.azure.com
AZURE_OPENAI_KEY=...
AZURE_OPENAI_DEPLOYMENT=gpt-5
AZURE_OPENAI_API_VERSION=2024-08-01-preview
# optional: a separate deployment for the copywriter role
AZURE_OPENAI_COPYWRITER_DEPLOYMENT=...
# Azure TTS — narration
AZURE_TTS_ENDPOINT=https://your-region.api.cognitive.microsoft.com
AZURE_TTS_KEY=...
AZURE_TTS_DEPLOYMENT=gpt-4o-mini-tts
AZURE_TTS_API_VERSION=2025-04-01-preview
Without Azure OpenAI keys the Director falls back to the stub runner (deterministic, network-free) — the editor, blueprints, and export still work; only AI authoring is stubbed. The UI shows a
stub/llmbadge so you always know which is active.
Auth & legacy features (Express)
JWT_SECRET=<your-secret-here>
ALLOWED_USERS=you@example.com
# Email generator (optional)
ACS_CONNECTION_STRING=...
ACS_SENDER_ADDRESS=DoNotReply@your-domain.com
Storage & render (optional overrides)
STORAGE_ROOT=./storage # where documents/media/renders live (default: ../storage from web/)
ASSET_BASE_URL=http://127.0.0.1:3000 # base the renderer's Chromium uses to fetch /api/media
REMOTION_RENDER_PORT=3333 # render bundle port (must differ from Next's 3000)
EXPRESS_ORIGIN=http://localhost:3001 # where Next.js proxies auth/email/svg/settings/brand
Run
This frees stale ports, then concurrently starts two processes:
| Service | Port | Description |
|---|---|---|
| Express server | 3001 |
Auth, email, SVG, settings, brand (the kept v1 features) |
| Next.js app | 3000 |
The studio editor, Director API, media/asset serving, in-process renderer |
Open http://localhost:3000, log in with your ALLOWED_USERS email, and you'll land on the Studio editor — the home route.
Next.js proxies
/api/auth,/api/health,/api/email,/api/svg,/api/settings, and/api/brandto Express; everything else (/api/director/*,/api/assets,/api/media) is handled natively by Next.
First video
- On the Studio editor, click Generate to open the Director
- Enter what you're promoting (the one required field); optionally add goal, audience, tone, length, CTA, aspect, brand color/logo, and upload source documents
- Answer (or skip) the AI's clarify questions — each is pre-filled with a best guess
- Review the proposed storyboard → edit scenes / swap templates / Approve (Gate 1)
- Review the generated content + narration → tweak → Approve & open in editor (Gate 2)
- Refine in the editor (inspector / chat / timeline), check the Review tab
- Switch to Deliver → Export to render an MP4 (16:9 / 9:16 / 1:1)
You can also skip generation: New ▾ starts from a blueprint, or reopen a saved document.
First email (legacy)
- Open Email from the top nav (
/email) - Enter a brief (purpose, tone, key messages, CTA)
- The pipeline runs brief → copy → layout → html on the Express server
- Regenerate any section independently; Send Preview to email a test render
See Email Generator.
Local wiki
This wiki is served by MkDocs Material: