Chapter 9: Interactive UI - Visualizing Model Responses

[jrbrowning]

Note: The course content has moved to the front-end repository oai-format-tools-ui. A copy of this chapter's content is also available there.

In Chapter 9, we connect the store from Chapter 8 to streaming and completion viewer components. This completes our full-stack application, enabling interaction with five different LLMs (with SSE) through either our frontend React SPA or Python CLI terminal. I look forward to seeing what you build next!

(Looking for previous chapters? Find them here. The main branch contains the latest code, synchronized with the most recent chapter. To review earlier chapters, select the corresponding branch.)

Streaming Viewer

Zustand (using Redux patterns) provides state access through useRootStore, which exposes every defined selector. Accessing the data stream requires only a few lines of code:

  const activeStageId = useRootStore(selectActiveStage);

  const chatChunksSelector = useMemo(
    () => makeStageChatChunksSelector(activeStageId.stage_id),
    [activeStageId?.stage_id]
  );
  const toolResultsSelector = useMemo(
    () => selectStageToolResults(activeStageId.stage_id),
    [activeStageId?.stage_id]
  );
  const toolSummarySelector = useMemo(
    () => selectStageToolSummary(activeStageId.stage_id),
    [activeStageId?.stage_id]
  );

  const chatChunks = useRootStore(chatChunksSelector);
  const toolResults = useRootStore(toolResultsSelector);
  const toolSummary = useRootStore(toolSummarySelector);

Note: useMemo prevents unnecessary remounting of functions when streaming events update the UI in real-time. Since the selector function exists within the updating component and doesn't need recalculation, useMemo memoizes the function result between renders for performance optimization.

Completion Viewer

The completion result follows a similar pattern, extracting store selectors for display:

  const finalText = useRootStore(selectFinalText(activeStage?.stage_id ?? ""));
  const finalToolResults = useRootStore(
    selectFinalToolResults(activeStage?.stage_id ?? "")
  );
  const completionError = useRootStore(
    selectCompletionError(activeStage?.stage_id ?? "")
  );
  const completionDone = useRootStore(
    selectCompletionDone(activeStage?.stage_id ?? "")
  );

With additional shadcn components and transition state logic (which automatically switches to the appropriate output screen based on input selection), our frontend app framework is ready for future development.

Thank you for attending this course!

Drop future course suggestions in the Future Topics

Course Prompts

Explore the codebase with these Copilot prompts:

• @workspace How do selectors enable data access in the components from the store?
• @workspace How does the page UI change automatically after form submission?

---

Questions? Visit the Q&A board