Hashbrown

https://hashbrown.dev/docs
Admin
Hashbrown is an open-source framework for building generative user interfaces in React and Angular...
Tokens:75,257
Snippets:716
Trust Score:6.2
Update:2 months ago
Show doc for...
Tokens:
Raw
### Install Dependencies

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

Navigate to the project directory and install required dependencies.

```bash
cd Hashbrown
npm install
```

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

### Install Google Adapter

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

Install the required package via npm.

```bash
npm install @hashbrownai/google
```

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

### Install Hashbrown Packages

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

Install the core, angular, and openai packages for Hashbrown.

```bash
npm install @hashbrownai/{core,angular,openai} --save
```

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

### Install Writer Adapter

Source: https://hashbrown.dev/docs/angular/platform/writer

Command to install the required Writer adapter package for Hashbrown.

```bash
npm install @hashbrownai/writer
```

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

### Install Azure Adapter

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

Install the required package to enable Azure OpenAI support in your project.

```bash
npm install @hashbrownai/azure
```

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

### Start the Application

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

Launch both the server and the Angular client using Nx commands.

```bash
npx nx serve smart-home-server
npx nx serve smart-home-angular
```

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

### Define a UI Kit with Examples

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

Use the examples property within useUiKit to provide structured UI guidance for the model.

```typescript
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 OpenAI Adapter

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

Install the required package to enable OpenAI integration in your project.

```bash
npm install @hashbrownai/openai
```

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

### Install Anthropic Adapter

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

Install the required adapter and the Anthropic SDK peer dependency.

```bash
npm install @hashbrownai/anthropic @anthropic-ai/sdk
```

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

### Install Ollama adapter

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

Install the required npm package to enable Ollama support in your project.

```bash
npm install @hashbrownai/ollama
```

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

### Install Amazon Bedrock Adapter

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

Use this command to install the required package for Amazon Bedrock support.

```bash
npm install @hashbrownai/bedrock
```

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

### Define a UI Kit with Examples

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

Use the createUiKit function to define components and provide examples that validate against the kit schema.

```typescript
import { prompt } from '@hashbrownai/core';
import { createUiKit } from '@hashbrownai/angular';

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

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

### Implement a Remote MCP Server with Express

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

This example demonstrates setting up an Express-based MCP server with session-based transport and tool registration.

```typescript
import { HashbrownOpenAI } from '@hashbrownai/openai';
import { McpServer } from '@modelcontextprotocol/sdk/server/mcp.js';
import { StreamableHTTPServerTransport } from '@modelcontextprotocol/sdk/server/streamableHttp.js';

// 1. Create an express server
const app = express();
app.use(
  cors({
    origin: '*',
    exposedHeaders: ['Mcp-Session-Id'],
    allowedHeaders: ['*'],
  }),
);
app.use(
  express.json({
    limit: '30mb',
  }),
);

// 2. Define the response deserializer
class UnhealthyResponseDeserializer implements IResponseDeserializer {
  async deserialize<T>(response: Response): Promise<T> {
    const text = await response.text();
    if (text.length > 0) {
      try {
        const json = JSON.parse(text) as T;
        return json;
      } catch (e: any) {
        console.error(e);
      }
    }

    return null as T;
  }
}

// 3. Define helper function to decode the bearer token
function getAccessToken(context: any): string {
  // check for auth token on request headers
  const authToken = context.requestInfo.headers['authorization'];
  if (!authToken) {
    throw new Error('No authorization token provided');
  }

  // decode the token
  const decoded = decodeURIComponent(authToken.split(' ')[1]);
  return decoded;
}

// 4. Create a remote MCP server
const mcpServer = new McpServer({
  name: 'spotify',
  version: '1.0.0',
  description: 'Spotify server to search songs',
});

// 5. Register a tool
mcpServer.registerTool(
  'search',
  {
    title: 'search',
    description: 'Search tracks, artists or albums on Spotify',
    inputSchema: {
      query: z.string().describe('Search keywords'),
      type: z.enum(['track', 'artist', 'album']).optional(),
    },
  },
  async ({ query, type = 'track' }, context) => {
    const accessToken = getAccessToken(context);
    // TODO: integrate with spotify to search for the track
  },
);

// 6. Configure the transport
const transports: Record<string, StreamableHTTPServerTransport> = {};

function ensureTransport(sessionId: string) {
  if (transports[sessionId]) return transports[sessionId];
  const transport = new StreamableHTTPServerTransport({
    sessionIdGenerator: () => sessionId,
  });
  transports[sessionId] = transport;
  // async – never await here or you'll block the first HTTP request
  mcpServer.connect(transport).catch(console.error);
  transport.onclose = () => delete transports[sessionId];
  return transport;
}

// 7. Client → Server (JSON-RPC over HTTP POST)
app.post('/mcp', async (req, res) => {
  const sessionId = (req.headers['mcp-session-id'] as string) ?? randomUUID();
  res.setHeader('Mcp-Session-Id', sessionId);
  const transport = ensureTransport(sessionId);
  await transport.handleRequest(req, res, req.body);
});

// 8. Server → Client notifications
app.get('/mcp', async (req, res) => {
  const sessionId = (req.headers['mcp-session-id'] as string) ?? randomUUID();

  res.setHeader('Mcp-Session-Id', sessionId);

  const transport = ensureTransport(sessionId);
  await transport.handleRequest(req, res);
});

// 9. Disconnect
app.delete('/mcp', async (req, res) => {
  const sessionId = req.headers['mcp-session-id'] as string;
  if (sessionId && transports[sessionId]) {
    await transports[sessionId].close();
  }
  res.sendStatus(204);
});

// 10. Hashbrown adapter for OpenAI
app.post('/chat', async (req, res) => {
  const stream = HashbrownOpenAI.stream.text({
    apiKey: process.env.OPENAI_API_KEY!,
    request: req.body,
  });

  res.header('Content-Type', 'application/octet-stream');
  for await (const chunk of stream) {
    res.write(chunk);
  }
  res.end();
});

app.listen(port, host, () => {
  console.log(`[ ready ] http://localhost:3001`);
});
```

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

### Install Hashbrown Dependencies

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

Install the required Hashbrown packages for React, core functionality, and OpenAI integration.

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

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

### Few-Shot Prompting Examples

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

Demonstrates various interaction patterns including positive responses, refusals, clarifications, and tool calling flows.

```text
### 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."
```

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

### Define Role and Tone in System Instructions

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

Example of setting a specific persona and communication style for the assistant.

```text
### ROLE & TONE

