Magai

On the surface, Magai is a chat interface. Underneath, it's a deeply layered SaaS platform where almost every feature touches multiple systems at once.

The chat experience alone had to support model switching across providers routed through OpenRouter, real-time streaming via the Vercel AI SDK, persistent conversation history backed by Supabase with live subscriptions, file and link attachments per conversation context, version-tracked canvas documents powered by TipTap, and MCP (Model Context Protocol) tool execution with user-level approval flows.

Then there was media. The platform needed to support image generation across Flux, Ideogram, Imagen, Recraft, Seedream, GPT Image, Reve, and Leonardo — plus video generation through Kling, Luma, MiniMax, Veo, Seedance, Hailuo, Sora, and Runway. Each provider has its own API contract, parameter structure, aspect ratio handling, and cost model. All of that had to converge into a single, intuitive interface.

Beyond the core product, Magai needed multi-tenancy (teams, workspaces, organizations), Stripe subscription management with three plan tiers, seat-based billing with unit boosts, invoice lifecycle handling via background workers running on PGMQ, and a full org-admin dashboard with enterprise and partner account modes, invite links, API key provisioning, and team subscription oversight.

The integrations layer added another dimension: Composio-powered third-party toolkits with connect/disconnect flows, persona-scoped MCP server configuration, built-in tools for web search (Tavily), canvas writing, and image generation — all toggleable per user.

Without someone owning the full picture — architecture, UX, product logic, and delivery cadence — a product this complex fragments fast. Features conflict. Data models get patched instead of planned. Users get confused. Sprints lose direction.

That's where Prizmstack came in.

Prizmstack operated as the primary product team across every discipline:

• •Technical Architecture — Designed the system from database schema through API layer to client-side state management, ensuring every feature could scale without reworking the foundation.
• •Product Management — Owned the roadmap, made scope decisions, and translated business objectives into prioritized delivery plans.
• •User Stories — Wrote detailed, testable stories that drove each sprint and kept design, development, and QA aligned.
• •UX/UI Design — Designed every user-facing flow: onboarding, chat, media gallery, canvas, voice, personas, integrations, team management, billing, and org admin.
• •Full-Stack Development — Built the entire application: Next.js 15 frontend with React 19, Supabase backend with real-time subscriptions, 65+ API routes, Stripe billing, and multi-provider AI orchestration.
• •Scrum Sprint Delivery — Ran structured sprints from planning through retrospective, keeping velocity high and stakeholders aligned.
• •QA — Tested across billing edge cases, real-time state, multi-tenant permission boundaries, and provider-specific media generation behavior.
• •API Design — Architected a Partner API layer with provisioning endpoints, Swagger documentation, and key management for B2B distribution.
• •Data Architecture — Designed the Supabase schema to support multi-tenancy (users, teams, workspaces, organizations), ACL-based sharing, and efficient real-time subscriptions with filtered channels.

1. Multi-Model AI Chat

A conversation interface that lets users switch between AI models in real time. Messages stream via the Vercel AI SDK, routed through OpenRouter. Each chat maintains persistent context, file attachments, link references, and full message history with Supabase real-time sync.

2. Image & Video Generation

A unified media creation experience spanning 20+ models from 14 providers — Flux, Ideogram, Imagen, Recraft, Seedream, GPT Image, Reve, Leonardo, Kling, Luma, MiniMax, Veo, Seedance, Hailuo, Sora, and Runway. Users configure aspect ratios, resolutions, durations, and input references from a single prompt interface. Generated media flows into a searchable, shareable gallery.

3. Canvas Document Editor

A TipTap-powered content editor embedded in the chat sidebar. Users can write, edit, and iterate on long-form content alongside their AI conversation. Documents support version history, PDF export, and multi-canvas management per chat.

4. Voice AI

A real-time voice interaction mode using OpenAI's voice model. The UI swaps from text to a live waveform with mic controls, voice selection, and transcription. Conversations are saved as standard chat history.

5. Custom Personas

Users create AI personas with custom instructions, profile images, knowledge file uploads (vectorized via Pinecone), and per-persona MCP server connections. Personas can be shared with team members via ACL controls.

6. Saved Prompts & Prompt Library

A folder-organized prompt system where users save, edit, and share reusable prompts. Integrated into the chat input with team-level sharing and permission controls.

7. Integrations & Tool Connectivity

