Converting Natural Language to Structured Data

import { Component, signal } from '@angular/core';
import { CommonModule } from '@angular/common';

interface ExpenseCategory {
  id: string;
  name: string;
}

interface Currency {
  code: string;
  symbol: string;
}

@Component({
  selector: 'app-expense-form',
  imports: [CommonModule],
  template: `
    <form (submit)="onSubmit($event)" style="display: grid; gap: 8px">
      <input
        type="number"
        name="amount"
        [value]="amount()"
        (input)="amount.set(($event.target as HTMLInputElement).value)"
        placeholder="Amount"
      />

      <select
        name="currency"
        [value]="currency()"
        (change)="currency.set(($event.target as HTMLSelectElement).value)"
      >
        <option value="">Select currency</option>
        @for (c of currencies(); track c.code) {
          <option [value]="c.code">{{ c.symbol }} — {{ c.code }}</option>
        }
      </select>

      <select
        name="category"
        [value]="categoryId()"
        (change)="categoryId.set(($event.target as HTMLSelectElement).value)"
      >
        <option value="">Select category</option>
        @for (cat of categories(); track cat.id) {
          <option [value]="cat.id">{{ cat.name }}</option>
        }
      </select>

      <input
        type="date"
        name="date"
        [value]="date()"
        (input)="date.set(($event.target as HTMLInputElement).value)"
      />

      <textarea
        name="description"
        [value]="description()"
        (input)="description.set(($event.target as HTMLTextAreaElement).value)"
        placeholder="Description"
      ></textarea>

      <button type="submit">Submit</button>
    </form>
  `,
})
export class ExpenseFormComponent {
  amount = signal('');
  currency = signal('');
  categoryId = signal('');
  date = signal('');
  description = signal('');

  currencies = signal<Currency[]>([]);
  categories = signal<ExpenseCategory[]>([]);

  constructor() {
    this.loadLookups();
  }

  private async loadLookups() {
    const [currenciesRes, categoriesRes] = await Promise.all([
      fetch('/api/currencies'),
      fetch('/api/expense-categories'),
    ]);
    const [currencies, categories] = await Promise.all([
      currenciesRes.json(),
      categoriesRes.json(),
    ]);
    this.currencies.set(currencies);
    this.categories.set(categories);
  }

  onSubmit(e: SubmitEvent) {
    e.preventDefault();
    // submit to backend...
  }
}

import { s } from '@hashbrownai/core';

export const ExpenseResultSuccessSchema = s.object('Parsed expense', {
  type: s.literal('Expense'),
  amount: s.number('The amount of the expense'),
  currency: s.string('ISO 4217 currency code, e.g. USD'),
  categoryId: s.string('ID of the chosen category'),
  date: s.string('ISO date YYYY-MM-DD'),
  description: s.string('Short description'),
});

export type ExpenseResultSuccess = s.infer<typeof ExpenseResultSuccessSchema>;

export const ExpenseResultParseErrorSchema = s.object('Unable to parse', {
  type: s.literal('ParseError'),
  message: s.string('Human readable error'),
});

export type ExpenseResultParseError = s.infer<
  typeof ExpenseResultParseErrorSchema
>;

export const ExpenseResultSchema = s.anyOf([
  ExpenseResultSuccessSchema, // Success branch
  ExpenseResultParseErrorSchema, // Error branch
]);

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

export const listExpenseCategories = createTool({
  name: 'listExpenseCategories',
  description: 'List valid expense categories the user can pick from',
  async handler(abortSignal) {
    const res = await fetch('/api/expense-categories', { signal: abortSignal });
    const categories = await res.json();

    return categories.map((category: { id: string; name: string }) => ({
      id: category.id,
      name: category.name,
    }));
  },
});

import { Component, effect, output, signal } from '@angular/core';
import { CommonModule } from '@angular/common';
import { structuredCompletionResource } from '@hashbrownai/angular';
import { ExpenseResultSchema, ExpenseResultSuccess } from './expense-schema';
import { listExpenseCategories } from './category-tool';

@Component({
  selector: 'app-expense-nl',
  imports: [CommonModule],
  template: `
    <form (submit)="onSubmit($event)" style="display: grid; gap: 8px">
      <textarea
        [value]="inputText()"
        (input)="inputText.set(($event.target as HTMLTextAreaElement).value)"
        placeholder="Describe your expense in any language…"
        rows="3"
      ></textarea>
      <button type="submit" [disabled]="completion.isLoading()">
        {{ completion.isLoading() ? 'Parsing…' : 'Submit' }}
      </button>
    </form>
  `,
})
export class ExpenseNlComponent {
  // Emits the parsed expense to the parent when successful
  expenseParsed = output<ExpenseResultSuccess>();

  inputText = signal('');
  private requestInput = signal<string | null>(null);

  completion = structuredCompletionResource({
    model: 'gpt-4.1',
    debugName: 'expense-nl',
    input: this.requestInput,
    tools: [listExpenseCategories],
    system: `
      You are an accounting assistant. Convert the user's natural language
      statement into a JSON object that matches the provided schema.
      * The user can speak in any language. Detect and handle it.
      * Call the "listExpenseCategories" tool to pick a category ID that
        corresponds to the user's wording.
      * If anything is missing or ambiguous, return a ParseError instead.
    `,
    schema: ExpenseResultSchema,
  });

  constructor() {
    effect(() => {
      const result = this.completion.value();
      if (!result) return;

      if (result.type === 'Expense') {
        this.expenseParsed.emit(result as ExpenseResultSuccess);
        this.inputText.set('');
        this.requestInput.set(null);
      } else {
        alert(result.message);
      }
    });
  }

  onSubmit(e: SubmitEvent) {
    e.preventDefault();
    // Trigger a new completion run with the current input
    this.requestInput.set(this.inputText());
  }
}