TypeScript

Here’s a sample repository: https://github.com/BoundaryML/baml-examples/tree/main/nextjs-starter

To set up BAML in typescript do the following:

1

Install BAML VSCode Extension

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

  • syntax highlighting
  • testing playground
  • prompt previews
2

Install baml

$npm install @boundaryml/baml
3

Add some starter code

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

$npx baml-cli init
4

Update your package.json

This command will help you convert .baml files to .ts files. Everytime you modify your .baml files, you must re-run this command, and regenerate the baml_client folder.

Our VSCode extension automatically runs this command when you save a BAML file.

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}
5

Use a baml function in typescript!

If baml_client doesn’t exist, make sure to run npm run baml-generate
index.ts
1import {b} from "baml_client"
2import type {Resume} from "baml_client/types"
3
4async function Example(raw_resume: string): 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): 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.get_final_response();
19}