Revolutionizing chatbot interactions with Generative UI

The chatbot serves two main purposes: reporting car damage and checking the status of submitted claims. These tasks can be completed through a simple conversation with the bot using natural language. To enhance the experience, we included interactive components that the LLM can utilize and display as it deems suitable for the given context. The features include:

• Car Selector: Users interact with a custom React component to select their car from a list associated with their account when reporting a claim, rather than using a text prompt.

• Parts Selector: A dynamic diagram allows users to visually select and specify damaged car parts, standardizing the submitted part names and aiding those unfamiliar with the exact terminology.

• Claims List: Users can view a list of their current insurance claims and their statuses through an interactive component that provides real-time data.

• Summary Display: The chatbot compiles the provided information into an interactive summary, enabling users to review, edit, and confirm the details of their report.

async function submitUserMessage(content: string) {
  'use server'
  const aiState = getMutableAIState<typeof AI>()
  aiState.update({
    ...aiState.get(),
    messages: [
      ...aiState.get().messages,
      {
        id: nanoid(),
        role: 'user',
        content
      }
    ]
  })
  let textStream: undefined | ReturnType<typeof createStreamableValue<string>>
  let textNode: undefined | React.ReactNode
  const result = await streamUI({
    model: openai('gpt-3.5-turbo'),
    initial: <SpinnerMessage />,
    system: "[...]", // System promp where we define the app job and desired behaviour
    messages: [
      ...aiState.get().messages.map((message: any) => ({
        role: message.role,
        content: message.content,
        name: message.name
      }))
    ],
    text: ({ content, done, delta }) => {
      // Text streaming logic:
      if (!textStream) {
        textStream = createStreamableValue('')
        textNode = <BotMessage content={textStream.value} />
      }
      if (done) {
        textStream.done()
        aiState.done({
          ...aiState.get(),
          messages: [
            ...aiState.get().messages,
            {
              id: nanoid(),
              role: 'assistant',
              content
            }
          ]
        })
      } else {
        textStream.update(delta)
      }
      return textNode
    },
  })
  return {
    id: nanoid(),
    display: result.value
  }
}

The function first updates the AI state with the new user message and then uses the streamUI helper to return the answer. This example only handles text messages, but it already streams a React node (<BotMessage content={textStream.value} />) instead of plain text.

Now, let's introduce interactivity to the chatbot, using the Car Selector feature as an example. Generative UI relies on function calls, which enable the execution of complex logic, such as fetching and processing external data before rendering a UI component. We define functions available to the model in the tools parameter of streamUI. Here's the code for the showCarSelector function definition:

tools: {
    showCarSelector: {
        description:
          'Show user cars and UI for them to select a car. Use it when you want to ask the user to select a car.',
        parameters: z.object({}),
        generate: async function* () {
          yield (
            <BotCard>
              <CarSelectorSkeleton />
            </BotCard>
          )
          const session = await auth()
          const cars = await getUserCars(session?.user?.id)
          const toolCallId = nanoid()
          aiState.done({
            ...aiState.get(),
            messages: [
              ...aiState.get().messages,
              {
                id: nanoid(),
                role: 'assistant',
                content: [
                  {
                    type: 'tool-call',
                    toolName: 'showCarSelector',
                    toolCallId,
                    args: cars
                  }
                ]
              },
              {
                id: nanoid(),
                role: 'tool',
                content: [
                  {
                    type: 'tool-result',
                    toolName: 'showCarSelector',
                    toolCallId,
                    result: cars
                  }
                ]
              }
            ]
          })
          return (
            <BotCard>
              <CarSelector props={cars} />
            </BotCard>
          )
        }
      },
    //  ...other tools definitions
    }

First, we start by providing a function description to guide the model on when to use it. Next, we define the required parameters (in this case, there are none) and create a generate function, which contains all the logic. Note that this function is asynchronous, which allows for the initial rendering of a skeleton component, followed by fetching data from an external source, updating the AI’s state with a history of messages, and finally presenting the UI component that displays the car selector.

Once the component is displayed, we need to capture user input from it. We can call submitUserMessage when a user selects one of the cars and describe the user's action by detailing the selected car, as shown below:

 {cars.map(car => (
          <Card
            onClick={async () => {
              if (!selectedCar) {
                setSelectedCar(car)
                const response = await submitUserMessage(
                  `[User selected car: ${JSON.stringify(car)}]`
                )
                setMessages(currentMessages => [...currentMessages, response])
              }
            }}
            key={car.id}
          >
            {/* Car details */}
          </Card>
        ))}

Implementing other features follows a similar pattern, with each interactive component having its corresponding tool defined in the submitUserMessage() action.

You can view the final result of the app in this video, Generative UI integration in chatbots: the POC.