hashbrown

Structured Output

Specify the JSON schema of the model response.

  • Structured output can replace forms with natural language input via text or audio.
  • Users can navigate via chat.
  • Provide structured predictive actions given application state and user events.
  • Allow the user to customer the entire application user interface.

Demo


The structuredChatResource() Function

get a structured response
@Component({})
export class App {
  // 1. Create the resource with the specified `schema`
  chat = structuredChatResource({
    system: `Collect the user's first and last name.`,
    schema: s.object('The user', {
      firstName: s.string('First name'),
      lastName: s.string('Last name'),
    }),
  });

  constructor() {
    // 1. Send a user message
    chat.sendMessage({ role: 'user', content: 'My name is Brian Love' });

    // 3. Log out the structure response
    effect(() => {
      const value = chat.value();
      console.log({
        firstName: value.content.firstName,
        lastName: value.content.lastName,
      });
    });
  }
}
  1. The structuredChatResource function is used to create a chat resource that can parse user input and return structured data.
  2. The schema option defines the expected structure of the response using Skillet (or a Standard JSON Schema object that Hashbrown normalizes to Skillet).
  3. The resource value() contains the structured output, which can be used directly in your application.

Here is the expected content value:

{
  "firstName": "Brian",
  "lastName": "Love"
}

Schema Inputs

The schema option accepts Skillet schemas, Standard JSON Schema objects (the ~standard spec, e.g. Zod/ArkType), or raw JSON Schema objects. Standard JSON Schema inputs are normalized to Skillet (draft-07) before streaming and validation. Unsupported keywords throw at runtime.


Provider Enforcement

The schema option is the only client-side structured output control. Hashbrown includes its JSON Schema in RunAgentInput.hashbrown.responseSchema, then incrementally parses and validates the text events returned by the AG-UI endpoint.

The server adapter decides how to request structured output from its provider. It may use native schema enforcement, JSON mode, or provider-specific request options. Hashbrown does not synthesize an output tool; developers may use that name for a normal tool.


StructuredChatResourceOptions

OptionTypeRequiredDescription
systemReactiveOption<string>YesThe system prompt to use for the structured chat resource
schemas.SchemaOutputYesThe schema to use for the structured chat resource
toolsTools[]NoThe tools to use for the structured chat resource
messagesChat.Message<Output, Tools>[]NoThe initial messages for the structured chat resource
debugNamestringNoThe debug name for the structured chat resource
debouncenumberNoThe debounce time for the structured chat resource
retriesnumberNoThe number of retries for the structured chat resource
apiUrlReactiveOption<string>NoThe API URL to use for the structured chat resource
threadIdReactiveOption<string | undefined>NoThread identifier used to load or continue a conversation

API Reference


The structuredCompletionResource() Function

The structuredCompletionResource function builds on top of the structuredChatResource function by providing an additional input option.

get a structured response from a bound input
predictedLights = structuredCompletionResource({
  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: computed(() => {
    if (!this.sceneNameSignal()) return null;

    return {
      input: this.sceneNameSignal(),
      availableLights: untracked(() => {
        return this.lights().map((light) => ({
          id: light.id,
          name: light.name,
        }));
      }),
    };
  }),
  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'),
    }),
  ),
});

Let's review the code above.

  1. The structuredCompletionResource function is used to create a resource that predicts lights based on the scene name.
  2. The input option is set to a signal that contains the scene name and additional untracked context. This signal updates each time the scene name signal changes, and reads the list of light names and sends them along.
  3. The schema defines the expected structure of the response, which includes an array of lights with their IDs and brightness levels.

When the user types a scene name, the LLM will predict which lights should be added to the scene and return a structured JSON object that can be used directly in your application.


StructuredCompletionResourceOptions

OptionTypeRequiredDescription
inputSignal<null | undefined | Input>YesThe input to the structured completion resource
schemas.SchemaOutputYesThe schema to use for the structured completion resource
systemReactiveOption<string>YesThe system prompt to use for the structured completion resource
toolsChat.AnyTool[]NoThe tools to use for the structured completion resource
debugNamestringNoThe debug name for the structured completion resource
apiUrlReactiveOption<string>NoThe API URL to use for the structured completion resource
threadIdReactiveOption<string | undefined>NoThread identifier used to load or continue a conversation

