gengen
@moeki0/gengen

Structured output
for React apps.

Define a schema once — gengen generates the LLM system prompt and routes the response into your React components.

npm install @moeki0/gengen
Get startedAPI reference
Used byunfold.moeki.org
How it works

One schema. Three jobs done.

The same definition drives your prompt, your parser, and your renderer.

1

Define

Describe what the LLM should output using the schema DSL. Name fields and pick types.

2

Prompt

Call g.prompt() — gengen generates the exact system prompt your LLM needs.

3

Render

Pass the response to <Gengen>. It routes each block to the right React component.

// card.schema.ts
export const cardSchema = g.block('card')
  .describe('A key insight')
  .schema({ title: g.text(), body: g.text(), tags: g.list() })

// card.tsx
export const Card = cardSchema
  .component(({ title, body, tags }) => (
    <div className="card">
      <h3>{title}</h3>
      <p>{body}</p>
      <ul>{tags.map(t => <li key={t}>{t}</li>)}</ul>
    </div>
  ))

// api/route.ts
const prompt = g.prompt([cardSchema])

// page.tsx
<Gengen markdown={response} renderers={[Card]} />
Examples

See it in action

LLM output on the left, your React component on the right.

LLM writes...
### card

Why Rust is fast

Rust compiles to native machine code with zero-cost abstractions, meaning you pay only for what you use.

- performance
- systems
- memory-safe
Rendered
card

Why Rust is fast

Rust compiles to native machine code with zero-cost abstractions, meaning you pay only for what you use.

performancesystemsmemory-safe

Simple title + body card with a tag list.

LLM writes...
### compare

- Fast compile output ★
- Memory safe
- Great tooling

- Steep learning curve
- Longer compile times
Rendered
Pros
  • —Fast compile output ★
  • —Memory safe
  • —Great tooling
Cons
  • —Steep learning curve
  • —Longer compile times

Pros and cons with labeled list items.

LLM writes...
### timeline

- 1969: Moon landing
- 1991: WWW invented
- 2009: Bitcoin whitepaper
Rendered
timeline
1969Moon landing
1991WWW invented
2009Bitcoin whitepaper

Key–value lists parsed into structured objects.

Features

Everything you need

Schema DSL

Rich types: text, list, codeblock, heading, table, bool, blockquote, and inline markers.

Auto-prompts

g.prompt() turns your schema into precise LLM instructions automatically.

Smart routing

Matches markdown blocks to renderers by schema specificity, not fragile string patterns.

Flow composition

Describe response structure with prose(), loop(), and pick() for complex outputs.

Inline renderers

Custom markers within prose text — styled terms, tooltips, callouts.

TypeScript-first

Schema types are inferred automatically. Your component gets the right types.

Ready to get started?

Read the guide or browse the full API reference.

Get startedAPI reference