Open source

I kept building the same four things for clients, so I put them in the open.

Agent framework and test harness on LangGraph.js

An agent is a folder.

Every agent project I joined rebuilt the same plumbing. b4 is that plumbing, done once: the agent in TypeScript, tools as plain functions, limits you set, and evals that run without an API key.

npm create b4-app@latest my-agent

311 stars · 5,950 downloads a month

b4.run Docs GitHub

import { agent } from "@b4run/sdk"

export default agent({
  model: "gpt-5-mini",
  systemPrompt: "You are a friendly assistant. Use greet to greet people by name.",
})

/** Greet someone by name. */
export default async (input: { readonly name: string }) => {
  return { message: `Hello, ${input.name}!` }
}

import { contains, defineEval } from "@b4run/evals"
import { script } from "@b4run/testing"

export default defineEval({
  name: "greets by name",
  dataset: [
    {
      name: "ada",
      input: "Say hello to Ada",
      fixtures: script().user("Say hello to Ada").replies("Hello, Ada!"),
    },
  ],
  scorers: [contains("Hello", { threshold: 1 })],
  threshold: 1,
})

The b4 scaffold in a terminal: my-agent with src/app/hello holding index.ts, tools/greet.ts and evals/smoke.eval.ts

index.ts: the model and the prompt

You keep the graph

It runs on LangGraph.js, and you pick the shape per route.

Add a file, get a feature

Add plan.md and it plans. Add memory.ts and it remembers. Add a subagent to hand work off.

Formerly Dawn

Same project, new name. The docs and the scaffold live at b4.run.

threadplane

Agent UI for Angular on LangGraph and AG-UI

Agent UI for Angular, with nothing between your users and your agent.

Durable threads, interrupts and approvals, tool progress, subagents and generative UI, on LangGraph or any AG-UI endpoint. It’s built on hashbrown. Angular today, React in preview.

npm i @threadplane/chat @threadplane/langgraph

65 stars · 1,156 downloads a month

threadplane.ai Docs GitHub

// LangGraph Platform, or a local `langgraph dev` server
import { provideAgent } from '@threadplane/langgraph';

provideAgent({ apiUrl: 'http://localhost:2024', assistantId: 'agent' });

import { Component } from '@angular/core';
import { injectAgent } from '@threadplane/langgraph';
import { ChatComponent } from '@threadplane/chat';

@Component({
  imports: [ChatComponent],
  template: `<chat [agent]="agent" />`,
})
export class SupportAgentComponent {
  protected readonly agent = injectAgent();
}

import { provideViews, views } from '@threadplane/render';

provideViews(views({ KpiCard: KpiCardComponent, DisruptionsTable: DisruptionsTableComponent }));

threadplane rendering a generated airline operations dashboard after four tool calls

Tool calls streaming from the agent

LangGraph or AG-UI

The same chat works against either backend.

Built on hashbrown

Generative UI comes from the framework I co-created.

Angular first

Angular today, React in preview.

Chat, generative UI and in-browser agents for Angular and React

Let the model render your components.

The first generative UI framework built for Angular, co-created in 2025 and now on React too. You expose components and tools; the model picks what to show, in the browser, with any provider.

npm i @hashbrownai/{core,angular,openai}

727 stars · 21,483 downloads a month

hashbrown.dev Docs GitHub

export const invoiceKit = createUiKit({
  components: [
    exposeComponent(InvoiceCard, {
      description: 'Show one invoice',
      input: { id: s.string('Invoice id') },
    }),
  ],
});

chat = uiChatResource({
  system: 'Help users understand invoices.',
  components: [invoiceKit],
  tools: [
    createTool({
      name: 'getInvoices',
      description: 'List the invoices',
      handler: () => inject(InvoiceApi).list(),
    }),
  ],
});

@for (message of chat.value(); track $index) {
  <hb-render-message [message]="message" />
}

An invoicing app with a hashbrown assistant beside it, answering with an invoice table and an aging chart

Components the model chose to render

Headless

Your design system, your components. No widget to restyle.

Any provider

OpenAI, Anthropic, Gemini, Bedrock, Azure, Ollama, local models.

Speaks AG-UI

v0.6 talks to any AG-UI endpoint end to end.

pretable

Streaming-first React data grid

A data grid for data that won’t sit still.

A streaming-first React grid for live, agent-augmented data: wrapped text, variable row heights, and published benchmarks with the caveats attached. Early days.

npm install @pretable/react @pretable/ui

2 stars · 4,170 downloads a month

pretable.ai Docs GitHub

queue.tsx

import {
  Pretable,
  type PretableColumn,
  type PretableRow,
} from "@pretable/react";

const columns: PretableColumn[] = [
  { id: "name", header: "Name", value: (row) => row.name },
  { id: "role", header: "Role", value: (row) => row.role },
  { id: "notes", header: "Notes", value: (row) => row.notes },
];

const rows: PretableRow[] = [
  {
    id: "1",
    name: "Ada",
    role: "Engineer",
    notes: "Investigating a long-running eval with wrapped explanation text.",
  },
  {
    id: "2",
    name: "Grace",
    role: "Operator",
    notes: "Triaging streamed tool-call output across several retries.",
  },
];

export function Queue() {
  return (
    <Pretable
      rows={rows}
      columns={columns}
      getRowId={(row) => String(row.id)}
    />
  );
}

import {
  Pretable,
  type PretableColumn,
  type PretableRow,
} from "@pretable/react";

const columns: PretableColumn[] = [
  { id: "name", header: "Name", value: (row) => row.name },
  { id: "role", header: "Role", value: (row) => row.role },
  { id: "notes", header: "Notes", value: (row) => row.notes },
];

const rows: PretableRow[] = [
  {
    id: "1",
    name: "Ada",
    role: "Engineer",
    notes: "Investigating a long-running eval with wrapped explanation text.",
  },
  {
    id: "2",
    name: "Grace",
    role: "Operator",
    notes: "Triaging streamed tool-call output across several retries.",
  },
];

export function Queue() {
  return (
    <Pretable
      rows={rows}
      columns={columns}
      getRowId={(row) => String(row.id)}
    />
  );
}

import {
  Pretable,
  type PretableColumn,
  type PretableRow,
} from "@pretable/react";

const columns: PretableColumn[] = [
  { id: "name", header: "Name", value: (row) => row.name },
  { id: "role", header: "Role", value: (row) => row.role },
  { id: "notes", header: "Notes", value: (row) => row.notes },
];

const rows: PretableRow[] = [
  {
    id: "1",
    name: "Ada",
    role: "Engineer",
    notes: "Investigating a long-running eval with wrapped explanation text.",
  },
  {
    id: "2",
    name: "Grace",
    role: "Operator",
    notes: "Triaging streamed tool-call output across several retries.",
  },
];

export function Queue() {
  return (
    <Pretable
      rows={rows}
      columns={columns}
      getRowId={(row) => String(row.id)}
    />
  );
}

The pretable demo grid of stock positions, with prices and day P&L ticking

Columns, defined in code

Built for streaming

Made for rows that change while you watch.

Text that wraps

Variable row heights and wrapped text, no fixed row height.

Benchmarks in the open

n=3 medians against AG Grid, MUI X and TanStack, with the caveats.

Releases

b4.runB4 v0.13.12026-10-02
threadplanev0.3.12026-10-08
hashbrownv0.6.12026-09-24
pretable@pretable/ui@0.20.22026-09-17

Open source by LiveLoveApp, published as cacheplane on GitHub. hashbrown lives under the liveloveapp organization.

Shipping one of these inside a large app?

Email brian@liveloveapp.com or book 30 minutes. I reply within a business day.