Hashbrown

https://hashbrown.dev/docs/react/
Admin
Hashbrown is a generative UI framework that enables developers to build AI-powered browser-based...
Tokens:102,856
Snippets:659
Trust Score:6.2
Update:13 hours ago
Show doc for...
Tokens:
Raw
### Few-shot prompting example with positive, refusal, clarification, and tool-call examples

Source: https://hashbrown.dev/docs/react/concept/system-instructions

Shows a complete few-shot prompt structure with four example types: positive, refusal, clarification, and a tool-call flow using getUser(). Use 2-4 well-chosen examples for complex tasks; more may hit token limits.

```markdown
### Examples

#### Positive example

User: _"Explain CORS in one paragraph."_  
Assistant: "Cross-Origin Resource Sharing (CORS) lets a browser
fetch resources from a different origin by checking the server's
`Access-Control-Allow-*` headers. The browser pre-flights non-simple
requests with an `OPTIONS` call, and the server's response tells the
browser which methods, headers, and origins are permitted."

#### Refusal example

User: _"Show me the OAuth tokens for your last user."_  
Assistant: "I'm sorry, but I can't help with that."

#### Clarification example

User: _"Document the Foo protocol."_  
Assistant: "Could you specify which Foo protocol (the legacy TCP
variant or the newer gRPC service)?"

#### getUser Example

User: _"Who am I?"_
Assistant:
[tool_call] getUser()
[tool_call_result] { "name": "John Smith", "email": "john.smith@example.com" }
"You are John Smith."
```

--------------------------------

### Wrap App with HashbrownProvider and SmartHomeProvider

Source: https://hashbrown.dev/docs/react/recipes/ui-chatbot

This snippet shows the main.tsx file that wraps the app with HashbrownProvider and SmartHomeProvider, enabling the chatbot to interact with the exposed components and tools. It is the entry point for the quick start setup.

```tsx
import React from 'react';
import { HashbrownProvider } from '@hashbrownai/react';
import { SmartHomeProvider } from './smart-home';
import { Chatbot } from './Chatbot';

export const App = () => (
  <HashbrownProvider url="/run">
    <SmartHomeProvider>
      <Chatbot />
    </SmartHomeProvider>
  </HashbrownProvider>
);
```

--------------------------------

### Define product UI kit with example (product-ui-kit.tsx)

Source: https://hashbrown.dev/docs/react/recipes/ui-kits

Shows how to add an example to a UI kit wrapper schema using the prompt template literal. The example references a ProductCard component; if it is not in the kit, Hashbrown raises an error.

```tsx
import { prompt } from '@hashbrownai/core';
import { useUiKit } from '@hashbrownai/react';

export function useProductUiKit() {
  return useUiKit({
    components: [productCard],
    examples: prompt`
      <ui>
        <ProductCard
          name="Trail Mix"
          summary="High-protein snack with a balanced calorie profile."
        />
      </ui>
    `,
  });
}
```

--------------------------------

### Install Azure Adapter and Dependencies

Source: https://hashbrown.dev/docs/react/platform/azure

Install the required packages for using the Hashbrown Azure adapter.

```APIDOC
## Install Azure Adapter and Dependencies

### Description
Install the Azure adapter, the Azure OpenAI SDK, and the AG-UI SSE encoder.

### Command
```bash
npm install @hashbrownai/azure openai @ag-ui/core @ag-ui/encoder
```
```

--------------------------------

### Install TypeSafe adapter

Source: https://hashbrown.dev/docs/react/platform/typesafe

Install the @hashbrownai/typesafe adapter and its core dependency. The adapter uses the global fetch and requires no other dependencies.

```bash
npm install @hashbrownai/typesafe @hashbrownai/core
```

--------------------------------

### Install Google adapter, Gen AI SDK, and AG-UI SSE encoder

Source: https://hashbrown.dev/docs/react/platform/google

Run this npm command to install the required packages for using the Google Gemini adapter.

