---
title: JSX Installation
description: Install Smithers for the JSX workflow API.
---

The JSX API uses [TSX](https://react.dev/learn/writing-markup-with-jsx) to define workflows and the [AI SDK](https://ai-sdk.dev) to call models. The fastest setup is the schema-driven API with `createSmithers(...)`.

## Prerequisites

- [Bun](https://bun.sh) >= 1.3
- [TypeScript](https://www.typescriptlang.org) >= 5

## Install

Install the core JSX dependencies:

```bash
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`:

```bash
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:

```json
{
  "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](/guides/project-structure):

```txt
my-workflow/
  package.json
  tsconfig.json
  workflow.tsx
  main.ts
```

## Optional: MDX Prompt Files

If you want [MDX prompt](/guides/mdx-prompts) templates in `.mdx` files, register the MDX preload plugin:

```ts
// preload.ts
import { mdxPlugin } from "smithers-orchestrator";

mdxPlugin();
```

```toml
# bunfig.toml
preload = ["./preload.ts"]
```

And add the MDX types:

```bash
bun add -d @types/mdx
```


## Verify the Setup

Once TypeScript and JSX are configured, run the typecheck to validate your setup:

```bash
bunx tsc --noEmit
```

Then run the sample workflow:

```bash
bun run main.ts
```

If you want to verify the [CLI](/cli/overview) entrypoint too:

```bash
bunx smithers-orchestrator --help
```

## Next Steps

- [JSX Overview](/jsx/overview) — See how JSX workflows render, branch, and compose.
- [JSX Quickstart](/jsx/quickstart) — Build a working two-step workflow.
- [Project Structure](/guides/project-structure) — Organize TSX files, schemas, and prompts for larger projects.
- [MDX Prompts](/guides/mdx-prompts) — Use `.mdx` files as structured prompt templates.
- [CLI Quickstart](/cli/quickstart) — Run workflows from the CLI as well as programmatically.
- [Package Configuration](/reference/package-configuration) — Review exports, scripts, and build settings.