Tersa is a visual AI workflow builder that lets developers and AI practitioners design, test, and iterate on multi-model AI pipelines through an intuitive drag-and-drop interface. It solves the complexity of chaining AI models from different providers by offering a unified, visual environment with real-time feedback and cost visibility.
Built with Next.js 15, React 19, and the Vercel AI SDK Gateway, Tersa integrates with 25+ AI providers including OpenAI and Anthropic, uses ReactFlow for canvas rendering, TipTap for rich text editing, and Vercel Blob for media storage. It runs locally with Node.js and PNPM, and persists workflow state in the browser.
What You Get
- Visual Workflow Builder - Drag and drop nodes to create AI workflows, connecting inputs and outputs visually without writing code.
- Multi-Model Support - Access text, image, and video models from 25+ AI providers via the Vercel AI SDK Gateway, including OpenAI, Anthropic, and others.
- Cost Indicators - See relative pricing comparisons across AI models at a glance to make cost-aware decisions during workflow design.
- Reasoning Extraction - View the internal reasoning steps of supported AI models, helping users understand how conclusions are reached.
- Streaming Responses - Receive real-time text generation output as it’s produced by AI models, enabling low-latency interactions.
- Local Storage - Workflow canvas state is automatically saved in the browser’s local storage, allowing users to resume work without server dependency.
Common Use Cases
- Building multi-step AI pipelines - A developer connects an image analysis node to a text generation node to automatically describe uploaded images using GPT-4 and Claude 3.
- Comparing AI model costs and performance - A product manager tests the same prompt across OpenAI, Anthropic, and Mistral to compare response quality and relative pricing before deployment.
- Prototyping AI-powered content tools - A journalist creates a workflow that summarizes news articles using Llama 3, then generates social media captions with GPT-4o.
- Educational AI experimentation - A university student visualizes how different models process the same input to understand reasoning differences and token usage.
Under The Hood
Architecture
- Clear separation between UI components and domain-specific server actions, enforcing boundaries between client rendering and AI inference
- State management leverages atomic primitives via Jotai and visual node graphs through React Flow, with persistent canvas state stored in localStorage via a dedicated interface
- AI integration is tightly coupled with gateway-based model routing, where image and video generation actions directly invoke structured prompts and blob storage
- Custom utility modules encapsulate canvas data extraction and serialization logic, decoupling rendering from data persistence and model execution
- Strongly typed component props ensure type safety and reusability across the UI tree, with services imported directly rather than via dependency injection
Tech Stack
- Built on React 19 and Next.js with server components and Turbopack for optimized rendering and development experience
- Rich-text editing powered by Tiptap with syntax highlighting via lowlight, complemented by shadcn/ui and Tailwind CSS for component-driven, utility-first styling
- Vercel platform deeply integrated for analytics, blob storage, and deployment, with modern TypeScript and React 19 JSX runtime for type-safe development
- Biome and Ultracite enforce code consistency, while pnpm ensures deterministic dependency resolution
Code Quality
- Clean separation of concerns in server actions and API routes with explicit typing and union return types for error states
- Robust error handling in endpoints with structured JSON responses and appropriate HTTP status codes, though lacking contextual logging or monitoring
- Strong type safety across components and props enhances reliability and IDE support, but absence of formal testing and custom error classes limits resilience
- Well-organized utility modules with focused responsibilities, though inconsistent code style enforcement due to missing linting or formatting configuration
What Makes It Unique
- Native AI model gateway integration enables real-time reasoning trace extraction, allowing users to inspect model thought processes during generation
- Visual node-based canvas tightly couples AI-generated metadata with interactive editing, creating a seamless multimodal workflow
- Custom message branching system supports non-linear conversation exploration within a single thread
- Perceptually uniform theming using OKLCH color space enables dynamic, accessibility-aware light/dark transitions
- Secure, opinionated blob pipeline with content-type validation and URL assertions prevents injection risks while supporting diverse media inputs