Tersa

Tersa is a browser-based visual playground for designing and running AI workflows without writing code. You drag nodes onto a canvas, connect them by drawing edges between outputs and inputs, configure each node with a model from 35+ providers, and hit run — the data flows through the graph in real time. Built by Hayden Bleasel and now under the Vercel Labs organization, Tersa serves as both a practical tool and a showcase for what the Vercel AI SDK Gateway makes possible.

The application runs entirely client-side except for the AI inference calls, which are routed through Next.js server actions and the AI SDK Gateway. Canvas state persists automatically in the browser’s localStorage so you can close and reopen without losing work. Media uploads (images) are handled through Vercel Blob, and every AI response streams token-by-token directly into the node that requested it.

Tersa supports three node types: text nodes for prompting and transforming content, image nodes for generation and editing, and video nodes for model-based video synthesis. Any node can receive inputs from one or more upstream nodes, and cycle detection prevents you from creating circular workflows. A drop node acts as a staging area when you drag a connection into empty canvas space, letting you pick a destination before committing.

The project uses React 19 and Next.js 16 with Turbopack, shadcn/ui, Kibo UI and Radix UI for the component layer, XY Flow for the canvas, TipTap for rich text editing inside nodes, and Biome with Ultracite for linting and code formatting. It is MIT-licensed and intended for developers who want to self-host or fork it.

What You Get

• Visual Workflow Canvas - A ReactFlow-based infinite canvas where you drag, reposition, and connect text, image, and video nodes to build multi-step AI pipelines without writing code.
• 35+ Provider Access via AI SDK Gateway - Route inference requests through the Vercel AI SDK Gateway to models from OpenAI, Anthropic, Google, xAI, DeepSeek, Mistral, Groq, Runway, Luma, Replicate, and dozens more — all from one interface.
• Live Cost Indicators - Each model in the selector displays a relative price bracket (lowest / low / high / highest) computed from live pricing data using percentile distribution across all available models.
• Reasoning Trace Viewer - For models that expose chain-of-thought reasoning, a dedicated panel surfaces the raw reasoning text alongside the final response so you can inspect how the model arrived at its output.
• Streaming Responses - AI responses stream token-by-token into the node that requested them, with skeleton loading states during submission and real-time markdown rendering as text arrives.
• Automatic Canvas Persistence - The full graph — nodes, edges, model selections, generated content — is debounce-saved to localStorage on every change, so work is never lost on refresh.
• Image and Video Generation Nodes - Dedicated node types for image generation and editing (via Vercel Blob upload) and video generation, each with their own model selectors scoped to compatible providers.
• Cycle-Safe Connection Validation - The canvas enforces directed acyclic graph rules using depth-first traversal so you cannot accidentally create circular data flows.

Common Use Cases

• Chaining text and image generation - A developer wires a text node that summarizes a document into an image node that generates a visual representation of the summary using a diffusion model, comparing outputs across providers.
• Rapid model comparison - A researcher connects the same prompt node to three separate text transform nodes, each configured with a different model (GPT-4o, Claude Sonnet, Gemini Flash), then runs all three to compare response quality and cost side-by-side.
• Prototype AI content pipelines - A content team builds a workflow where a source text node feeds into a summarization node, whose output feeds into a social media caption node, producing structured marketing copy from raw articles.
• Exploring model reasoning - A developer selects a model that exposes reasoning traces, runs a complex analytical prompt, and uses the reasoning panel to study the internal steps the model took before returning a conclusion.
• Self-hosted AI playground - An engineering team forks and deploys Tersa on their own Vercel account, configuring it with internal API keys so non-technical stakeholders can experiment with prompts without requiring engineering time.

Under The Hood

Architecture Tersa follows a clean client-server split: the canvas, all node state, and the entire graph runtime live in React on the client, while AI inference is isolated to Next.js server actions and a single API route. The canvas component manages nodes and edges with plain React state and a debounced localStorage writer, with XY Flow handling rendering and spatial logic. Node types are registered in a central registry object and rendered polymorphically — each node inspects its incoming connections at render time to decide whether it acts as a primitive editor or a transform that triggers inference. Context providers expose the gateway model catalog and node operation helpers (add, duplicate) to the component tree without prop drilling. The architecture avoids a global state library, relying instead on React’s built-in state, useCallback memoization, and XY Flow’s imperative API for cross-component node updates.

Tech Stack The application is built on React 19 and Next.js 16 with Turbopack for fast development iteration and React Server Components for the server-side gateway model fetch at startup. Inference is routed through the Vercel AI SDK v6 and the @ai-sdk/gateway package, which abstracts provider-specific authentication and response formats behind a unified interface. The canvas is powered by XY Flow (formerly React Flow 12), TipTap handles rich text editing inside nodes with a full extension suite (tables, task lists, code blocks with lowlight syntax highlighting, typography), and shadcn/ui, Kibo UI, and Radix UI supply the component primitives. Tailwind CSS v4 is used for styling. Vercel Blob handles image upload and storage. State atoms use Jotai for the reasoning panel visibility toggle. Biome and Ultracite enforce code style, and pnpm manages dependencies.

Code Quality The codebase has no automated tests — no unit, integration, or end-to-end test files exist anywhere in the repository. Error handling is consistent and user-facing: a shared handleError utility parses errors and displays them as toast notifications via Sonner, with structured error boundaries at the action layer. TypeScript is used throughout with strict prop interfaces and discriminated return types in server actions. Biome with Ultracite configuration enforces formatting and a rule set across all non-generated files. The absence of tests is a meaningful gap for a tool that routes live AI API calls, but the explicit error handling and strong typing partially compensate by catching type mismatches at compile time.

What Makes It Unique Tersa’s most distinctive technical choice is building the entire model catalog dynamically from the AI SDK Gateway’s runtime model list rather than hardcoding it — models, pricing, and provider metadata are fetched at server startup, and the cost indicator brackets are computed using statistical percentile distribution across all available models at that moment. This means the UI automatically reflects new gateway models and current pricing without code changes. The node type system’s primitive-vs-transform duality — where a text node becomes a transform automatically when it receives an incoming connection — creates a surprisingly fluid workflow authoring experience with no explicit mode switching. The integration of reasoning trace extraction into the streaming pipeline, surfaced through a portal-based tunnel component, gives users direct visibility into model reasoning without cluttering the node’s primary output area.

Self-Hosting

Tersa is released under the MIT License, which is one of the most permissive open-source licenses available. You can use it commercially, modify the source, distribute your changes, and incorporate it into proprietary products without any obligation to publish your modifications. The only requirements are that you retain the copyright notice and license text in any distribution. The copyright is held by Vercel.

Running Tersa yourself requires a Vercel deployment or a comparable Node.js hosting environment capable of running a Next.js 16 application. You will need to provision your own Vercel AI SDK Gateway credentials and supply API keys for whichever AI providers you intend to use — the application does not include any embedded keys. Image uploads rely on Vercel Blob storage, so you need a Vercel account with Blob enabled unless you modify the upload action to target a different storage backend. There is no database, user authentication, or persistent server-side state to manage, which keeps the operational footprint small but means all workflow state lives in individual users’ browsers.

There is no commercial or cloud-hosted version of Tersa with additional features. The hosted demo at tersa-phi.vercel.app is a reference deployment by the author. Because Tersa is a Vercel Labs project, it is primarily maintained as a demonstration and reference implementation rather than a production-hardened product — there are no SLAs, no enterprise support channels, no managed upgrade path, and no HA configuration provided. Teams adopting it should expect to own all operational concerns, including keeping dependencies current, handling gateway API key rotation, and adapting the application as the Vercel AI SDK evolves.