You are **ClarityBot**, a seasoned technical-writing assistant.  
— Voice: concise, friendly, and free of jargon.  
— Audience: software engineers and product managers.  
— Attitude: collaborative, playful, never condescending.
```

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

### Define Operational Rules in System Instructions

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

Example of establishing firm behavioral constraints and refusal protocols for the assistant.

```text
### RULES

1. **Always** answer in 200 words or less unless asked otherwise.
2. If uncertain, **admit it** and offer next steps; do not fabricate.
3. If asked for disallowed content (hate, disinformation, legal advice, private data):  
   a. Respond with: "I'm sorry, but I can't help with that."
   b. Offer a safer, related alternative if appropriate.
```

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

### Using the prompt tagged template literal

Source: https://hashbrown.dev/docs/angular/concept/components

Integrate the prompt template within uiChatResource to define system instructions and few-shot examples for the AI assistant.

```javascript
uiChatResource({
  // 1. Use the prompt tagged template literal
  system: prompt`
    ### ROLE & TONE

    You are **Smart Home Assistant**, a friendly and concise AI assistant for a
    smart home web application.

    - Voice: clear, helpful, and respectful.
    - Audience: users controlling lights and scenes via the web interface.

    ### RULES

    1. **Never** expose raw data or internal code details.
    2. For commands you cannot perform, **admit it** and suggest an alternative.
    3. For actionable requests (e.g., changing light settings), **precede** any
      explanation with the appropriate tool call.

    ### EXAMPLES

    <user>Hello</user>
    <assistant>
      <ui>
        <app-markdown data="How may I assist you?" />
      </ui>
    </assistant>
  `,
  components: [
    exposeComponent(MarkdownComponent, { ... })
  ]
});
```

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

### Integrate Hashbrown Bedrock with Node.js Frameworks

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

Examples of streaming Bedrock completions in various Node.js server environments. Ensure the request body conforms to Chat.Api.CompletionCreateParams.

```typescript
import { HashbrownBedrock } from '@hashbrownai/bedrock';
import express from 'express';

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

app.post('/chat', async (req, res) => {
  const stream = HashbrownBedrock.stream.text({
    region: process.env.AWS_REGION ?? 'us-east-1',
    request: req.body, // must be Chat.Api.CompletionCreateParams
  });

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

  for await (const chunk of stream) {
    res.write(chunk); // Pipe each encoded frame as it arrives
  }

  res.end();
});

app.listen(3000);
```

```typescript
import { HashbrownBedrock } from '@hashbrownai/bedrock';
import Fastify from 'fastify';

const fastify = Fastify();

fastify.post('/chat', async (request, reply) => {
  const stream = HashbrownBedrock.stream.text({
    region: process.env.AWS_REGION ?? 'us-east-1',
    request: request.body, // must be Chat.Api.CompletionCreateParams
  });

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

  for await (const chunk of stream) {
    reply.raw.write(chunk); // Pipe each encoded frame as it arrives
  }

  reply.raw.end();
});

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

