Skip to main content

Streaming Patterns

Stream responses for better user experience with long-running generations.

Basic Streaming​

import { b } from './baml_client';

const stream = b.stream.GenerateStory(topic);

for await (const chunk of stream) {
  // chunk is a partial result
  console.log(chunk.partial?.content);
}

const final = await stream.finalResponse();
// final is the complete, validated result

Structured Streaming​

BAML streams structured data as it becomes available:

class Article {
  title string
  summary string
  sections Section[]
}

class Section {
  heading string
  content string
}

function GenerateArticle(topic: string) -> Article {
  client GPT4
  prompt #"Write an article about {{ topic }}"#
}
const stream = b.stream.GenerateArticle("AI Safety");

for await (const chunk of stream) {
  // Fields populate as they're generated
  if (chunk.partial?.title) {
    updateTitle(chunk.partial.title);
  }
  if (chunk.partial?.sections) {
    updateSections(chunk.partial.sections);
  }
}

UI Integration​

function StreamingComponent({ topic }) {
  const [article, setArticle] = useState(null);

  useEffect(() => {
    const stream = b.stream.GenerateArticle(topic);

    (async () => {
      for await (const chunk of stream) {
        setArticle(chunk.partial);
      }
    })();
  }, [topic]);

  return <ArticleDisplay article={article} />;
}