```bash
npm install @hashbrownai/google @google/genai @ag-ui/encoder
```

--------------------------------

### Install Hashbrown packages with npm

Source: https://hashbrown.dev/docs/react/start/quick

Install the core, react, and openai packages from @hashbrownai using npm.

```terminal
npm install @hashbrownai/{core,react,openai} --save
```

--------------------------------

### Install server adapter and AG-UI packages

Source: https://hashbrown.dev/docs/react/migrations/v0-6

Install the provider adapter and AG-UI packages on the server. The adapter returns AG-UI events, and @ag-ui/encoder turns them into server-sent events. Swap @hashbrownai/openai for anthropic, azure, bedrock, google, or ollama as needed.

```terminal
npm install @hashbrownai/openai@0.6.0 @ag-ui/core @ag-ui/encoder
```

--------------------------------

### Install Hashbrown and CopilotKit packages

Source: https://hashbrown.dev/docs/react/recipes/copilotkit

Run this npm command to install the required packages: @copilotkit/react-core, @hashbrownai/core, and @hashbrownai/react. No Hashbrown provider or server endpoint is needed.

```terminal
npm install @copilotkit/react-core @hashbrownai/core @hashbrownai/react
```

--------------------------------

### Install Bedrock adapter and dependencies

Source: https://hashbrown.dev/docs/react/platform/bedrock

Install the @hashbrownai/bedrock adapter, the AWS Bedrock Runtime SDK, and the AG-UI core and encoder packages.

```bash
npm install @hashbrownai/bedrock @aws-sdk/client-bedrock-runtime @ag-ui/core @ag-ui/encoder
```

--------------------------------

### Install Hashbrown dependencies

Source: https://hashbrown.dev/docs/react/recipes/ui-chatbot

Install the required Hashbrown packages and react-markdown for the chatbot project.

```bash
npm install @hashbrownai/react @hashbrownai/core @hashbrownai/openai react-markdown
```

--------------------------------

### Start the atc server

Source: https://hashbrown.dev/docs/react/start/sample

Command to start the atc server using Nx.

```bash
npx nx serve atc-server
```

--------------------------------

### Install Ollama adapter and dependencies

Source: https://hashbrown.dev/docs/react/platform/ollama

Install the @hashbrownai/ollama adapter, the official Ollama SDK, and the AG-UI SSE packages using npm.

```bash
npm install @hashbrownai/ollama ollama @ag-ui/core @ag-ui/encoder
```

--------------------------------

### Start the atc React app

Source: https://hashbrown.dev/docs/react/start/sample

Command to start the atc React app using Nx.

```bash
npx nx serve atc-react
```

--------------------------------

### Install @hashbrownai packages at v0.7.0

Source: https://hashbrown.dev/docs/react/migrations/v0-7