```typescript
import { Controller, Post, Body, Res } from '@nestjs/common';
import { HashbrownBedrock } from '@hashbrownai/bedrock';
import { Response } from 'express';

@Controller()
export class ChatController {
  @Post('chat')
  async chat(@Body() body: any, @Res() res: Response) {
    const stream = HashbrownBedrock.stream.text({
      region: process.env.AWS_REGION ?? 'us-east-1',
      request: body, // must be Chat.Api.CompletionCreateParams
    });

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

    for await (const chunk of stream) {
      res.write(chunk); // Pipe each encoded frame as it arrives
    }

    res.end();
  }
}
```

```typescript
import { HashbrownBedrock } from '@hashbrownai/bedrock';
import { Hono } from 'hono';

const app = new Hono();

app.post('/chat', async (c) => {
  const body = await c.req.json();

  const stream = HashbrownBedrock.stream.text({
    region: process.env.AWS_REGION ?? 'us-east-1',
    request: body, // must be Chat.Api.CompletionCreateParams
  });

  return new Response(
    new ReadableStream({
      async start(controller) {
        for await (const chunk of stream) {
          controller.enqueue(chunk); // Pipe each encoded frame as it arrives
        }
        controller.close();
      },
    }),
    {
      headers: {
        'Content-Type': 'application/octet-stream',
      },
    },
  );
});

export default app;
```

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

### Integrate Hashbrown Ollama with Node.js Frameworks

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

Examples demonstrating how to stream Ollama responses as encoded frames across different Node.js server environments.

```typescript
import { HashbrownOllama } from '@hashbrownai/ollama';
import express from 'express';

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

app.post('/chat', async (req, res) => {
  const stream = HashbrownOllama.stream.text({
    // Optional: connect to a remote or containerized Ollama server
    // host: 'http://ollama:11434',
    // Optional: use Ollama Turbo
    // turbo: { apiKey: process.env.OLLAMA_API_KEY! },
    request: req.body, // must be Chat.Api.CompletionCreateParams
  });

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

  for await (const chunk of stream) {
    res.write(chunk); // Pipe each encoded frame as it arrives
  }

  res.end();
});

app.listen(3000);
```

```typescript
import { HashbrownOllama } from '@hashbrownai/ollama';
import Fastify from 'fastify';

const fastify = Fastify();

fastify.post('/chat', async (request, reply) => {
  const stream = HashbrownOllama.stream.text({
    // Optional: use Ollama Turbo
    // turbo: { apiKey: process.env.OLLAMA_API_KEY! },
    request: request.body, // must be Chat.Api.CompletionCreateParams
  });

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

  for await (const chunk of stream) {
    reply.raw.write(chunk); // Pipe each encoded frame as it arrives
  }

  reply.raw.end();
});

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

```typescript
import { Controller, Post, Body, Res } from '@nestjs/common';
import { HashbrownOllama } from '@hashbrownai/ollama';
import { Response } from 'express';

@Controller()
export class ChatController {
  @Post('chat')
  async chat(@Body() body: any, @Res() res: Response) {
    const stream = HashbrownOllama.stream.text({
      // Optional: use Ollama Turbo
      // turbo: { apiKey: process.env.OLLAMA_API_KEY! },
      request: body, // must be Chat.Api.CompletionCreateParams
    });

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

    for await (const chunk of stream) {
      res.write(chunk); // Pipe each encoded frame as it arrives
    }

    res.end();
  }
}
```

```typescript
import { HashbrownOllama } from '@hashbrownai/ollama';
import { Hono } from 'hono';

const app = new Hono();

app.post('/chat', async (c) => {
  const body = await c.req.json();
  
  const stream = HashbrownOllama.stream.text({
    // Optional: use Ollama Turbo
    // turbo: { apiKey: process.env.OLLAMA_API_KEY! },
    request: body, // must be Chat.Api.CompletionCreateParams
  });

  return new Response(
    new ReadableStream({
      async start(controller) {
        for await (const chunk of stream) {
          controller.enqueue(chunk); // Pipe each encoded frame as it arrives
        }
        controller.close();
      },
    }),
    {
      headers: {
        'Content-Type': 'application/octet-stream',
      },
    }
  );
});

export default app;
```

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

### Integrate HashbrownAzure with Node.js Frameworks

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

These examples demonstrate how to stream text responses from Azure using the Hashbrown SDK in different web server frameworks. Ensure environment variables for API keys and endpoints are configured before execution.

```typescript
import { HashbrownAzure } from '@hashbrownai/azure';
import express from 'express';

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

