feat: Skunksworks - show consuming the "event" from Star-Search SSE

[jpmcb]

Description

This is a skunkswork followup to: https://github.com/open-sauced/api/pull/787

which shows how we can consume the "event" type from a SSE (in this case, the function call) and it's associated payload.

---

This could then be taken to render some components on the client side depending on the function call the model decided to use. This more or less replicates how Vercel's AI SDK works (but without the server side rendering and heavy lifting calling OpenAI happening in the SSE code).

Example, something like:

switch (incomingFunctionCall) {

  case (functionCallEnum.RenderLotteryFactor):
    // render the lottery factor graph with the given json dump from the SSE

  case (functionCallEnum.RenderUser):
    // render the user card for a given user
    // etc. etc.

  break
}

---

In this example ^ I asked a question about Brandon and got back from the server the "searchPrsByAuthor" function call that the model decided to make. In the "data" for that event type, we also get parsable JSON that can be used.

The really tricky thing here is the non-deterministic nature of the model:

1. LLM non-determinism

We can't always be sure the model will use the functions properly (for example, sometimes it doesn't include a required argument in the function call parameters and it has to go back and try again, which, on the second attempt, it usually gets right). For example:

event: function_call
id: 1
data: {"name":"searchPrsByAuthor","arguments":"{\"question\": \"What recent pull requests has @brandonroberts been involved in?\"}"}

event: function_call
id: 2
data: {"name":"searchIssuesByAuthor","arguments":"{\"question\": \"What recent issues has @brandonroberts been involved in?\"}"}

event: function_call
id: 3
data: {"name":"searchPrsByAuthor","arguments":"{\"question\": \"What recent pull requests has @brandonroberts been involved in?\", \"author\": \"brandonroberts\"}"}

event: function_call
id: 4
data: {"name":"searchIssuesByAuthor","arguments":"{\"question\": \"What recent issues has @brandonroberts been involved in?\", \"author\": \"brandonroberts\"}"}

Here, in this example, it tried to use "searchPrsByAuthor" and "searchIssuesByAuthor" without the required "author" field in the parameters. Thankfully, the Zod strongly typed parameters made it go back and try again. And on the second attempt it got it.

We can probably correct for alot of this by ensuring that the client here always has very strongly typed parameter classes that are used to insure the incoming json is correct. If not, we simply throw it out and don't render something and let it say what it'll say.

2. Using "special" tools/functions for rendered components

On the API side, we might consider instructing the model to be aware of some special tools/functions it has access to that get used when it thinks it should render some components on a client that's connected. This, again, delves into the realm of prompt-engineering so we should find one or two really good use cases to prove out the pattern. Maybe renderding the lottery factor table would be a good example. We instruct the model that it has a "renderLotteryFactorTable" function it can call when there are queries about lottery factor for specific repos. That would return a payload like:

event: function_call
id: 1
data: {"name":"renderLotteryFactorTable", "arguments":"{\"repo\": \"kubernetes/kubernetes\"}"}

which could be parsed and using the kubernetes/kubernetes repo name, we render that table.

Related Tickets & Documents

Related to #3353

Mobile & Desktop Screenshots/Recordings

Steps to QA

You'll need a dev server from the API skunkworks PR mentioned early.

Tier (staff will fill in)

• Tier 1
• Tier 2
• Tier 3
• Tier 4

[optional] What gif best describes this PR or how it makes you feel?

[netlify]

✅ Deploy Preview for design-insights ready!

Name	Link
🔨 Latest commit	e01a2d3
🔍 Latest deploy log	https://app.netlify.com/sites/design-insights/deploys/663ec3534f25b100089c8638
😎 Deploy Preview	https://deploy-preview-3367--design-insights.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[netlify]

✅ Deploy Preview for oss-insights ready!

Name	Link
🔨 Latest commit	e01a2d3
🔍 Latest deploy log	https://app.netlify.com/sites/oss-insights/deploys/663ec353187acd00086c36ef
😎 Deploy Preview	https://deploy-preview-3367--oss-insights.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[jpmcb]

Closing as this is surpassed by @nickytonline's excellent work in #3394