tersa - Moses Yebei

Building AI Workflows with Tersa

The Problem

AI workflows are a mess. You’ve got APIs from 25+ providers, each with their own quirks, pricing, and limitations. Want to chain a text model with an image generator and then stream the output? Good luck manually wiring it all up without losing your mind. And even if you do, how do you make it visual, reusable, and not a spaghetti-code dumpster fire?

What This Does

Tersa is essentially a drag-and-drop playground for AI workflows. Think ReactFlow meets AI models. You build workflows visually by connecting "nodes" on a canvas. Each node represents a model or operation (e.g., components/nodes/image/index.tsx for image-related workflows or components/nodes/text/index.tsx for text).

The app is built on Next.js (App Router, not the old Pages API) and uses ReactFlow for the canvas. There’s a ton of reusable UI in components/ui, styled with Tailwind and shadcn/ui. Workflow state management is handled using browser local storage (lib/canvas-storage.ts), so no cloud nonsense required to get started.

Under the hood, it relies on the Vercel AI SDK Gateway to talk to AI providers, which means you get multi-model support out of the box. The app/actions/ folder is basically where the magic happens, with handlers for creating, describing, and editing images or videos.

Real-World Use

Say you want to generate an image based on text, add a caption, and then stream the result back. In Tersa, you can: Drag in a text input node (components/nodes/text/index.tsx). Add an image generation node (components/nodes/image/index.tsx) and connect it. Attach a reasoning node to see the model's thought process (components/reasoning.tsx). Hit run. Done.

The workflow persists thanks to lib/canvas-storage.ts, so you can reload the page and pick up where you left off.

Here’s an example of what it might look like programmatically:

The Bottom Line

Tersa is a solid tool if you’re building complex AI workflows and don’t want to deal with constant API management. The visual editor is slick, and the ReactFlow integration feels natural. That said, it’s definitely overkill for basic use cases (like calling GPT-4 and calling it a day). If you’re the type of dev who enjoys tinkering with AI models and needs a visual approach to chaining them, this is worth checking out. For everyone else? Stick to Postman and experiment later.

What the analyser found

Deployment readiness

3/7

Container image
CI pipeline
Lockfile committed
Test suite
README
License
No committed secrets

Composition

103 files

TSX54
TypeScript22
Markdown10
JSON5
YAML3
CSS1

ReactNext.js

Architecture

Top-level areas of the codebase, sized by module count. Arrows show how many imports cross from one area into another.

graph TD g0["components 45 modules"] g1["lib 12 modules"] g2["app 8 modules"] g3["providers 6 modules"] g4["hooks 3 modules"] g5["(root) 2 modules"] g2 -->|1| g3

Module dependencies

The 10 most depended-upon modules of 78, from static import analysis. Red outline marks a module in an import cycle.

graph LR n0_ponents_nodes_model_selector["model-selector"] n1_components_nodes_image_index["index"] n2_components_nodes_text_index["index"] n3_components_nodes_video_index["index"] n4_components_ui_button["button"] n5_components_ui_tooltip["tooltip"] n6_components_nodes_layout["layout"] n7_components_nodes_index["index"] n8_onents_nodes_image_transform["transform"] n9_ponents_nodes_text_primitive["primitive"] n1_components_nodes_image_index --> n8_onents_nodes_image_transform n8_onents_nodes_image_transform --> n0_ponents_nodes_model_selector n8_onents_nodes_image_transform --> n1_components_nodes_image_index n7_components_nodes_index --> n1_components_nodes_image_index n7_components_nodes_index --> n2_components_nodes_text_index n7_components_nodes_index --> n3_components_nodes_video_index n0_ponents_nodes_model_selector --> n4_components_ui_button n0_ponents_nodes_model_selector --> n5_components_ui_tooltip n2_components_nodes_text_index --> n9_ponents_nodes_text_primitive n9_ponents_nodes_text_primitive --> n6_components_nodes_layout n9_ponents_nodes_text_primitive --> n2_components_nodes_text_index classDef cyc stroke:#ef4444,stroke-width:2px; class n1_components_nodes_image_index,n2_components_nodes_text_index,n3_components_nodes_video_index,n8_onents_nodes_image_transform,n9_ponents_nodes_text_primitive cyc;

Dependencies

11 of 60 declared dependencies are a major version behind. Resolved 60 of 60 against the registry.

Package	Declared	Latest	Behind
`react-dropzone`	^15.0.0	20.1.0	5 major
`@vercel/blob`	^0.27.0	2.8.0	2 major
`typescript`	^5	7.0.2	2 major
`@ai-sdk/gateway`	^3.0.53	4.0.52	1 major
`@ai-sdk/react`	^3.0.97	4.0.69	1 major
`@vercel/analytics`	^1.6.1	2.0.1	1 major
`ai`	^6.0.95	7.0.66	1 major
`lucide-react`	^0.563.0	1.31.0	1 major