Alex's Friction Log

[alexandraM98]

Thoughts and issues while creating a demo for DevPulse in React using wrapped lit components:

• To get the demo working, initially I created additional react components that take a result property of type HarnessRunResult, then looking at the result, the appropriate output is generated (see https://github.com/ExaDev/react-breadboard-components/blob/create-demos-using-component-wrappers/src/demos/breadboard/breadboard-element-renderer/elements/BreadboardError.tsx).

• To keep the runner somewhat separate from the main react component that decides which component to render depending on the run result node type, I created some hooks, one for the board runner and two for retrieving relevant kits (a base one that maps a given list of kits and returns them with asRuntimeKit and a specific one that passes in kits for a specific board such as DevPulse).

• In the main react component that renders each node in the board, I first used a switch statement following the approach used in the main breadboard-ai repository in the breadboard-web package (inside the preview-run lit component).

• Later on, it has been decided to create a BreadboardRunner class that would hold all the breadboard related logic and leave little to no imports of various breadboard related types in the PreviewRun component. Also, the plan was to replace the switch statement that decides what to render for each node with an element map where the key is a string defining the name of the node to be rendered, and the value is a react component corresponding to that node.

• For reference, this is the BreadboardRunner class: https://github.com/ExaDev/react-breadboard-components/blob/create-demos-using-component-wrappers/src/demos/breadboard/BreadboardRunner.ts.

• The plan with the above class was the following: "exporting" the current run obtained from runObserver.runs()[0]; getting the array of events from the current run, then mapping the events in the component, where the events are of type InspectableRunEvent[]. However, the current problem I'm encountering is that I am unable to access the current run from the BreadboardRunner class after instantiating the class in the React component as const runner = new BreadboardRunner(boardUrl, kits).

• Also, unrelated to the above issues, at first, after getting DevPulse set up, I encountered a CORS error when running the DevPulse board (when trying to fetch from the claude api to get the summaries for hacker news posts). Turns out I was forgetting to set the proxy setting in vite.config.ts.