A Composio-powered integrations layer where users connect third-party tools, toggle built-in capabilities (web search via Tavily, canvas writing, image generation), and manage toolkit visibility per workspace. MCP tool execution flows through an in-chat approval UI.

8. Team Workspaces & Multi-Tenancy

A full multi-tenant hierarchy: users belong to teams, teams contain workspaces, workspaces scope chats, prompts, personas, and media. Admins manage members, invites, and workspace settings. Users switch between teams and workspaces without leaving the app.

9. Subscription Billing

Three Stripe-backed plan tiers (Standard at $20/mo, Pro at $40/mo, Ultra at $200/mo) with yearly discounts, seat-based pricing with unit boosts, checkout sessions, customer portal access, and a background worker (PGMQ) that handles delayed invoice voiding and subscription lifecycle events.

10. Organization Admin Dashboard

A dedicated admin panel for enterprise and partner organizations. Includes user management, invite link generation, team subscription oversight, and — for partner accounts — API key provisioning with Swagger documentation and dedicated billing management.

11. Public Chat Sharing

Users can share individual conversations publicly via a read-only URL. Shared chats display messages, attached documents, and files with privacy guardrails.

12. Onboarding

A multi-step onboarding flow: email confirmation, team creation, workspace setup (with an optional AI-powered website analysis path), and plan selection — all designed to get users into a productive state fast.

Every feature listed above was delivered through structured Scrum sprints.

Each sprint started with story grooming — translating product goals into clearly scoped, testable user stories. Stories were estimated, prioritized, and assigned based on dependencies and team capacity.

Design happened before development. Flows were mapped, edge cases were identified, and UI decisions were made before a single component was built. This eliminated the rework cycles that kill velocity on complex products.

Architecture happened before implementation. Before building the billing system, the media generation layer, or the real-time subscription infrastructure, we designed the data model, API contracts, and state management patterns. This is why the platform could grow from a chat app into a multi-feature SaaS without accumulating technical debt.

Sprint reviews kept stakeholders aligned. Retrospectives kept the process sharp. The result was consistent, predictable delivery on a product that was anything but simple.

This product demanded architectural decisions that would either enable or constrain every feature built on top of them.

We chose Next.js 15 with React 19 for the application shell, using client-side SPA routing via Wouter to keep navigation fast while maintaining Next.js API routes for server-side logic. State management runs on Valtio with a custom component store pattern, keeping UI state predictable across dozens of interconnected components. Data fetching is powered by TanStack Query with Supabase cache helpers, giving us automatic cache invalidation tied to real-time Postgres changes through a custom RealtimeChannelManager that manages filtered subscriptions per table and per user context.

The AI layer routes through OpenRouter and the Vercel AI SDK for chat models, with direct provider integrations for media generation (Fal.ai, Runway SDK, Leonardo API, OpenAI image endpoints). Each provider has distinct parameter handling, cost calculation, and response formatting — all normalized into a single interface through shared handler utilities and a typed ImageModelParams configuration system.

Billing was designed to handle real-world subscription complexity: plan upgrades and downgrades with prorated invoicing, seat additions with unit boosts, legacy plan migration paths, and a PGMQ-backed worker queue for delayed actions like invoice voiding and yearly usage resets. This architecture ensures billing state stays consistent even when Stripe webhooks arrive out of order.

The integrations layer was built for extensibility. Composio toolkits and MCP servers are configured per persona, not hardcoded per feature. This means the platform can add new third-party connections without touching the core chat or prompt infrastructure.

Every architectural choice was made to keep the product extensible. New AI providers, new media models, new integrations, new plan tiers — all of these can be added without restructuring the system.

Magai shipped as a production-grade AI SaaS platform that brings chat, media creation, content editing, voice, personas, integrations, team collaboration, and enterprise administration into one cohesive product.

The architecture supports continued expansion. The UX is consistent across deeply different feature domains. The billing system handles real-world subscription complexity. The integrations layer is extensible by design.

None of that happened by accident. It happened because one team owned every layer of the product — from the database schema to the sprint backlog to the pixel-level design to the deployed code.

Prizmstack didn't just build what was asked for. We shaped what should be built, in what order, and how it should work together.

Complex products don't fail because of bad code. They fail because nobody owns the full picture.

Magai is what happens when one team owns architecture, product, design, and delivery together — and stays invested from the first sprint to production scale.

That's how Prizmstack works. That's why it works.