app.post('/chat', async (req, res) => {
  const stream = HashbrownAzure.stream.text({
    apiKey: process.env.AZURE_API_KEY!,
    endpoint: process.env.AZURE_ENDPOINT!,
    request: req.body, // must be Chat.Api.CompletionCreateParams
  });

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

  for await (const chunk of stream) {
    res.write(chunk); // Pipe each encoded frame as it arrives
  }

  res.end();
});

app.listen(3000);
```

```typescript
import { HashbrownAzure } from '@hashbrownai/azure';
import Fastify from 'fastify';

const fastify = Fastify();

fastify.post('/chat', async (request, reply) => {
  const stream = HashbrownAzure.stream.text({
    apiKey: process.env.AZURE_API_KEY!,
    endpoint: process.env.AZURE_ENDPOINT!,
    request: request.body, // must be Chat.Api.CompletionCreateParams
  });

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

  for await (const chunk of stream) {
    reply.raw.write(chunk); // Pipe each encoded frame as it arrives
  }

  reply.raw.end();
});

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

```typescript
import { Controller, Post, Body, Res } from '@nestjs/common';
import { HashbrownAzure } from '@hashbrownai/azure';
import { Response } from 'express';

@Controller()
export class ChatController {
  @Post('chat')
  async chat(@Body() body: any, @Res() res: Response) {
    const stream = HashbrownAzure.stream.text({
      apiKey: process.env.AZURE_API_KEY!,
      endpoint: process.env.AZURE_ENDPOINT!,
      request: body, // must be Chat.Api.CompletionCreateParams
    });

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

    for await (const chunk of stream) {
      res.write(chunk); // Pipe each encoded frame as it arrives
    }

    res.end();
  }
}
```

```typescript
import { HashbrownAzure } from '@hashbrownai/azure';
import { Hono } from 'hono';

const app = new Hono();

app.post('/chat', async (c) => {
  const body = await c.req.json();
  
  const stream = HashbrownAzure.stream.text({
    apiKey: process.env.AZURE_API_KEY!,
    endpoint: process.env.AZURE_ENDPOINT!,
    request: body, // must be Chat.Api.CompletionCreateParams
  });

  return new Response(
    new ReadableStream({
      async start(controller) {
        for await (const chunk of stream) {
          controller.enqueue(chunk); // Pipe each encoded frame as it arrives
        }
        controller.close();
      },
    }),
    {
      headers: {
        'Content-Type': 'application/octet-stream',
      },
    }
  );
});

export default app;
```

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

### Stream OpenAI completions in Node.js web frameworks

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

These examples demonstrate how to pipe OpenAI text streams to client responses using different Node.js frameworks. Ensure the OPENAI_API_KEY environment variable is set.

```typescript
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, // must be Chat.Api.CompletionCreateParams
  });

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

  for await (const chunk of stream) {
    res.write(chunk); // Pipe each encoded frame as it arrives
  }

  res.end();
});

app.listen(3000);
```

```typescript
import { HashbrownOpenAI } from '@hashbrownai/openai';
import Fastify from 'fastify';

const fastify = Fastify();

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

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

  for await (const chunk of stream) {
    reply.raw.write(chunk); // Pipe each encoded frame as it arrives
  }

  reply.raw.end();
});

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

```typescript
import { Controller, Post, Body, Res } from '@nestjs/common';
import { HashbrownOpenAI } from '@hashbrownai/openai';
import { Response } from 'express';

@Controller()
export class ChatController {
  @Post('chat')
  async chat(@Body() body: any, @Res() res: Response) {
    const stream = HashbrownOpenAI.stream.text({
      apiKey: process.env.OPENAI_API_KEY!,
      request: body, // must be Chat.Api.CompletionCreateParams
    });

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

    for await (const chunk of stream) {
      res.write(chunk); // Pipe each encoded frame as it arrives
    }

    res.end();
  }
}
```

```typescript
import { HashbrownOpenAI } from '@hashbrownai/openai';
import { Hono } from 'hono';

const app = new Hono();

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

  return new Response(
    new ReadableStream({
      async start(controller) {
        for await (const chunk of stream) {
          controller.enqueue(chunk); // Pipe each encoded frame as it arrives
        }
        controller.close();
      },
    }),
    {
      headers: {
        'Content-Type': 'application/octet-stream',
      },
    }
  );
});

export default app;
```

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

### Clone the Repository

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

Use git to clone the smart home sample repository.

```bash
git clone https://github.com/liveloveapp/hashbrown.git
```

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

### createRuntime(options)

Source: https://hashbrown.dev/docs/angular/concept/runtime

Initializes a new runtime instance with a provided list of functions.

```APIDOC
## createRuntime(options)

### Description
Creates a new runtime instance that can execute JavaScript code.

