React/Next.js Setup

Create a New Next.js Project

First, create a new Next.js project with the App Router:

$
npx create-next-app@latest my-baml-app

When prompted, make sure to:

• Select Yes for “Would you like to use TypeScript?”
• Select Yes for “Would you like to use the App Router? (recommended)”
• Configure other options as needed for your project

Install Dependencies

Next, install BAML and its dependencies:

$
npm install @boundaryml/baml @boundaryml/baml-nextjs-plugin

Configure Next.js

Update your next.config.mjs:

1
import { withBaml } from '@boundaryml/baml-nextjs-plugin';
2
import type { NextConfig } from 'next';
3
4
const nextConfig: NextConfig = {
5
  // ... existing config
6
};
7
8
export default withBaml()(nextConfig);

Initialize BAML

Create a new BAML project in your Next.js application:

$
npx baml-cli init

This will create a baml_src directory with starter code.

Setup Environment Variables

Setup provider specific API Keys.

1
OPENAI_API_KEY=sk-...

1
BOUNDARY_API_KEY=your_api_key_here
2
3
OPENAI_API_KEY=sk-...

Setup BAML Next.js Generator

Update the baml_src/generators.baml file to use the React/Next.js generator.

1
generator typescript {
2
-  output_type "typescript"
3
+  output_type "typescript/react"
4
  output_dir "../"
5
  version "0.76.2"
6
}

Generate BAML Client

$
npx baml-cli generate

1
generator typescript {
2
  ...
3
  module_format "esm" // the default is "cjs" for CommonJS
4
}

Generated React Hooks

BAML automatically generates type-safe Next.js server actions and React hooks for your BAML functions.

1
class Story {
2
  title string @stream.not_null
3
  content string @stream.not_null
4
}
5
6
function WriteMeAStory(input: string) -> Story {
7
  client "openai/gpt-5"
8
  prompt #"
9
    Tell me a story
10
11
    {{ ctx.output_format() }}
12
13
    {{ _.role("user") }}
14
15
    Topic: {{input}}
16
  "#
17
}

Update Package Scripts

Update your package.json scripts:

1
{
2
  "scripts": {
3
    "prebuild": "npm run generate",
4
    "generate": "baml-cli generate",
5
    "dev": "next dev",
6
    "build": "next build",
7
    "start": "next start",
8
  }
9
}