generateComponent

This function is used to generate a component based on the user's input. It will return a promise that resolves to a GenerateComponentResponse object (described below), which may include a component and a message to display to the user.

const response = await hydraClient.generateComponent(
    "I want to see all my meetings for today",
    handleProgressUpdate
);
 
//display the response.component and response.message somewhere in the UI

Parameters

input: string required

The user's input. This is the natural language string that Hydra will use to understand the user's intent and decide which of the registered components (if any) to generate.

handleProgressUpdate: (progress: GenerateComponentResponse) => void optional

An optional callback function that Hydra will call at each major step of the component generation. This is useful for displaying loading messages during intermediate steps.

The GenerateComponentResponse object has a stage enum property that can be used to determine the current stage of the component generation, described below.

GenerateComponentResponse object

The GenerateComponentResponse object is returned by the generateComponent function.

export interface GenerateComponentResponse {
    component?: ReactElement | null;
    message: string;
    stage: GenerationStage;
    loading: boolean;
    suggestedActions?: SuggestedAction[];
}

Fields

component: ReactElement | null

The component to display to the user, or null if the component is still being generated or if Hydra has decided that no registered component is appropriate for the user's input.

message: string

A message to display to the user, or the "AI response" to the user's input, which into account the chosen component.

stage: GenerationStage

The current stage of the component generation. The possible values for stage are:

• CHOOSING_COMPONENT: Hydra is choosing which component to generate based on the user's input.
• FETCHING_CONTEXT: Hydra is fetching additional context for the chosen component using one of the component's context tools.
• HYDRATING_COMPONENT: Hydra is generating the props for the chosen component.
• COMPLETE: Hydra has finished generating the component and the response contains the component and a message to display to the user.

loading: boolean

A boolean value that indicates whether the component is still being generated or not.

suggestedActions: SuggestedAction[]

A list of suggested "next steps" to display to the user, generated by Hydra based on what the user's intent seems to be.

Each suggested action is an object with a label and actionText property.

The label is the short text to display to the user describing the action, and the actionText is the full message to send to Hydra on behalf of the user when they select the action.