### Parameters
- **options** (Object) - Required - Configuration object containing a list of functions.
  - **functions** (Array) - Required - A list of functions defined via createRuntimeFunction.
```

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

### Install Hashbrown Dependencies

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

Required packages for integrating Hashbrown with an Angular application.

```bash
npm install @hashbrownai/angular @hashbrownai/core @hashbrownai/openai ngx-markdown
```

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

### Migrate anyOf Output Structures

Source: https://hashbrown.dev/docs/angular/start/migration

Demonstrates the transition from index-wrapped or literal-wrapped v0.4 output to the direct v0.5 object structure.

```json
{
  "0": {
    "title": "Q3 forecast"
  }
}
```

```json
{
  "title": "Q3 forecast"
}
```

```json
{
  "success": {
    "data": "Saved"
  }
}
```

```json
{
  "status": "success",
  "data": "Saved"
}
```

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

### Transform Request Options with NestJS

Source: https://hashbrown.dev/docs/angular/platform/writer

Example of using transformRequestOptions inside a NestJS controller method.

```typescript
import { Controller, Post, Body, Res, Req } from '@nestjs/common';
import { HashbrownWriter } from '@hashbrownai/writer';
import { Response, Request } from 'express';

@Controller()
export class ChatController {
  @Post('chat')
  async chat(@Body() body: any, @Req() req: Request, @Res() res: Response) {
    const stream = HashbrownWriter.stream.text({
      apiKey: process.env.WRITER_API_KEY!,
      request: body,
      transformRequestOptions: (options) => {
        return {
          ...options,
          // Add server-side system prompt
          messages: [
            { role: 'system', content: 'You are a helpful AI writing assistant.' },
            ...options.messages,
          ],
          // Adjust parameters based on writing task
          temperature: getUserPreferences(req.user.id).creativity,
        };
      },
    });

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

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

    res.end();
  }
}
```

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

### Define message roles

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

Examples of message objects representing user and assistant roles, including tool call structures.

```javascript
{ role: 'user', content: 'Turn on the living-room lights' }

// Assistant decides it needs additional data
{ role: 'assistant', toolCalls: [{ name: 'getLights', args: { room: 'living' }, status: 'pending' }] }

// Assistant can now finish its turn:
{ role: 'assistant', content: 'Lights on! Anything else I can help with?' }
```

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

### Initialize System Prompts

Source: https://hashbrown.dev/docs/react/guide/prompt-engineering

Sets the model's persona and constraints using the system property in the useChat hook.

```typescript
import { useChat } from '@hashbrownai/react';

const { messages, sendMessage } = useChat({
  model: 'gpt-4',
  system: `You are a helpful assistant. Answer concisely.`,
});
```

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

### Define Client-Side System Instruction Placeholder

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

Use this pattern to indicate that the system instruction is managed on the server when initializing the chat resource.

```javascript
chat = chatResource({
  system: 'Provided on the server',
});
```

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

### Initialize a Runtime Environment

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

Initializes a new runtime instance by providing a list of functions to the useRuntime hook.

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

const runtime = useRuntime({
  functions: [],
});
```

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

### Implementing useStructuredCompletion

Source: https://hashbrown.dev/docs/react/concept/structured-output

Demonstrates how to memoize input data and use the hook to predict structured lighting configurations based on a system prompt and schema.

```javascript
import { useStructuredCompletion } from '@hashbrownai/react';
import { s } from '@hashbrownai/core';
import { useMemo } from 'react';

function SceneFormDialog({ sceneName, lights }) {
  // 1. Compute memoized input to the model
  const input = useMemo(() => {
    if (!sceneName) return null;
    return {
      input: sceneName,
      availableLights: lights.map((light) => ({
        id: light.id,
        name: light.name,
      })),
    };
  }, [sceneName, lights]);

  // 2. Fetch the structured `output` matching the required `schema` from the model from the provided `input`
  const { output } = useStructuredCompletion({
    debugName: 'Predict Lights',
    system: `
      You are an assistant that helps the user configure a lighting scene.
      The user will choose a name for the scene, and you will predict the
      lights that should be added to the scene based on the name. The input
      will be the scene name and the list of lights that are available.

      # Rules
      - Only suggest lights from the provided "availableLights" input list.
      - Pick a brightness level for each light that is appropriate for the scene.
    `,
    input,
    schema: s.array(
      'The lights to add to the scene',
      s.object('A join between a light and a scene', {
        lightId: s.string('the ID of the light to add'),
        brightness: s.number('the brightness of the light from 0 to 100'),
      }),
    ),
  });

  // 3. Render the UI using the `output` matching the `schema`
}
```

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

### Transform Request Options in Node.js Frameworks

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

