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

  • Bun >= 1.3
  • TypeScript >= 5

​
Install

Install the core JSX dependencies: 
bun add smithers-orchestrator ai @ai-sdk/anthropic zod
Add the TypeScript and JSX type packages: 
bun add -d typescript @types/react @types/react-dom

​
TypeScript Configuration

Create a tsconfig.json like this: 
{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "moduleResolution": "bundler",
    "jsx": "react-jsx",
    "jsxImportSource": "smithers-orchestrator",
    "strict": true,
    "noEmit": true,
    "skipLibCheck": true
  }
}
jsxImportSource is the key setting. It tells TypeScript to use Smithers’ JSX runtime instead of a browser UI runtime.

​
Project Shape

A minimal JSX workflow project usually looks like this: 
my-workflow/
  package.json
  tsconfig.json
  workflow.tsx
  main.ts

​
Optional: MDX Prompt Files

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

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, continue to the quickstart and run the sample workflow: 
bun run main.ts

​
Next Steps