Typescript

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 install @boundaryml/baml
3

Add BAML to your existing project

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

$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.

$npx baml-cli generate

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