Examples of intercepting and modifying chat requests using transformRequestOptions across various Node.js web frameworks.

```typescript
import { HashbrownOllama } from '@hashbrownai/ollama';
import express from 'express';

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

app.post('/chat', async (req, res) => {
  const stream = HashbrownOllama.stream.text({
    request: req.body,
    transformRequestOptions: (options) => {
      return {
        ...options,
        // Add server-side system prompt
        messages: [
          { role: 'system', content: 'You are a helpful assistant.' },
          ...options.messages,
        ],
        // Adjust parameters based on user preferences
        temperature: getUserPreferences(req.user.id).creativity,
      };
    },
  });

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

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

  res.end();
});
```

```typescript
import { HashbrownOllama } from '@hashbrownai/ollama';
import Fastify from 'fastify';

const fastify = Fastify();

fastify.post('/chat', async (request, reply) => {
  const stream = HashbrownOllama.stream.text({
    request: request.body,
    transformRequestOptions: (options) => {
      return {
        ...options,
        // Add server-side system prompt
        messages: [
          { role: 'system', content: 'You are a helpful assistant.' },
          ...options.messages,
        ],
        // Adjust parameters based on user preferences
        temperature: getUserPreferences(request.user.id).creativity,
      };
    },
  });

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

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

  reply.raw.end();
});
```

```typescript
import { Controller, Post, Body, Res, Req } from '@nestjs/common';
import { HashbrownOllama } from '@hashbrownai/ollama';
import { Response, Request } from 'express';

@Controller()
export class ChatController {
  @Post('chat')
  async chat(@Body() body: any, @Req() req: Request, @Res() res: Response) {
    const stream = HashbrownOllama.stream.text({
      request: body,
      transformRequestOptions: (options) => {
        return {
          ...options,
          // Add server-side system prompt
          messages: [
            { role: 'system', content: 'You are a helpful assistant.' },
            ...options.messages,
          ],
          // Adjust parameters based on user preferences
          temperature: getUserPreferences(req.user.id).creativity,
        };
      },
    });

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

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

    res.end();
  }
}
```

```typescript
import { HashbrownOllama } from '@hashbrownai/ollama';
import { Hono } from 'hono';

const app = new Hono();

app.post('/chat', async (c) => {
  const body = await c.req.json();
  
  const stream = HashbrownOllama.stream.text({
    request: body,
    transformRequestOptions: (options) => {
      return {
        ...options,
        // Add server-side system prompt
        messages: [
          { role: 'system', content: 'You are a helpful assistant.' },
          ...options.messages,
        ],
        // Adjust parameters based on user preferences
        temperature: getUserPreferences(c.req.user.id).creativity,
      };
    },
  });

  return new Response(
    new ReadableStream({
      async start(controller) {
        for await (const chunk of stream) {
          controller.enqueue(chunk);
        }
        controller.close();
      },
    }),
    {
      headers: {
        'Content-Type': 'application/octet-stream',
      },
    }
  );
});
```

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

### Initialize JavaScript Tool with useToolJavaScript

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

Creates a JavaScript tool using a provided runtime and registers it within a UI chat interface.

```javascript
import { useToolJavaScript, useUiChat } from '@hashbrownai/react';

const toolJavaScript = useToolJavaScript({
  runtime,
});

const chat = useUiChat({
  tools: [toolJavaScript],
});
```

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

### useUiChat(options: UiChatOptions)

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

Initializes a UI chat instance with specified components and model configuration.

```APIDOC
## useUiChat(options)

### Description
Initializes a UI chat instance. The hook accepts a configuration object to define the model, system prompt, and available components that the model can render.

### Parameters
#### UiChatOptions
- **components** (ExposedComponent[]) - Required - The components to use for the UI chat hook
- **model** (KnownModelIds) - Required - The model to use for the UI chat hook
- **system** (string) - Required - The system prompt to use for the UI chat hook
- **messages** (Chat.Message[]) - Optional - The initial messages for the UI chat hook
- **tools** (Tools[]) - Optional - The tools to use for the UI chat hook
- **debugName** (string) - Optional - The debug name for the UI chat hook
- **debounceTime** (number) - Optional - The debounce time for the UI chat hook
```

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

### Transform Request Options in Node.js Frameworks

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

Examples of using transformRequestOptions to modify OpenAI requests within Express, Fastify, NestJS, and Hono environments.

```typescript
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,
    transformRequestOptions: (options) => {
      return {
        ...options,
        // Add server-side system prompt
        messages: [
          { role: 'system', content: 'You are a helpful assistant.' },
          ...options.messages,
        ],
        // Adjust temperature based on user preferences
        temperature: getUserPreferences(req.user.id).creativity,
      };
    },
  });

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

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

  res.end();
});
```

