The Problem
Developers building AI‑augmented products need a low‑code way to prototype multi‑model pipelines, but wiring HTTP calls, handling streaming responses, and persisting canvas state are repetitive and error‑prone.
What This Does
tersa ships a browser‑based visual workflow editor built on Next.js 15 and React 19. The UI lives in components/ai-elements/ (canvas, nodes, toolbar) and in the Kibo UI wrapper (components/kibo-ui/editor/index.tsx). Core node types are under components/nodes/ – image, text, video – each exposing an index.tsx entry that renders the node UI and hooks into the AI SDK gateway. Server‑side helpers for media handling live in app/api/ (chat/route.ts, upload/route.ts) and action files in app/actions/image/ for creating, editing, and describing images. The project is managed with pnpm and CI runs on GitHub Actions.
How It Is Wired
Execution starts when Next.js renders app/page.tsx, which composes the top‑level layout (app/layout.tsx) and injects the canvas component components/ai-elements/canvas.tsx. The canvas uses ReactFlow to instantiate node components from components/nodes/. Each node imports its own UI (index.tsx) and shared utilities (primitive.tsx, transform.tsx).
When a user triggers a model call (e.g., via the toolbar), the UI dispatches an async action defined in app/actions/image/*.ts. These actions call the Vercel AI SDK (@ai-sdk/gateway) and store results in the browser’s local storage (handled by components/ai-elements/connection.tsx).
API routes in app/api/ expose two external endpoints:
chat/route.ts– forwards chat messages to the gateway.upload/route.ts– stores binary blobs using Vercel Blob (@vercel/blob).
The import graph contains 78 internal modules with 44 edges; nine modules form circular dependencies, notably components/nodes/image/index.tsx, components/nodes/text/index.tsx, and components/nodes/video/index.tsx. These cycles inflate the blast radius of any change to shared types or utilities. The most connected module, components/nodes/model-selector, is imported by three modules and imports three others, giving it an instability score of 0.5. components/canvas has no inbound imports but imports five others, indicating a potential hidden dependency hub.
The largest file, components/kibo-ui/editor/index.tsx (1,727 lines), aggregates editor state, drag‑and‑drop handling, and model selection, making it a single point of failure for UI changes.
How To Use It
# Clone the exact repo
git clone https://github.com/moses-y/tersa.git
cd tersa
# Install with pnpm (as declared in package.json)
pnpm install
# Create a .env.local with your Vercel AI SDK Gateway token and any provider keys
# (the README points to this file, but variable names are not hard‑coded)
# Start the dev server
pnpm dev
Open http://localhost:3000. The canvas appears; drag nodes from the toolbar, select models, and hit Run. API calls are routed through app/api/chat/route.ts and media uploads via app/api/upload/route.ts.
Real‑World Use
A product team can prototype a “caption‑then‑generate‑video” pipeline:
- Add an Image node (uploads a picture).
- Connect it to a Text node (generates a caption using a LLM).
- Feed the caption into a Video node (creates a short clip via a diffusion model).
The flow runs entirely in the browser, with intermediate results streamed back from the AI SDK gateway and persisted locally for quick iteration.
Code Health & Issues
Measured findings (static analysis)
- High – Cognitive load: Deep nesting (max indent = 8) in
components/nodes/model-selector.tsxandcomponents/nodes/text/transform.tsx. - High – Soundness: Import cycles involving nine files (e.g.,
components/nodes/image/index.tsx). - High – Clarity: Repeated 6‑line blocks across 21 files (e.g.,
app/actions/image/*.ts). - High – Cognitive load: Oversized editor (
components/kibo-ui/editor/index.tsx, 1,727 lines).
Code‑health audit
- High – Pin third‑party actions to commit SHAs (
.github/workflows/release.yml). - High – Dependency
next@16.1.6has a published CVE (upgrade required). - High – No test suite (78 source files, zero test files).
- Medium – No dependency‑vulnerability scan in CI.
- Medium – Checkout step keeps credentials; set
persist-credentials: false. - Low – Workflow jobs lack
timeout-minutes. - Low – Missing convention files (
.editorconfig,.gitattributes, formatter config).
Other hygiene facts: CI is present, a license file exists, lockfile is committed, and no secrets were found.
The Bottom Line
tersa delivers a functional, visual AI workflow builder that integrates tightly with Vercel’s AI SDK and Blob storage. It’s usable out‑of‑the‑box for rapid prototyping, but the codebase suffers from deep nesting, import cycles, and a lack of automated testing, which raise maintenance risk. Teams comfortable with refactoring and adding a test harness can extract value quickly; others should weigh the effort required to resolve the identified health issues.