Perspect — Schema-to-Code Generation Tool

Schema → TypeScript · Zod · tRPC · React Forms

Paste a Prisma schema, a SQL DDL block, or a plain-English description of your data model — and get production-quality TypeScript scaffolding back: Zod validators, tRPC routers, React forms, and typed interfaces. Not toy output. Opinionated, type-safe code that reflects how modern full-stack TypeScript apps should be built.

Every TypeScript project with a database eventually writes the same boilerplate: an interface matching the schema, a Zod validator for every input shape, a tRPC router with CRUD procedures, and a form component wired up to a resolver. It’s mechanical work — low-value, high-volume, and easy to let drift out of sync with the actual schema.

Perspect eliminates that loop. You define the schema once — in the format you already have — and the scaffolding follows from it deterministically.

The core architectural decision is an intermediate representation (IR) that every input format normalizes into before any generation happens. Prisma schemas and SQL DDL go through deterministic parsers — no AI involved. Plain-English descriptions go through an LLM that outputs structured IR directly, never raw code.

Once you have the IR, code generation is scoped and predictable. The AI’s job is generating idiomatic code from clean structured data, not interpreting freeform text. TypeScript types and Zod schemas are generated entirely deterministically — no LLM call at all.

TypeScript types are generated with zero LLM involvement: enums become string literal unions, primary keys become branded ID types (UserId = string & {__brand: "UserId"}), and the generator produces full interfaces, Create/Update input types, WithRelations types for every model with a relation, and cursor-based pagination utilities.

The Prisma parser walks the schema line-by-line: model blocks, enum blocks, relation annotations, optional markers, list types, @id, @unique, and @default attributes all map to typed IR fields. SQL DDL goes through an equivalent parser that handles CREATE TABLE, column definitions, primary keys, foreign keys, and NOT NULL constraints.

TYPES TAB · branded IDs, interfaces, Create/Update inputs, WithRelations — no LLM

Four generation targets, configurable via the settings panel. Zod produces create, update, and full validation schemas with string transforms. tRPC produces a full CRUD router with cursor-based pagination, typed errors, and Zod input validation on every procedure. React Forms produces create/edit components wired to react-hook-form with a Zod resolver, or native controlled state — your choice. TypeScript Types is fully deterministic, no LLM.

Config options scope what you get: tRPC vs REST style, react-hook-form vs native state, Prisma vs Drizzle ORM style in the router, JSDoc comments on or off, and strict mode that enforces z.string().min(1) on required strings.

Perspect Zod output tab showing create, update and full validation schemas

Perspect tRPC output tab showing full CRUD router with cursor pagination

FORMS TAB · create + edit components, react-hook-form + Zod resolver, Tailwind, inline validation errors

Vercel AI SDK handles streaming and provider abstraction — swapping between Anthropic and OpenAI is a one-line config change. Streaming matters here because Zod schemas and tRPC routers for a reasonably complex model are several hundred lines; users shouldn’t wait for a full response before seeing output.

Prompt templates are structured per target, not generic. Each one receives the serialized IR and generates code for exactly one output type with consistent formatting and import conventions. The LLM is never asked to parse or interpret the schema — that already happened deterministically before the prompt is assembled.

Both the input and output panes use Monaco Editor — the same editor that powers VS Code — so you get syntax highlighting, line numbers, and keyboard shortcuts in both directions. Output is tabbed: Types, Zod, tRPC, and Forms are each accessible without leaving the page, and each tab shows the relevant generated filename.

The layout is a resizable two-pane split using react-resizable-panels, so you can give more real estate to whichever side you’re working with. Built-in example schemas let you try the tool without writing anything.