One interface for every GenAI capability.
The creative team was juggling separate tools for image generation, video processing, 3D modeling, and background removal. AI Studio replaced them all with a single modular platform — built on Replicate API, deployed and in daily use by the production team.
See it in action
A walkthrough of the platform — pick a capability, configure it, run it on Replicate, and get the asset back. All in one interface.
Design system
Dark navy surfaces, indigo–violet accents, Inter for precision — the full, code-truthful spec behind the platform's modular UI.
Under the hood
JavaScript · Replicate API · Node.js. Modular tool registration so any new AI capability plugs in with three steps.
Five tabs, five logins, five different UIs for work that belongs in one place.
The creative and production teams were running image generation in one browser tab, background removal in another, 3D model generation in a third. Every capability lived in its own tool, with its own API key management, its own queue UI, and its own way of handing back the result. The friction wasn't any single tool — it was the context-switching tax. Each handoff between tools broke the creative flow and slowed down the team's output.
Pick a capability, run it, get the asset. That's the whole loop.
The core flow is deliberately simple — the platform does the wiring so the team doesn't have to think about it.
video, 3D,
bg removal
source file,
model
handles the
compute
same panel,
no switching
pass to next
step
The decisions that shaped everything else.
"One interface" is easy to say and hard to build without making it feel cramped or confusing. Three early bets shaped what the platform actually became.
Modular registration, not monolithic routing.
Each tool is a self-contained component that registers itself — name, icon, category, API service, and UI — in a single call. Adding a new AI capability never requires touching the core app: create a file, register it, and it appears in the sidebar. The platform scales with the team's needs, not against them.
Replicate as the universal AI layer.
Rather than integrating each model provider separately, the platform routes everything through Replicate's API. Background removal, image generation, video processing, and 3D modeling all share one service interface. Switching models is a config change, not a code change — and the team gets access to 100+ models without the platform caring which one runs.
Panel layout as the interface primitive.
Every tool renders inside the same panel structure: a tools panel for inputs, an editor panel for the canvas, a settings panel for configuration, and a data panel for results. Users learn the layout once and it applies to every capability. Switching from image generation to 3D modeling is "choosing a different tool," not "learning a new one."
Small calls that change how the whole thing feels.
A production platform lives or dies on the decisions that are invisible when they work. Here are the ones worth defending in a critique.
The sidebar is the catalog, not the nav.
Tool categories (image, video, audio, text) are the organising principle — not pages or workflows. The sidebar shows what's available; you're always in "the platform," choosing a different capability.
API key config is a one-time setup, not a recurring task.
Keys live in the environment file and surface in the settings panel — not entered before each run. The team shouldn't think about infrastructure during creative work. Authentication happens once, then disappears from the workflow.
The panel canvas is resizable and draggable.
Different tools need different panel proportions. Panels are draggable and the layout saves per-tool, so the workspace adapts to the job rather than forcing the job to adapt to the workspace.
Mobile gets a dedicated layout, not a squished desktop.
The platform detects breakpoints and switches to a MobileLayout component rather than reflowing the panel canvas. On mobile, tools are sequential — the right pattern for reviewing and triggering jobs on the go.
The debug assistant is always one click away.
A floating debug assistant surfaces error context, model logs, and API response details inline — without leaving the tool. On an internal platform where the team is also the admin, fast debugging is a first-class UX concern, not an afterthought.
Auth is gated but lightweight.
The platform uses an auth gate with email verification and an approval flow — because it calls real APIs with real costs. But once approved, you're in, and it remembers you. Security without the ceremony of a full SaaS onboarding.
A dark, confident system built for production.
AI Studio runs on a deep-navy + indigo/violet system — dark surfaces for long sessions, blue for primary action, violet for modular depth. Tokens are defined once in CSS custom properties. Here's the short version; the full spec lives on the Design page.
Dark enough to focus, bright enough to act.
The palette derives from the AI Studio source: hsl(222 47% 11%) for the base, blue-500 for primary actions, violet-600 for modular depth. The deep navy reduces eye strain during long creative sessions; the blue reads clearly as "the interactive thing."
Inter: sharp, technical, always readable on dark.
Inter 700 is confident without being playful — the right register for a production tool. Its optical precision holds at every size on dark surfaces.
One family across all weights. 400 for body copy, 600 for labels and UI strings — consistent voice whether you're reading a description or clicking a button.
Only where the label needs to read as "system output" — section eyebrows, API version tags, the debug console.
Rounded enough to feel modern, sharp enough to mean business.
Four radii, from pill-shaped status badges down to tight chip corners. Consistent rounding signals coherence across all panels and components.
Four modules, one spark — the platform in one frame.
The logo mark is a 2×2 grid of rounded squares representing the four initial capabilities (image, video, 3D, background removal), with a central white circle as the unifying spark. The indigo-to-violet gradient mirrors the platform's color system. At small sizes it reads as a confident, modern symbol; at large sizes the modularity is clear.
Motion communicates state, not style.
The cuts that keep it fast and focused.
An internal tool has to be ruthless about scope. Here's what was left out on purpose — and why each cut makes the platform better for the people who actually use it.
The platform ships with the models the team needs — not a browsable catalog of hundreds. Replicate hosts thousands of models, but exposing all of them would turn a production tool into a toy box. The team registered the four capabilities they use; adding more is a deliberate decision, not a discovery problem.
Outputs aren't versioned or stored inside the platform. The team already has an asset management workflow. Building a second one inside the tool would duplicate infrastructure and add maintenance burden. The platform is a generator, not a storage layer — it hands results to wherever the team keeps its assets.
API costs are visible in Replicate's own dashboard, not inside the platform. Adding usage tracking and cost attribution would require backend infrastructure and ongoing maintenance. For a small internal team, checking Replicate's dashboard directly is faster and more accurate than a reimplemented summary.
The platform processes one job at a time, in the foreground. Creative workflows are interactive — you see the output, decide if it's right, and iterate. A background job queue would obscure that loop. Batch processing is available directly through Replicate's API for cases where it's genuinely needed.
Modular by design, deployed for daily use.
The architecture mirrors the UX — the same modularity that makes the interface simple makes the codebase extensible. Adding a new AI capability takes three steps and touches no core files.