Tersa is an open-source visual AI playground that lets developers and AI practitioners construct complex workflows by connecting nodes representing different AI models and data processors. Designed for those who want to prototype or deploy multi-step AI pipelines without writing code, Tersa provides an intuitive canvas where users can chain together text, image, audio, and video processing nodes powered by industry-leading models from OpenAI, Anthropic, and others. Built with Next.js 15, React 19, and Supabase, it combines a modern UI with secure cloud storage and real-time collaboration potential. Tersa is ideal for engineers, researchers, and product teams looking to experiment with AI workflows quickly while maintaining control over data and infrastructure.
What You Get
- Visual Workflow Builder - Create AI workflows using a drag-and-drop canvas powered by ReactFlow, allowing users to connect nodes representing AI models and data processors without writing code.
- Multiple AI Models - Seamlessly integrate with leading AI providers including OpenAI and Anthropic via the Vercel AI SDK, enabling diverse model choices within a single workflow.
- Multimedia Processing - Process text, images, audio, and video through interconnected nodes, supporting end-to-end workflows that handle mixed media inputs and outputs.
- Automatic Saving - All workflow changes are automatically saved to the user’s project, eliminating manual save operations and reducing data loss risk.
- Cloud Storage with Supabase - Workflows, user accounts, and project data are securely stored in Supabase with Row Level Security enabled for private access control.
- Modern UI Stack - Built with Next.js 15 (App Router, Turbopack), React 19, Tailwind CSS, and accessible components from shadcn/ui, Kibo UI, and Radix UI for a polished, responsive experience.
Common Use Cases
- Building multi-modal AI assistants - Create workflows that accept image uploads, transcribe audio, process text queries, and generate responses using OpenAI or Anthropic models in a single pipeline.
- Automating content generation pipelines - Design workflows that pull text from a document, generate summaries with GPT-4, create images based on the summary via DALL·E, and output a formatted PDF—all visually connected.
- Prototyping AI-powered customer support tools - Solve the problem of manually routing user inquiries by connecting a text input node to an LLM, then to a sentiment analyzer and finally to a ticketing system API.
- Dev teams experimenting with AI model comparisons - Teams can visually compare outputs from different models (e.g., GPT-4 vs Claude 3) on the same input data by duplicating and branching nodes within a single workflow.
Under The Hood
Tersa is a Next.js-powered AI workflow builder that enables users to construct and share visual AI pipelines through a React Flow-based interface. It integrates real-time streaming AI responses, credit-based usage tracking, and a comprehensive project management system within a unified platform.
Architecture
Tersa follows a modern monolithic architecture with clear separation between authentication, API routes, UI components, and business logic. The application leverages layered design principles to manage complexity and support scalable development.
- Uses a layered architecture with distinct modules for auth, API, database, and UI
- Implements middleware and strategy patterns to handle multiple AI providers efficiently
- Component interactions are structured through React components, custom hooks, and server-driven data flows
- Modular organization supports maintainability and extensibility across different AI workflows
Tech Stack
Built with TypeScript and Next.js 14, Tersa utilizes a modern tech stack tailored for full-stack AI applications with robust UI and backend capabilities.
- Primary technologies: TypeScript, Next.js 14, React Flow for visual workflow building
- AI integration: @ai-sdk/gateway with support for real-time streaming and reasoning tracking
- Backend services: Supabase Auth, Drizzle ORM, and Stripe for billing and user management
- Development tools: pnpm as package manager, Biome for linting, and Drizzle Kit for database migrations
Code Quality
Tersa demonstrates solid code organization with consistent patterns, strong type safety, and a focus on error handling throughout the system.
- Comprehensive error handling with centralized logging and parsing mechanisms
- Extensive use of async/await patterns and proper type safety in TypeScript
- Modular component design with clear separation of concerns across UI and API layers
- Code linting and formatting configured to ensure consistent style and readability
What Makes It Unique
Tersa distinguishes itself through its integration of visual AI workflow construction with real-time streaming AI responses and a sophisticated credit tracking system.
- Real-time streaming AI responses with reasoning and source tracking capabilities
- Custom React Flow nodes that enable intuitive visual workflow creation and editing
- Integrated credit system that monitors usage across multiple AI providers with billing support
- Interactive onboarding flow featuring demo components to guide new users through the platform