For AI agents: a documentation index is available at the root level at /llms.txt and /llms-full.txt. Append /llms.txt to any URL for a page-level index, or .md for the markdown version of any page.
Help on Discord
HomeGuideExamplesBAML ReferencePlaygroundAgents.mdChangelog
HomeGuideExamplesBAML ReferencePlaygroundAgents.mdChangelog
  • Introduction
    • What is BAML?
    • Why BAML?
    • What's the baml_src folder
    • What's baml_client
  • Installation: Editors
    • VSCode Extension
    • Cursor Extension
    • JetBrains IDEs
    • Zed
    • Claude Code
    • Others
  • Installation: Language
    • Python
    • Typescript
    • Go
    • Ruby
    • Rust
    • REST API (other languages)
    • Elixir
  • Framework Integration
  • Development
    • Environment Variables
    • Terminal Logs
    • Upgrade BAML versions
  • BAML Basics
    • Prompting with BAML
    • Switching LLMs
    • Testing functions
    • Streaming
    • Multi-Modal (Images / Audio)
    • Error Handling
    • Configuring Timeouts
    • Concurrent Calls
    • AbortSignal / Cancellation
  • BAML Advanced
    • Collector (track tokens)
    • LLM Client Registry
    • Dynamic Types
    • Reusing Prompt Snippets
    • Prompt Caching / Message Role Metadata
    • Checks and Asserts
    • Modular API
    • Prompt Optimization
  • Boundary Cloud
  • Comparisons
    • BAML vs Langchain
    • BAML vs Marvin
    • BAML vs Ai-SDK
    • BAML vs OpenAI SDK
    • BAML vs Pydantic
    • Contact
Help on Discord
LogoLogo
Installation: Language

Typescript

Was this page helpful?
Edit this page
Previous

Go

Next
Built with
You can check out this repo: https://github.com/BoundaryML/baml-examples/tree/main/nextjs-starter

To set up BAML with Typescript do the following:

1

Install BAML VSCode/Cursor Extension

https://marketplace.visualstudio.com/items?itemName=boundary.baml-extension

  • syntax highlighting
  • testing playground
  • prompt previews
2

Install BAML

npm
pnpm
yarn
bun
deno
npm
$npm install @boundaryml/baml
3

Add BAML to your existing project

This will give you some starter BAML code in a baml_src directory.

npm
pnpm
yarn
bun
deno
npm
$npx baml-cli init
4

Generate the baml_client typescript package from .baml files

One of the files in your baml_src directory will have a generator block. This tells BAML how to generate the baml_client directory, which will have auto-generated typescript code to call your BAML functions.

npm
pnpm
yarn
bun
deno
npm
$npx baml-cli generate

If you need baml_client to be ‘ESM’ compatible, you can add the following generator configuration to your .baml file:

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

You can modify your package.json so you have a helper prefix in front of your build command.

package.json
1{
2 "scripts": {
3 // Add a new command
4 "baml-generate": "baml-cli generate",
5 // Always call baml-generate on every build.
6 "build": "npm run baml-generate && tsc --build",
7 }
8}

See What is baml_src to learn more about how this works.

If you set up the VSCode extension, it will automatically run baml-cli generate on saving a BAML file.

5

Use a BAML function in Typescript!

If baml_client doesn’t exist, make sure to run the previous step!
Async
Sync
index.ts
1import { b } from "./baml_client"
2import type { Resume } from "./baml_client/types"
3
4async function Example(raw_resume: string): Promise<Resume> {
5 // BAML's internal parser guarantees ExtractResume
6 // to be always return a Resume type
7 const response = await b.ExtractResume(raw_resume);
8 return response;
9}
10
11async function ExampleStream(raw_resume: string): Promise<Resume> {
12 const stream = b.stream.ExtractResume(raw_resume);
13 for await (const msg of stream) {
14 console.log(msg) // This will be a Partial<Resume> type
15 }
16
17 // This is guaranteed to be a Resume type.
18 return await stream.getFinalResponse();
19}