API Reference


Global Predictions

In this example, we'll assume you are using a global state container (like NgRx). We'll send each action to the LLM and ask it to predict the next possible action a user should consider.

predictions.ts
lastAction = this.store.selectSignal(selectLastUserAction);

predictions = structuredCompletionResource({
  // 1. The resource is re-computed with the last user action
  input: this.lastAction,

  // 2. The system instructions provide the guidelines and rules
  system: `
    You are an AI smart home assistant tasked with predicting the next possible user action in a 
    smart home configuration app. Your suggestions will be displayed as floating cards in the 
    bottom right of the screen.

    Important Guidelines:
    - The user already owns all necessary hardware. Do not suggest purchasing hardware.
    - Every prediction must include a concise 'reasonForSuggestion' that explains the suggestion 
      in one sentence.
    - Each prediction must be fully detailed with all required fields based on its type.

    Additional Rules:
    - Always check the current lights and scenes states to avoid suggesting duplicates.
    - If a new light has just been added, consider suggesting complementary lights or adding it 
      to an existing scene.
    - You do not always need to make a prediction. Returning an empty array is also a valid 
      response.
    - You may make multiple predictions. Just add multiple predictions to the array.
  `,

  // 3. Provide tools to retrieve the current app state
  tools: [
    createTool({
      name: 'getLights',
      description: 'Get all lights in the smart home',
      handler: () => this.smartHomeService.loadLights(),
    }),
    createTool({
      name: 'getScenes',
      description: 'Get all scenes in the smart home',
      handler: () => this.smartHomeService.loadScenes(),
    }),
  ],

  // 4. Specify the structured output schema
  schema: s.object('The result', {
    predictions: s.streaming.array(
      'The predictions',
      s.anyOf([
        s.object('Suggests adding a light to the system', {
          type: s.literal('Add Light'),
          name: s.string('The suggested name of the light'),
          brightness: s.integer('A number between 0-100'),
        }),
        s.object('Suggest adding a scene to the system', {
          type: s.literal('Add Scene'),
          name: s.string('The suggested name of the scene'),
          lights: s.array(
            'The lights in the scene',
            s.object('A light in the scene', {
              lightId: s.string('The ID of the light'),
              brightness: s.integer('A number between 0-100'),
            }),
          ),
        }),
        s.object('Suggest scheduling a scene to the system', {
          type: s.literal('Schedule Scene'),
          sceneId: s.string('The ID of the scene'),
          datetime: s.string('The datetime of the scene'),
        }),
        s.object('Suggest adding a light to a scene', {
          type: s.literal('Add Light to Scene'),
          lightId: s.string('The ID of the light'),
          sceneId: s.string('The ID of the scene'),
          brightness: s.integer('A number between 0-100'),
        }),
        s.object('Suggest removing a light from a scene', {
          type: s.literal('Remove Light from Scene'),
          lightId: s.string('The ID of the light'),
          sceneId: s.string('The ID of the scene'),
        }),
      ]),
    ),
  }),
});

Let's review the code above:

  1. The structuredCompletionResource function is used to create a resource that predicts the next possible user action based on the last action.
  2. The input option is set to a signal that contains the last user action, allowing the resource to reactively update when the last action changes.
  3. The system option provides context to the LLM, instructing it to predict the next possible user action in the app.
  4. The tools option defines two tools that the LLM can use to get the current state of lights and scenes in the smart home.
  5. The schema defines the expected structure of the response, which includes an array of predictions with their types and details.

When the user performs an action, the LLM will predict the next possible actions and return a structured JSON object. From there, you can wire up a toast notification to be displayed when the LLM provides a prediction. When the user accepts the predictive action, dispatch the action and update the state of the app accordingly.


Next Steps

Structured OutputDemoThe structuredChatResource() FunctionSchema InputsProvider EnforcementStructuredChatResourceOptionsAPI ReferenceThe structuredCompletionResource() FunctionStructuredCompletionResourceOptionsAPI ReferenceGlobal PredictionsNext Steps