Generative UI

useGenerativeUI — render interactive components as tool call responses.

Prompt

"Set up my AI assistant"

Ready

The code:

import { useGenerativeUI } from "@inferface/hooks";

const registry = {
  "option-picker": OptionPicker,
};

const { renderToolCall } = useGenerativeUI({
  registry,
  onResult: (toolCallId, result) => {
    // Feed result back to the agent
    resolveToolCall(toolCallId, result);
    // Trigger follow-up completion
    stream.start({ phase: "after_tools", toolResults: { [toolCallId]: result } });
  },
});

// In your render:
{pendingCalls.map(tc => {
  const ui = renderToolCall(tc);
  return ui ?? <FallbackApprovalCard key={tc.id} />;
})}

Generative UI. The agent emits a tool call naming a component (e.g. option-picker). Your registry maps it to a real React component that renders inline.

The user interacts — making selections, adjusting values, confirming choices. When they submit, the result flows back to the agent as a tool result, enabling the next phase of the conversation.

Unregistered tool calls fall through to the standard HITL approve/reject UI from useToolCalls.

🧩

Component registry

Map tool names to React components

🔄

Full loop

User input feeds back to the agent

🛡️

HITL fallback

Unregistered calls get approve/reject

⚡

Streaming compatible

Works with SSE streaming