DOCSEARCHbyAlgolia
Submit Docs

Hashbrown Framework

repository·main·Indexed 20 days ago

https://github.com/liveloveapp/hashbrown

An open-source framework for building and running AI agents in the browser. Hashbrown provides core primitives, integrations for React and Angular, and standardized Node.js wrappers for LLM providers including OpenAI, Azure OpenAI, Amazon Bedrock, Google Gemini, Writer, Ollama, and Anthropic to enable generative user interfaces.

Tokens
187.2K
Snippets
485
Records
676
Agent score
65%

What's inside Hashbrown

  1. What is Hashbrown?

    main

    Hashbrown is a TypeScript framework designed for building generative user interfaces in Angular and React. It is built specifically for frontend web applications and is isomorphic (supporting server-side rendering).

    It addresses several key challenges in LLM integration:

    • Managing LLM state
    • Integrating with application state and services
    • Computing structured data from natural language
    • Exposing components to the LLM
    • Debugging LLM responses
    • Executing LLM-generated code in the browser

  3. What is Magic Text in Angular

    main

    Magic Text is Hashbrown's optimistic Markdown parser and renderer designed for streaming LLM output. It allows for stable, incremental rendering of partial Markdown as text arrives, ensuring that unchanged segments remain stable while new content is appended.

    Key features include:

    • Streaming stability: Early formatted output before the stream completes.
    • Predictable rendering: Content is parsed into trusted node types.
    • Animation-ready segmentation: Text can be segmented (e.g., by word or grapheme) for animations.
    • Citation support: Supports interactive source links using the following Markdown pattern:
      • Inline reference: [^source-id]
      • Definition: [^source-id]: Source title https://example.com

    To enable citations automatically in UI resources, you can set citations: true when using exposeMarkdown().

  4. What is Skillet (Schema Language)?

    main

    Skillet is a schema language optimized specifically for LLMs. Unlike Zod, which aims to model the entire TypeScript type system, Skillet focuses on the subset of types that LLMs actually understand and can reliably generate.

    Key features of Skillet include:

    • LLM Optimization: Reduces the chance of the LLM silently ignoring schema constraints.
    • Streaming Structured Data: Allows developers to control which parts of a schema can stream and how they stream as the LLM generates JSON.
    • Internal Optimization: Automatically serializes schemas into JSON Schema (e.g., for discriminated unions) to make them easier for LLMs to process.

  7. What is Skillet and how does it enable streaming?

    main
    Skillet is an LLM-optimized, Zod-like schema language used by Hashbrown to handle structured outputs. Unlike standard JSON parsing which requires a complete payload, Skillet has streaming and partial parsing built into its core. This allows Hashbrown to eagerly parse chunks of data as they are streamed from an LLM, making them immediately available to your application's reactive state.

  8. Understand the Order of Operations for Chat History and Options

    main

    When working with Hashbrown chat resources, it is important to distinguish between what seeds the history, what mutates it, and what only affects future requests.

    Message History Lifecycle

    • Initial Seeding: The messages option seeds the initial chat history only. It does not continuously sync with the history after initialization.
    • Intentional Mutations: To change the chat history, you must use the explicit APIs: sendMessage, setMessages, or reload.
    • Conversational State: Conversational state (the flow of the chat) belongs in the message history.

    Runtime Options

    Options such as model, system, apiUrl, threadId, tools, and transport are applied to future requests only. Updating these options will not clear the existing history or trigger a new message by themselves.

    Completion vs. Chat Resources

    • Chat Resources: Manage a history of multiple messages.
    • Completion Resources: These are different because their input option is synchronized with the single user message backing the completion.

    Best Practices

    • Use the system option for durable, unchanging behavior.
    • Use message history APIs for managing conversational state.

  9. Configure Tools and Response Schemas in OpenAI requests

    main

    The OpenAI adapter supports advanced OpenAI features through the request object:

    • Tools: Define tools using OpenAI-style function specifications (name, description, and parameters using JSON schema).
    • Tool Calling: Control behavior using toolChoice (e.g., auto, required, none).
    • Response Format: Use the responseFormat field to pass a JSON schema, enabling OpenAI to return validated structured output.

  10. How the JS Runtime works

    main

    The Hashbrown JS Runtime provides a safe, sandboxed environment for executing model-generated JavaScript code in the browser using QuickJS compiled to WebAssembly. This allows agents to perform data transformation, orchestration, charting, and mathematical operations with reduced hallucination risk.

    The workflow is as follows:

    1. Define a runtime using useRuntime().
    2. Define async functions using useRuntimeFunction() that the model can call.
    3. Hashbrown generates instructions and TypeScript definitions for these functions to inform the LLM of their signatures.
    4. Provide the runtime to the model using the useToolJavaScript() hook.
    5. Add the tool to the model's available tools collection.

  11. Choose between Client-Side and Server-Side System Instructions

    main

    Deciding where to host your system instructions depends on security and UX requirements.

    Client-Side Instructions

    Use when:

    • The prompt is purely for UX logic (e.g., an LLM-powered search bar).
    • You want to allow users to customize their own instructions (like ChatGPT's custom instructions).
    • The instructions contain no proprietary or sensitive prompting techniques.

    Server-Side Instructions

    Use when:

    • The instructions contain sensitive information or proprietary logic.
    • The feature requires strict compliance or controlled behavior (e.g., a compliance chatbot).
    • You need to ensure the prompt cannot be tampered with or extracted by the user.

    Security Warning: Never use system instructions as a mechanism for authorization or security. Frontend code is not private. Always implement security controls at the API layer. Even server-side instructions should be treated as potentially extractable by a skilled user.

  12. Core concepts of Hashbrown Angular

    main

    Hashbrown is built around several key architectural principles:

    • Headless: The framework does not dictate your UI; you build your interface however you want.
    • Signal Based: It leverages Angular Signals and Resources for high-performance reactivity.
    • Platform Agnostic: You can use any supported LLM provider (e.g., OpenAI, Anthropic, Google, etc.).
    • Streaming: Streaming is a core feature to handle the latency inherent in LLM responses.
    • Components: You can use your existing, trusted, and tested Angular components as the building blocks for generative UI.
    • Runtime: Provides a mechanism to safely execute LLM-generated JavaScript code directly in the client.