hashbrown

Hashbrown v0.7 moves to AG-UI 1.0

brian

Today we are releasing Hashbrown v0.7.

The headline is AG-UI 1.0. In v0.6, we moved every connection between your app and your model onto AG-UI. In v0.7, we move from AG-UI 0.0.59 to AG-UI 1.0.

The good news: your React components and Angular resources don't change. The breaking changes land in code that talks AG-UI directly - your server routes, custom providers and custom transports.

Release at a glance

  • AG-UI 1.0 across the client, the HTTP transport and all six provider adapters.
  • createUiJsonSchema(), so an agent Hashbrown doesn't run can answer with UI your kit can render.
  • One module per file in @hashbrownai/core, so bundlers can tree-shake it again.
  • A v0.7 migration guide for React and Angular, with a prompt for your AI coding assistant.

Kudos to the AG-UI Team

Before we get into the details, a big congratulations to the AG-UI team on shipping 1.0. 🎉

Really good work.

Hitting 1.0 is a major milestone for any protocol, and it's a big deal for everyone building agent UIs on top of this one. When we moved Hashbrown onto AG-UI in v0.6, we were betting on an open protocol for connecting agents to user interfaces. A 1.0 release turns that bet into a foundation the whole community can build on with confidence.

For me, that's exactly what you want from a protocol you depend on. Thank you for all the work that went into it.

What Do I Need to Change?

Let's start with the part you need to act on.

First, update Hashbrown and AG-UI together. Hashbrown's public types, such as AGUIEvent and RunAgentInput, come from @ag-ui/core, so your own @ag-ui/* packages need to be on 1.x too:

terminal
npm install @hashbrownai/core@0.7.0 @hashbrownai/react@0.7.0
npm install @hashbrownai/openai@0.7.0 @ag-ui/core@^1 @ag-ui/encoder@^1

Swap react for angular, and openai for your provider. Then run npm ls @ag-ui/core and make sure every entry is on 1.x. Two copies of AG-UI means two incompatible AGUIEvent types, and TypeScript will let you know about it. 😆

For most apps, that's it. If you run your own AG-UI server, custom provider or custom transport, there are a few more steps:

  • Import AG-UI validators, such as RunAgentInputSchema, from @ag-ui/core/schemas.
  • Replace THINKING_* events with REASONING_* events.
  • Expect tool results that are string | ContentPart[]. Hashbrown's provider adapters accept text tool results only.
  • Treat a TEXT_MESSAGE_START without a role as an assistant message. AG-UI 1.0 no longer fills it in, and Hashbrown's reducers now apply that default themselves.

The v0.7 guide for React and for Angular walks through each one, and ends with a prompt you can hand to an AI coding assistant like Claude Code.

Use Your UI Kit with Any Agent

More and more, the agent isn't running in Hashbrown at all. It's running in LangGraph, CopilotKit, or your own server, and the browser only renders what it streams.

The question becomes: how does that agent know what UI it's allowed to render?

In v0.7, the answer is createUiJsonSchema(). It builds the same JSON Schema your kit sends to a model, from the same component definitions, without needing the components themselves.

First, keep each component's contract in one place with a UiComponentDefinition:

sales-components.ts
import { s, type UiComponentDefinition } from '@hashbrownai/core';

export const metricDefinition = {
  name: 'Metric',
  description: 'A KPI metric card.',
  props: {
    label: s.string('The metric label'),
    value: s.string('The formatted metric value'),
  },
} satisfies UiComponentDefinition;

Then, on the server, hand the schema to your model as structured output:

agent.ts
import { createUiJsonSchema } from '@hashbrownai/core';
import { metricDefinition } from './sales-components';

const uiSchema = createUiJsonSchema({ components: [metricDefinition] });

const responseFormat = {
  type: 'json_schema',
  json_schema: { name: 'ui', strict: true, schema: uiSchema },
};

A few things to note:

  • The browser exposes the component with the same definition: exposeComponent(Metric, metricDefinition).
  • The result is plain JSON. If your agent isn't written in JavaScript, write it to a file at build time and load it there.
  • If you were reaching for the internal ɵcreateUiKit to do this, switch to createUiJsonSchema(). ɵ exports can change in any release.

Read Use a Kit with an Agent Hashbrown Doesn't Run for the browser side, and the rewritten CopilotKit recipe for a complete example.

Smaller Bundles

This one is a fix I'm happy to ship.

In v0.6, an app that only renders generative UI got a lot bigger. @hashbrownai/core shipped as one large file, and a bundler can't drop the unused parts of a single file. So a renderer that only needed useUiKit and useJsonParser still pulled in the whole chat runtime, AG-UI and zod.

In v0.7, core publishes one module per source file, and we added a bundle-size test so it stays that way. In our CopilotKit renderer, the bundle fell from 244 KB to 117 KB minified.

The public API didn't change. Deep imports of files inside core's dist - which were never supported - no longer resolve.

Threadplane Moves to AG-UI 1.0, Too

Hashbrown is headless. You bring the components, and Hashbrown handles streaming, schemas, tool calling and generative UI.

Sometimes, though, your team wants the full chat UI - threads, messages, tool calls, interrupts and reasoning - ready to go. That's threadplane.

Threadplane 0.3.0 moved its AG-UI adapter to AG-UI 1.0 as well, so you can run Hashbrown and threadplane against the same AG-UI 1.0 server, with one copy of AG-UI in your app. Read the threadplane 0.3.0 announcement for the details.

Conclusion

AG-UI 1.0 gives Hashbrown a stable protocol to build on, createUiJsonSchema() lets your UI kit travel to any agent, and core is lean again.

The migration guides for React and Angular cover every change, one step at a time.

Have questions? Hit a snag while upgrading? Open an issue on GitHub and let me know!