Angular Quick Start

Take your first steps with Hashbrown.

Install

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

Provider

export const appConfig: ApplicationConfig = {
  providers: [
    provideHashbrown({
      baseUrl: '/api/chat',
    }),
  ],
};

1. Import the function from @hashbrownai/angular.
2. Optionally specify options such as the baseUrl for chat requests.
3. Add the provider to your Angular application configuration.

export const appConfig: ApplicationConfig = {
  providers: [
    provideHashbrown({
      middleware: [
        function (request: RequestInit) {
          console.log({ request });
          return request;
        },
      ],
    }),
  ],
};

Node Adapters

To get started, we recommend running a local express server following the Hashbrown adapter documentation.

• OpenAI
• Azure OpenAI
• Google Gemini
• Writer

The chatResource() Function

The function from @hashbrownai/angular is the basic way to interact with the model.

chatResource({
  model: 'gpt-5',
  system: 'hashbrowns should be covered and smothered',
  messages: [{ role: 'user', content: 'Write a short story about breakfast.' }],
});

1. First, we specify the model.
2. Second, we provide system instructions.
3. Third, we send some initial messages to the model.

ChatResourceOptions

ChatResourceRef

The function returns a object that extends Angular's Resource[]> interface.

API Reference

Render the Model Response

import { chatResource } from '@hashbrownai/angular';

@Component({
  template: `
    // 1. Render the content of each message
    @for (message of chat.value(); track $index) {
      <p>{{ message.content }}</p>
    }
  `,
})
export class App {
  // 2. Generate the messages from a prompt
  chat = chatResource({
    model: 'gpt-5',
    system: 'hashbrowns should be covered and smothered',
    messages: [
      { role: 'user', content: 'Write a short story about breakfast.' },
    ],
  });
}

1. In the template, we render the content of each message.
2. The function creates a new chat resource.
3. We use the value() signal to access the current messages in the chat.

Send Messages

To send messages to the model, we can use the sendMessage() method.

import { chatResource } from '@hashbrownai/angular';

@Component({
  template: `
    <div>
      <input
        type="text"
        [value]="userMessage()"
        (input)="userMessage.set($any($event.target).value)"
        (keydown.enter)="send()"
        placeholder="Prompt..."
      />
      <button (click)="send()">Send</button>
    </div>
    <div>
      @for (message of chat.value(); track $index) {
        <p>{{ message.content }}</p>
      }
    </div>
  `,
})
export class App {
  userMessage = input<string>('');
  chat = chatResource({
    model: 'gpt-5',
    debugName: 'chat',
    system: 'hashbrowns should be covered and smothered',
    messages: [
      { role: 'user', content: 'Write a short story about breakfast.' },
    ],
  });

  send() {
    if (this.userMessage().trim()) {
      this.chat.sendMessage({ role: 'user', content: this.userMessage() });
      this.userMessage.set('');
    }
  }
}

1. We create an input field controlled by the userMessage signal for user input.
2. The send() method sends the user message to the chat resource using the sendMessage() method.
3. Angular renders the user message and the assistant response message.

Debugging with Redux Devtools

Hashbrown streams LLM messages and internal actions to the redux devtools.

To enable debugging, specify the debugName option.

chat = chatResource({
  debugName: 'chat',
});

Beyond Chat

Large language models are highly intelligent and capable of more than just text and chatbots. With Hashbrown, you can expose your trusted, tested, and compliant components - in other words, you can generate user interfaces using your components as the building blocks!

Tool Calling

Tool calling enables the model to invoke callback function in your frontend web application code. The functions you expose can either have no arguments or you can specify the required and optional arguments. The model will choose if, and when, to invoke the function.

What can functions do?

• Expose application state to the model
• Allow the model to take an action
• Offer intelligent next actions for the user to take
• Automate user tasks

With Angular, all handler functions are executed in the injection context - this means that you can use the inject() function within the handler functions to inject services and dependencies.

Streaming Responses

Streaming is baked into the core of Hashbrown. With Skillet, our LLM-optimized schema language, you can use the .streaming() keyword to enable streaming with eager JSON parsing.

Run LLM-generated JS Code (Safely)

Hashbrown ships with a JavaScript runtime for safe execution of LLM-generated code in the client.