```typescript
import { HashbrownOpenAI } from '@hashbrownai/openai';
import Fastify from 'fastify';

const fastify = Fastify();

fastify.post('/chat', async (request, reply) => {
  const stream = HashbrownOpenAI.stream.text({
    apiKey: process.env.OPENAI_API_KEY!,
    request: request.body,
    transformRequestOptions: (options) => {
      return {
        ...options,
        // Add server-side system prompt
        messages: [
          { role: 'system', content: 'You are a helpful assistant.' },
          ...options.messages,
        ],
        // Adjust temperature based on user preferences
        temperature: getUserPreferences(request.user.id).creativity,
      };
    },
  });

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

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

  reply.raw.end();
});
```

```typescript
import { Controller, Post, Body, Res, Req } from '@nestjs/common';
import { HashbrownOpenAI } from '@hashbrownai/openai';
import { Response, Request } from 'express';

@Controller()
export class ChatController {
  @Post('chat')
  async chat(@Body() body: any, @Req() req: Request, @Res() res: Response) {
    const stream = HashbrownOpenAI.stream.text({
      apiKey: process.env.OPENAI_API_KEY!,
      request: body,
      transformRequestOptions: (options) => {
        return {
          ...options,
          // Add server-side system prompt
          messages: [
            { role: 'system', content: 'You are a helpful assistant.' },
            ...options.messages,
          ],
          // Adjust temperature based on user preferences
          temperature: getUserPreferences(req.user.id).creativity,
        };
      },
    });

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

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

    res.end();
  }
}
```

```typescript
import { HashbrownOpenAI } from '@hashbrownai/openai';
import { Hono } from 'hono';

const app = new Hono();

app.post('/chat', async (c) => {
  const body = await c.req.json();
  
  const stream = HashbrownOpenAI.stream.text({
    apiKey: process.env.OPENAI_API_KEY!,
    request: body,
    transformRequestOptions: (options) => {
      return {
        ...options,
        // Add server-side system prompt
        messages: [
          { role: 'system', content: 'You are a helpful assistant.' },
          ...options.messages,
        ],
        // Adjust temperature based on user preferences
        temperature: getUserPreferences(c.req.user.id).creativity,
      };
    },
  });

  return new Response(
    new ReadableStream({
      async start(controller) {
        for await (const chunk of stream) {
          controller.enqueue(chunk);
        }
        controller.close();
      },
    }),
    {
      headers: {
        'Content-Type': 'application/octet-stream',
      },
    }
  );
});
```

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

### Define Smart Home Context and Provider

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

Sets up the state management for lights and scenes, providing methods to update brightness and apply scene configurations.

```typescript
import React, { createContext, useContext, useState, useCallback } from 'react';

export interface Light {
  id: string;
  name: string;
  brightness: number;
}

export interface Scene {
  id: string;
  name: string;
  lights: { lightId: string; brightness: number }[];
}

const defaultLights: Light[] = [
  { id: 'living', name: 'Living Room', brightness: 80 },
  { id: 'bedroom', name: 'Bedroom', brightness: 40 },
  { id: 'kitchen', name: 'Kitchen', brightness: 100 },
];

const defaultScenes: Scene[] = [
  {
    id: 'relax',
    name: 'Relax Mode',
    lights: [
      { lightId: 'living', brightness: 30 },
      { lightId: 'bedroom', brightness: 10 },
    ],
  },
  {
    id: 'party',
    name: 'Party Mode',
    lights: [
      { lightId: 'living', brightness: 100 },
      { lightId: 'kitchen', brightness: 100 },
    ],
  },
];

const SmartHomeContext = createContext<{
  lights: Light[];
  scenes: Scene[];
  setLightBrightness: (lightId: string, brightness: number) => void;
  applyScene: (sceneId: string) => void;
} | undefined>(undefined);

export const SmartHomeProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
  const [lights, setLights] = useState<Light[]>(defaultLights);
  const [scenes] = useState<Scene[]>(defaultScenes);

  const setLightBrightness = useCallback((lightId: string, brightness: number) => {
    setLights((lights) =>
      lights.map((l) => (l.id === lightId ? { ...l, brightness } : l))
    );
  }, []);

  const applyScene = useCallback((sceneId: string) => {
    const scene = scenes.find((s) => s.id === sceneId);
    if (scene) {
      setLights((lights) =>
        lights.map((l) => {
          const match = scene.lights.find((li) => li.lightId === l.id);
          return match ? { ...l, brightness: match.brightness } : l;
        })
      );
    }
  }, [scenes]);

  return (
    <SmartHomeContext.Provider value={{ lights, scenes, setLightBrightness, applyScene }}>
      {children}
    </SmartHomeContext.Provider>
  );
};

export const useSmartHome = () => {
  const ctx = useContext(SmartHomeContext);
  if (!ctx) throw new Error('useSmartHome must be used within SmartHomeProvider');
  return ctx;
};
```

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

