Skip to main content
The JSX API uses TSX to define workflows and the AI SDK to call models. The fastest setup is the schema-driven API with createSmithers(...).

Prerequisites

Install

Install the core JSX dependencies:
bun add smithers-orchestrator ai @ai-sdk/anthropic zod
Add TypeScript and the extra type packages the current smithers-orchestrator exports need for tsc --noEmit:
bun add -d typescript @types/bun @types/ws @types/diff
You do not need to add @types/react or @types/react-dom separately just to use the Smithers JSX runtime.

TypeScript Configuration

Create a tsconfig.json like this:
{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "lib": ["ESNext", "DOM", "DOM.Iterable"],
    "moduleResolution": "bundler",
    "jsx": "react-jsx",
    "jsxImportSource": "smithers-orchestrator",
    "strict": true,
    "noEmit": true,
    "skipLibCheck": true
  }
}
jsxImportSource is the key setting. TypeScript resolves it through the exported smithers-orchestrator/jsx-runtime and smithers-orchestrator/jsx-dev-runtime entry points.

Project Shape

A minimal JSX workflow project usually looks like this. For a larger production layout, see Project Structure:
my-workflow/
  package.json
  tsconfig.json
  workflow.tsx
  main.ts

Optional: MDX Prompt Files

If you want MDX prompt templates in .mdx files, register the MDX preload plugin:
// preload.ts
import { mdxPlugin } from "smithers-orchestrator";

mdxPlugin();
# bunfig.toml
preload = ["./preload.ts"]
And add the MDX types:
bun add -d @types/mdx

Verify the Setup

Once TypeScript and JSX are configured, run the typecheck to validate your setup:
bunx tsc --noEmit
Then run the sample workflow:
bun run main.ts
If you want to verify the CLI entrypoint too:
bunx smithers-orchestrator --help

Next Steps