3 ms·
OpenUI and JSON-render are some other players in this space. I’m building an agentic commerce chat that uses MCP-UI and want to start using these new implement
by theturtletalks 7mo ago
OpenUI and JSON-render are some other players in this space.
I’m building an agentic commerce chat that uses MCP-UI and want to start using these new implementations instead of MCP-UI but can’t wrap my head around how button on click and actions work? MCP-UI allows onClick events to work since you’re “hard coding” the UI from the get-go vs relying on AI generating undertemistic JSON and turning that into UI that might be different on every use.
- FabianCarbonara 7mo agoIn my approach, callbacks are first-class. The agent defines server-side functions and passes them to the UI: const onRefresh = async () => { data.loading = true; data.messages = await loadMessages(); data.loading = false; }; mount({ data, callbacks: { onRefresh }, ui: ({ data, callbacks }) => ( <Button onClick={callbacks.onRefresh}>Refresh</Button> ) }); When the user clicks the button, it invokes the server-side function. The callback fetches fresh data, updates state via reactive proxies, and the UI reflects it — all without triggering a new LLM turn. So the UI is generated dynamically by the LLM, but the interactions are real server-side code, not just display. Forms work the same way — "await form.result" pauses execution until the user submits. The article has a full walkthrough of the four data flow patterns (forms, live updates, streaming data, callbacks) with demos.