### Expose Card, Light, and Scene Components

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

Exposes multiple UI components to the LLM, demonstrating different prop schema configurations and child handling.

```javascript
import { Card } from './Card';
import { LightListItem } from './LightListItem';
import { SceneListItem } from './SceneListItem';

export const exposedCardComponent = exposeComponent(Card, {
  name: 'Card',
  description: 'Shows a card with a title and arbitrary children',
  props: {
    title: s.streaming.string('Title to display in the card header'),
  },
  children: 'any',
});

export const exposedLightListItemComponent = exposeComponent(LightListItem, {
  name: 'LightListItem',
  description: 'Display a light and its state, given the lightId',
  props: {
    lightId: s.string('The id of the light to display'),
  },
});

export const exposedSceneListItemComponent = exposeComponent(SceneListItem, {
  name: 'SceneListItem',
  description: 'Display a scene (and let the user apply it) by id',
  props: {
    sceneId: s.string('The id of the scene to display'),
  },
});
```

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

### Transform Request Options in Node.js Frameworks

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

Examples of using transformRequestOptions to inject system instructions and dynamic generation configuration within different web frameworks.

```typescript
import { HashbrownGoogle } from '@hashbrownai/google';
import express from 'express';

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

app.post('/chat', async (req, res) => {
  const stream = HashbrownGoogle.stream.text({
    apiKey: process.env.GOOGLE_API_KEY!,
    request: req.body,
    transformRequestOptions: (options) => {
      return {
        ...options,
        // Add system instructions for Gemini
        systemInstruction: {
          parts: [{ text: 'You are a helpful AI assistant.' }]
        },
        // Adjust generation config
        generationConfig: {
          ...options.generationConfig,
          temperature: getUserPreferences(req.user.id).creativity,
        },
      };
    },
  });

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

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

  res.end();
});
```

```typescript
import { HashbrownGoogle } from '@hashbrownai/google';
import Fastify from 'fastify';

const fastify = Fastify();

fastify.post('/chat', async (request, reply) => {
  const stream = HashbrownGoogle.stream.text({
    apiKey: process.env.GOOGLE_API_KEY!,
    request: request.body,
    transformRequestOptions: (options) => {
      return {
        ...options,
        // Add system instructions for Gemini
        systemInstruction: {
          parts: [{ text: 'You are a helpful AI assistant.' }]
        },
        // Adjust generation config
        generationConfig: {
          ...options.generationConfig,
          temperature: getUserPreferences(request.user.id).creativity,
        },
      };
    },
  });

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

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

  reply.raw.end();
});
```

```typescript
import { Controller, Post, Body, Res, Req } from '@nestjs/common';
import { HashbrownGoogle } from '@hashbrownai/google';
import { Response, Request } from 'express';

@Controller()
export class ChatController {
  @Post('chat')
  async chat(@Body() body: any, @Req() req: Request, @Res() res: Response) {
    const stream = HashbrownGoogle.stream.text({
      apiKey: process.env.GOOGLE_API_KEY!,
      request: body,
      transformRequestOptions: (options) => {
        return {
          ...options,
          // Add system instructions for Gemini
          systemInstruction: {
            parts: [{ text: 'You are a helpful AI assistant.' }]
          },
          // Adjust generation config
          generationConfig: {
            ...options.generationConfig,
            temperature: getUserPreferences(req.user.id).creativity,
          },
        };
      },
    });

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

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

    res.end();
  }
}
```

```typescript
import { HashbrownGoogle } from '@hashbrownai/google';
import { Hono } from 'hono';

const app = new Hono();

app.post('/chat', async (c) => {
  const body = await c.req.json();
  
  const stream = HashbrownGoogle.stream.text({
    apiKey: process.env.GOOGLE_API_KEY!,
    request: body,
    transformRequestOptions: (options) => {
      return {
        ...options,
        // Add system instructions for Gemini
        systemInstruction: {
          parts: [{ text: 'You are a helpful AI assistant.' }]
        },
        // Adjust generation config
        generationConfig: {
          ...options.generationConfig,
          temperature: getUserPreferences(c.req.user.id).creativity,
        },
      };
    },
  });

  return new Response(
    new ReadableStream({
      async start(controller) {
        for await (const chunk of stream) {
          controller.enqueue(chunk);
        }
        controller.close();
      },
    }),
    {
      headers: {
        'Content-Type': 'application/octet-stream',
      },
    }
  );
});
```
Tokens:
Raw