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