Hashbrown | Generative UI

This React hook creates a completion instance that predicts structured data based on input context. The result object contains the predicted structured output and state for monitoring the completion.

The useStructuredCompletion hook provides functionality for predicting structured data based on input context. This is particularly useful for: - Smart form field suggestions - Context-aware recommendations - Predictive UI generation - Intelligent defaults

API

export declare function useStructuredCompletion<
  Input,
  Schema extends  s.HashbrownType ,
>(
  options:  UseStructuredCompletionOptions <
    Input,
    Schema
  >,
):  UseStructuredCompletionResult <
   s.Infer <Schema>
>;

useStructuredCompletionUseStructuredCompletionResult<s.Infer<Schema>>
@paramoptions:UseStructuredCompletionOptions<Input, Schema>
@typeInput
@typeSchemas.HashbrownType
@returnsUseStructuredCompletionResult<s.Infer<Schema>>

Examples

In this example, the LLM will predict a color palette based on a given theme or mood.

const { output } = useStructuredCompletion({
  model: 'gpt-4o',
  system: `Predict a color palette based on the given mood or theme. For example,
  if the theme is "Calm Ocean", suggest appropriate colors.`,
  input: theme,
  schema: s.object('Color Palette', {
    colors: s.array(
      'The colors in the palette',
      s.string('Hex color code')
    )
  })
});