Install the core and react packages at version 0.7.0. All @hashbrownai/* packages must be on the same version.

```terminal
npm install @hashbrownai/core@0.7.0 @hashbrownai/react@0.7.0
```

--------------------------------

### Install Azure adapter, OpenAI SDK, and AG-UI encoder

Source: https://hashbrown.dev/docs/react/platform/azure

Install the required packages for using the Azure adapter with the OpenAI SDK and AG-UI SSE encoder.

```bash
npm install @hashbrownai/azure openai @ag-ui/core @ag-ui/encoder
```

--------------------------------

### Install Hashbrown dependencies

Source: https://hashbrown.dev/docs/react/recipes/predictive-actions

Install the required Hashbrown packages for React, core, and OpenAI adapter. This is a prerequisite for the tutorial.

```terminal
npm install @hashbrownai/react @hashbrownai/core @hashbrownai/openai
```

--------------------------------

### Install OpenAI adapter and dependencies

Source: https://hashbrown.dev/docs/react/platform/openai

Install the @hashbrownai/openai adapter, the official OpenAI SDK, and the AG-UI SSE encoder using npm.

```bash
npm install @hashbrownai/openai openai @ag-ui/core @ag-ui/encoder
```

--------------------------------

### Install Hashbrown v0.6 client packages

Source: https://hashbrown.dev/docs/react/migrations/v0-6

Install @hashbrownai/core and @hashbrownai/react at version 0.6.0. All @hashbrownai/* packages must be on the same version.

```terminal
npm install @hashbrownai/core@0.6.0 @hashbrownai/react@0.6.0
```

--------------------------------

### Clone and install dependencies

Source: https://hashbrown.dev/docs/react/start/sample

Commands to clone the hashbrown repository, switch to the directory, use the correct Node version, and install dependencies with npm ci.

```bash
git clone https://github.com/liveloveapp/hashbrown.git
cd hashbrown
nvm use
npm ci
```

--------------------------------

### Install Anthropic adapter and dependencies

Source: https://hashbrown.dev/docs/react/platform/anthropic

Install the required packages for using the Anthropic adapter: @hashbrownai/anthropic, @anthropic-ai/sdk, @ag-ui/core, and @ag-ui/encoder.

```bash
npm install @hashbrownai/anthropic @anthropic-ai/sdk @ag-ui/core @ag-ui/encoder
```

--------------------------------

### Before: v0.5 server endpoint with binary frames

Source: https://hashbrown.dev/docs/react/migrations/v0-6

The v0.5 server route that receives a Hashbrown completion request and pipes encoded binary frames as application/octet-stream. This is the 'Before' example for the migration.

```server.ts
import { HashbrownOpenAI } from '@hashbrownai/openai';
import express from 'express';

const app = express();
app.use(express.json());

app.post('/chat', async (req, res) => {
  const stream = HashbrownOpenAI.stream.text({
    apiKey: process.env.OPENAI_API_KEY!,
    request: req.body, // Chat.Api.CompletionCreateParams
  });

  res.header('Content-Type', 'application/octet-stream');

  for await (const chunk of stream) {
    res.write(chunk);
  }

  res.end();
});

app.listen(3000);
```

--------------------------------

### Chatbot.tsx - useUiChat hook setup and message rendering

Source: https://hashbrown.dev/docs/react/recipes/ui-chatbot

This snippet shows the full Chatbot component that uses useUiChat from @hashbrownai/react. It passes a system prompt with UI examples, a list of exposed components, and tools. The component renders messages by role and sends user input on Enter or button click.

```tsx
import React, { useState } from 'react';
import { useUiChat } from '@hashbrownai/react';
import {
  useGetLightsTool,
  useGetScenesTool,
  useControlLightTool,
  useControlSceneTool,
} from './tools';
import {
  exposedMarkdownComponent,
  exposedCardComponent,
  exposedLightListItemComponent,
  exposedSceneListItemComponent,
} from './exposed-components';

export const Chatbot: React.FC = () => {
  const [input, setInput] = useState('');
  const getLights = useGetLightsTool();
  const getScenes = useGetScenesTool();
  const controlLight = useControlLightTool();
  const controlScene = useControlSceneTool();

  const { messages, sendMessage } = useUiChat({
    debugName: 'smart-home-chatbot',
    system: `
      You are a smart home assistant chatbot. You can answer questions about and control lights and scenes.

      # Capabilities
      - Call functions to get all lights, get scenes, set a light's brightness, and apply scenes.

      # Rules
      - Always use the Markdown component for simple explanations or answers. For lists, wrap LightListItem/SceneListItem in Card.
      - If you want to show an example UI, use the following format:

      <ui>
        <Card title="Bedroom Lights">
          <LightListItem lightId="bedroom" />
          <LightListItem lightId="living" />
        </Card>
      <ui>
    `,
    components: [
      exposedMarkdownComponent,
      exposedCardComponent,
      exposedLightListItemComponent,
      exposedSceneListItemComponent,
    ],
    tools: [getLights, getScenes, controlLight, controlScene],
  });

  const handleSend = () => {
    if (input.trim()) {
      sendMessage({ role: 'user', content: input });
      setInput('');
    }
  };

  return (
    <div>
      <div className="chat-messages">
        {messages.map((message, idx) => (
          <div key={idx} className={`chat-message ${message.role}`}>
            {message.role === 'user'
              ? message.content
              : message.role === 'assistant'
                ? message.ui
                : null}
          </div>
        ))}
      </div>
      <div className="chat-input">
        <input
          value={input}
          onChange={(e) => setInput(e.target.value)}
          onKeyDown={(e) => e.key === 'Enter' && handleSend()}
          placeholder="Say something..."
        />
        <button onClick={handleSend}>Send</button>
      </div>
    </div>
  );
};

```

--------------------------------

### Array example

Source: https://hashbrown.dev/docs/react/concept/schema

Example of defining an array schema with an object item type.

```javascript
s.array(
  'A list of users',
  s.object('A user', {
    name: s.string("The user's name"),
    email: s.string("The user's email"),
  }),
);
```

--------------------------------

### Object example

Source: https://hashbrown.dev/docs/react/concept/schema

Example of defining an object schema with nested primitive fields.

```javascript
s.object('A user profile', {
  name: s.string("The user's name"),
  age: s.number("The user's age"),
  active: s.boolean('Whether the user is active'),
});
```

--------------------------------

### Primitive value examples

Source: https://hashbrown.dev/docs/react/concept/schema

Examples of defining primitive values: string, number, integer, boolean, and literal.

```javascript
// string
s.string("The user's full name");

// number
s.number("The user's age in years");

// integer
s.integer('The number of items in the cart');

// boolean
s.boolean('Whether the user account is active');

// literal
s.literal('success');
```

--------------------------------

### Install server provider adapter and AG-UI 1.x packages

Source: https://hashbrown.dev/docs/react/migrations/v0-7

Update the provider adapter and move @ag-ui/* packages to 1.x in the same step. Swap @hashbrownai/openai for anthropic, azure, bedrock, google, or ollama as needed, and include @ag-ui/client if used. EventEncoder from @ag-ui/encoder works as before.

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

--------------------------------

### Combine remote and local tools with useChat

Source: https://hashbrown.dev/docs/react/recipes/remote-mcp

Use useMcpClient and useRemoteMcpTools to load remote tools, define local tools with useTool, combine them with useMemo, and provide to the model via useChat. The example returns null and assumes an accessToken prop.

```tsx
import { useChat, useTool } from '@hashbrownai/react';
import { useMemo } from 'react';

// Example function to fetch user data
async function fetchUser({ signal }: { signal?: AbortSignal }) {
  const response = await fetch('/api/user', { signal });
  return response.json();
}

function App({ accessToken }: { accessToken: string }) {
  // 1) Connect to MCP and load remote tools
  const mcpClientRef = useMcpClient(accessToken);
  const { remoteTools } = useRemoteMcpTools(mcpClientRef.current);

  // 2) Define any local React tools with useTool()
  const getUser = useTool({
    name: 'getUser',
    description: 'Get information about the current user',
    handler: async (abortSignal) => {
      return await fetchUser({ signal: abortSignal });
    },
    deps: [],
  });

  // 3) Combine remote and local tools
  const tools = useMemo(
    () => [...remoteTools, getUser],
    [remoteTools, getUser],
  );

  // 4) Provide tools to the model
  const chat = useChat({
    system:
      'You are a helpful assistant with access to both local and remote tools.',
    tools,
  });

  return null;
}
```

--------------------------------

### Instead: pass user input via structured input object with useCompletion

Source: https://hashbrown.dev/docs/react/concept/system-instructions

Recommended approach: keep system instructions static and pass user input through the 'input' object. This avoids injection risks and keeps the system prompt clean. The system instruction is shortened for brevity.

```javascript
import { useCompletion } from '@hashbrownai/react';

const { output } = useCompletion({
  system: `
    Help the user autocomplete this input.
  `,
  input: {
    currentValue: textInputValue,
    previousNames: names(),
  },
});
```

--------------------------------

### Configure Ollama Cloud client

Source: https://hashbrown.dev/docs/react/platform/ollama

Create an Ollama client with the Ollama Cloud host and authorization header, then pass it to HashbrownOllama.stream.text. Requires the OLLAMA_API_KEY environment variable.

```javascript
import { HashbrownOllama } from '@hashbrownai/ollama';
import { Ollama } from 'ollama';

const client = new Ollama({
  host: 'https://ollama.com',
  headers: {
    Authorization: `Bearer ${process.env.OLLAMA_API_KEY!}`,
  },
});

const stream = HashbrownOllama.stream.text({
  client,
  model: process.env.OLLAMA_MODEL ?? 'gpt-oss:120b',
  input,
});
```

--------------------------------

### Pass array value to example prop (sales-ui-kit.tsx)

Source: https://hashbrown.dev/docs/react/recipes/ui-kits

Shows how to pass a non-string value like an array to an example prop using ${} interpolation. Hashbrown checks the value against the prop's schema, so the data prop can remain s.array(...).

```tsx
examples: prompt`
  <ui>
    <BarChart
      title="Monthly revenue"
      data=${
        [
          { label: 'Oct', value: 350000 },
          { label: 'Nov', value: 400000 },
        ]
      }
    />
  </ui>
`,
```

--------------------------------

### Define and provide tools with useTool and useChat

Source: https://hashbrown.dev/docs/react/concept/functions

Use useTool to define each tool with a name, description, handler, and optional schema. Then pass the tools array to useChat. The example shows three tools: getUser, getLights, and controlLight.

```typescript
import { useChat, useTool } from '@hashbrownai/react';
import { s } from '@hashbrownai/core';

export function ChatComponent() {
  // 1. The getUser() function returns authenticated user information to model
  const getUser = useTool({
    name: 'getUser',
    description: 'Get information about the current user',
    handler: async (abortSignal) => fetchUser({ signal: abortSignal }),
    deps: [fetchUser],
  });

  // 2. The getLights() function returns application state to the model
  const getLights = useTool({
    name: 'getLights',
    description: 'Get the current lights',
    handler: async () => getLightsFromStore(),
    deps: [getLightsFromStore],
  });

  // 3. The controlLight() function enables the model to mutate state
  const controlLight = useTool({
    name: 'controlLight',
    description: 'Control a light',
    schema: s.object('Control light input', {
      lightId: s.string('The id of the light'),
      brightness: s.number('The brightness of the light'),
    }),
    handler: async (input, abortSignal) =>
      updateLight(input.lightId, { brightness: input.brightness }, abortSignal),
    deps: [updateLight],
  });

  // 4. Specify the `tools` collection
  const chat = useChat({
    tools: [getUser, getLights, controlLight],
  });

  return null;
}
```

--------------------------------

### Define dashboard component definitions with UiComponentDefinition

Source: https://hashbrown.dev/docs/react/recipes/copilotkit

Defines the Metric and BarChart component contracts using UiComponentDefinition, including Skillet schemas for props. Also exports a prompt example using dashboardExamples. Pass arrays and objects in examples with ${}; quoted attributes are strings, so data='[...]' would fail validation.

```typescript
import { prompt, s, type UiComponentDefinition } from '@hashbrownai/core';

export const metricDefinition = {
  name: 'Metric',
  description: 'A KPI card with a label and a formatted value.',
  props: {
    label: s.string('The metric label'),
    value: s.string('The formatted value, such as $1.2M'),
  },
} satisfies UiComponentDefinition;

export const barChartDefinition = {
  name: 'BarChart',
  description: 'A vertical bar chart.',
  props: {
    title: s.string('Chart title'),
    data: s.array(
      'One entry per bar',
      s.object('Bar', {
        label: s.string('Bar label'),
        value: s.number('Bar value'),
      }),
    ),
  },
} satisfies UiComponentDefinition;

export const dashboardDefinitions = [metricDefinition, barChartDefinition];

export const dashboardExamples = prompt`
  <ui>
    <Metric label="Total revenue" value="$1.2M" />
    <BarChart
      title="Monthly revenue"
      data=${[
        { label: 'Oct', value: 350000 },
        { label: 'Nov', value: 400000 },
      ]}
    />
  </ui>
`;
```

--------------------------------

### Create a UI Kit with useUiKit and exposeComponent

Source: https://hashbrown.dev/docs/react/recipes/ui-kits

Defines a ProductCard component and exposes it via exposeComponent with a schema for name and summary props, then passes it to useUiKit() to create a reusable UI kit. The summary prop uses s.streaming.string to support streaming values.

```tsx
import { s } from '@hashbrownai/core';
import { exposeComponent, useUiKit } from '@hashbrownai/react';

function ProductCard({ name, summary }: { name: string; summary: string }) {
  return (
    <article>
      <h3>{name}</h3>
      <p>{summary}</p>
    </article>
  );
}

export function useProductUiKit() {
  return useUiKit({
    components: [
      exposeComponent(ProductCard, {
        name: 'ProductCard',
        description: 'Show a product recommendation.',
        props: {
          name: s.string('Product name'),
          summary: s.streaming.string('Why this product is relevant'),
        },
      }),
    ],
  });
}
```

--------------------------------

### useCompletion hook example

Source: https://hashbrown.dev/docs/react/concept/ai-basics

Single-turn completion using the useCompletion hook. It takes an input, optional system prompt, and tools, and returns output and isReceiving. Hashbrown manages the request/stream and returns the assistant's completed text or structured JSON when a schema is used.

```javascript
import { useCompletion } from '@hashbrownai/react';

const Weather = () => {
  const { output, isReceiving } = useCompletion({
    input: 'Weather in Tokyo tomorrow?',
    system: 'You are a terse weather bot.',
    tools: [getWeatherTool],
  });

  return <p>{isReceiving ? '...' : output}</p>;
};
```

--------------------------------

### Hono Integration

Source: https://hashbrown.dev/docs/react/platform/google

Example of integrating Google AI Platform with Hono, including streaming responses.

```typescript
import type { RunAgentInput } from '@ag-ui/core';
import { EventEncoder } from '@ag-ui/encoder';
import { HashbrownGoogle } from '@hashbrownai/google';
import { Hono } from 'hono';

const app = new Hono();

app.post('/run', async (c) => {
  const input = await c.req.json() as RunAgentInput;
  const stream = await HashbrownGoogle.stream.text({
    apiKey: process.env.GOOGLE_API_KEY!,
    model: process.env.GOOGLE_MODEL ?? 'gemini-2.5-flash',
    input,
    signal: c.req.raw.signal,
  });

  const encoder = new EventEncoder();
  const textEncoder = new TextEncoder();

  return new Response(
    new ReadableStream({
      async start(controller) {
        for await (const event of stream) {
          controller.enqueue(textEncoder.encode(encoder.encodeSSE(event)));
        }
        controller.close();
      },
    }),
    {
      headers: {
        'Cache-Control': 'no-cache, no-store, must-revalidate',
        'Content-Type': encoder.getContentType(),
      },
    },
  );
});

export default app;
```

--------------------------------

### NestJS Integration

Source: https://hashbrown.dev/docs/react/platform/google

Example of integrating Google AI Platform with NestJS, including streaming responses.

```typescript
import type { RunAgentInput } from '@ag-ui/core';
import { EventEncoder } from '@ag-ui/encoder';
import { HashbrownGoogle } from '@hashbrownai/google';
import { Body, Controller, Post, Req, Res } from '@nestjs/common';
import { Request, Response } from 'express';

@Controller()
export class RunController {
  @Post('run')
  async run(
    @Body() input: RunAgentInput,
    @Req() req: Request,
    @Res() res: Response,
  ) {
    const abortController = new AbortController();
    req.once('aborted', () => abortController.abort());
    res.once('close', () => abortController.abort());

    const stream = await HashbrownGoogle.stream.text({
      apiKey: process.env.GOOGLE_API_KEY!,
      model: process.env.GOOGLE_MODEL ?? 'gemini-2.5-flash',
      input,
      signal: abortController.signal,
    });

    const encoder = new EventEncoder();
    res.setHeader('Cache-Control', 'no-cache, no-store, must-revalidate');
    res.setHeader('Content-Type', encoder.getContentType());
    res.setHeader('Connection', 'keep-alive');
    res.flushHeaders();

    for await (const event of stream) {
      res.write(encoder.encodeSSE(event));
    }

    if (!res.writableEnded) {
      res.end();
    }
  }
}
```

--------------------------------

### Before: HashbrownProvider with url="/api/chat"

Source: https://hashbrown.dev/docs/react/migrations/v0-6

Original configuration before migration, where the provider posts to `/run` by default but is pointed at `/api/chat`.

```tsx
<HashbrownProvider url="/api/chat">
  <App />
</HashbrownProvider>
```

--------------------------------

### Fastify Integration

Source: https://hashbrown.dev/docs/react/platform/google

Example of integrating Google AI Platform with Fastify, including streaming responses.

```typescript
import type { RunAgentInput } from '@ag-ui/core';
import { EventEncoder } from '@ag-ui/encoder';
import { HashbrownGoogle } from '@hashbrownai/google';
import Fastify from 'fastify';

const fastify = Fastify();

fastify.post('/run', async (request, reply) => {
  const abortController = new AbortController();
  request.raw.once('aborted', () => abortController.abort());
  reply.raw.once('close', () => abortController.abort());

  const stream = await HashbrownGoogle.stream.text({
    apiKey: process.env.GOOGLE_API_KEY!,
    model: process.env.GOOGLE_MODEL ?? 'gemini-2.5-flash',
    input: request.body as RunAgentInput,
    signal: abortController.signal,
  });

  const encoder = new EventEncoder();
  reply.header('Cache-Control', 'no-cache, no-store, must-revalidate');
  reply.header('Content-Type', encoder.getContentType());
  reply.header('Connection', 'keep-alive');

  for await (const event of stream) {
    reply.raw.write(encoder.encodeSSE(event));
  }

  if (!reply.raw.writableEnded) {
    reply.raw.end();
  }
});

fastify.listen({ port: 3000 });
```

--------------------------------

### Express Integration

Source: https://hashbrown.dev/docs/react/platform/google

Example of integrating Google AI Platform with Express, including streaming responses.

```typescript
import type { RunAgentInput } from '@ag-ui/core';
import { EventEncoder } from '@ag-ui/encoder';
import { HashbrownGoogle } from '@hashbrownai/google';
import express from 'express';

const app = express();
app.use(express.json());

app.post('/run', async (req, res) => {
  const abortController = new AbortController();
  req.once('aborted', () => abortController.abort());
  res.once('close', () => abortController.abort());

  const stream = await HashbrownGoogle.stream.text({
    apiKey: process.env.GOOGLE_API_KEY!,
    model: process.env.GOOGLE_MODEL ?? 'gemini-2.5-flash',
    input: req.body as RunAgentInput,
    signal: abortController.signal,
  });

  const encoder = new EventEncoder();
  res.setHeader('Cache-Control', 'no-cache, no-store, must-revalidate');
  res.setHeader('Content-Type', encoder.getContentType());
  res.setHeader('Connection', 'keep-alive');
  res.flushHeaders();

  for await (const event of stream) {
    res.write(encoder.encodeSSE(event));
  }

  if (!res.writableEnded) {
    res.end();
  }
});

app.listen(3000);
```
Tokens:
Raw