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:

  1. Add an Image node (uploads a picture).
  2. Connect it to a Text node (generates a caption using a LLM).
  3. 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.tsx and components/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.6 has 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.