Hashbrown | Generative UI

This React hook creates a chat instance that can generate and render UI components. The result object contains functions and state enabling you to send and receive messages and monitor the state of the chat.

The useUiChat hook provides functionality for generating UI components through chat. This is particularly useful for: - Dynamic UI generation - Interactive chat interfaces - Component-based responses - Building chat-based UIs

API

useUiChat: <Tools extends Chat.AnyTool>(options: UiChatOptions<Tools>) => {
    messages: UiChatMessage<Tools>[];
    setComponents: React.Dispatch<React.SetStateAction<ExposedComponent<any>[]>>;
    lastAssistantMessage: UiAssistantMessage<Tools> | undefined;
    setMessages: (messages: Chat.Message<UiChatSchema, Tools>[]) => void;
    sendMessage: (message: Chat.Message<UiChatSchema, Tools>) => void;
    resendMessages: () => void;
    stop: (clearStreamingMessage?: boolean) => void;
    reload: () => void;
    error: Error | undefined;
    isReceiving: boolean;
    isSending: boolean;
    isRunningToolCalls: boolean;
    exhaustedRetries: boolean;
}

useUiChat{
    messages: UiChatMessage<Tools>[];
    setComponents: React.Dispatch<React.SetStateAction<ExposedComponent<any>[]>>;
    lastAssistantMessage: UiAssistantMessage<Tools> | undefined;
    setMessages: (messages: Chat.Message<UiChatSchema, Tools>[]) => void;
    sendMessage: (message: Chat.Message<UiChatSchema, Tools>) => void;
    resendMessages: () => void;
    stop: (clearStreamingMessage?: boolean) => void;
    reload: () => void;
    error: Error | undefined;
    isReceiving: boolean;
    isSending: boolean;
    isRunningToolCalls: boolean;
    exhaustedRetries: boolean;
}
@paramoptions:UiChatOptions<Tools>
@typeToolsChat.AnyTool
@returns{
    messages: UiChatMessage<Tools>[];
    setComponents: React.Dispatch<React.SetStateAction<ExposedComponent<any>[]>>;
    lastAssistantMessage: UiAssistantMessage<Tools> | undefined;
    setMessages: (messages: Chat.Message<UiChatSchema, Tools>[]) => void;
    sendMessage: (message: Chat.Message<UiChatSchema, Tools>) => void;
    resendMessages: () => void;
    stop: (clearStreamingMessage?: boolean) => void;
    reload: () => void;
    error: Error | undefined;
    isReceiving: boolean;
    isSending: boolean;
    isRunningToolCalls: boolean;
    exhaustedRetries: boolean;
}

Examples

In this example, the LLM will respond with a UI component that can be rendered directly in your React application.

const { messages, sendMessage } = useUiChat({
  model: 'gpt-4o',
  system: 'You are a helpful assistant that can generate UI components.',
  components: [
    exposeComponent(Button, {
      name: 'Button',
      description: 'A clickable button component',
      props: {
        label: s.string('The text to display on the button'),
        onClick: s.function('Function to call when clicked')
      }
    })
  ]
});