Transcription: OpenAgents Episode 039 - Component-Driven Development

Source: https://twitter.com/OpenAgentsInc/status/1742232060821934216 Wiki source: https://raw.githubusercontent.com/wiki/OpenAgentsInc/openagents/Video-Series.md Media title: OpenAgents - Episode 039: Component-Driven Development We demonstrate the componen... Upload date: 20240102 Transcription model: mlx-whisper/mlx-community/whisper-tiny Generated at: 2026-06-01T20:25:08Z

Machine-generated transcript. Review speaker labels and wording before using this as quote-grade source material.

[00:00] Christopher David: Let's whip up a quick component using our new storybook component driven development flow.

[00:08] Christopher David: I want to show the basic agent metadata here. We have the steps, that's really cool, but

[00:14] Christopher David: like what's the agent's name, what's the task, what is this? I want to have a component here.

[00:20] Christopher David: So this is the actual agent page that's backing or will be backing this chat, but who is it?

[00:28] Christopher David: So let's show a new component. Let's pop over to our storybook, which is here.

[00:36] Christopher David: So we have Canvas with Node. There's just example Node, reasoned the step nodes,

[00:44] Christopher David: but I kind of want to show what agent metadata. I want it to be a node.

[00:56] Christopher David: So we'll do it as a story here. Let's go into our stories.

[01:06] Christopher David: Agent Graph, Components, Node, Node Stories.

[01:14] Christopher David: So this is the story file. You can see here that the one story that we have,

[01:24] Christopher David: step node, it takes the name of the exported function here, and throws that into there.

[01:32] Christopher David: So if I were to do something called, for now it's just called metadata node.

[01:42] Christopher David: It automatically adds metadata node.

[01:48] Christopher David: And it sees exactly what's happening.

[01:52] Christopher David: So for step node we're passing in a step, from metadata node, what should we pass in?

[02:02] Christopher David: Well I think right now on our agent node screen, we have access to the agent and the task.

[02:10] Christopher David: So maybe we want an agent metadata and task metadata.

[02:18] Christopher David: And maybe we won't even call it metadata. Maybe we'll call it agent node.

[02:24] Christopher David: And then we'll also do one for task node.

[02:36] Christopher David: And we'll do agent at the top, task, and then step.

[02:42] Christopher David: Agent task step.

[02:48] Christopher David: And let's do agent for some of the common outtiles node for now.

[02:54] Christopher David: Well you can envision that instead of passing in a step.

[03:00] Christopher David: We're going to pass in an agent.

[03:10] Christopher David: It's to find a demo agent.

[03:14] Christopher David: We have a node.demodata file here.

[03:18] Christopher David: So we'll do export, const demo agent agent.

[03:24] Christopher David: And do I have that type there?

[03:26] Christopher David: Okay, and then for the information itself, I'm using the exact same data from our seated data.

[03:34] Christopher David: We see the data in Consiers, Cedar, setting up the actual steps for the

[03:42] Christopher David: Consiers agent. Validation embedding, similarity search inference.

[03:48] Christopher David: So to get the easy JavaScript representation of that, let's actually pop over to our agent nodes.

[03:56] Christopher David: Or we have that actual data loaded and being passed the agent node.

[04:00] Christopher David: Page and let's just console dump that to here.

[04:08] Christopher David: All right, there it is.

[04:14] Christopher David: So we have created that.

[04:22] Christopher David: And I'm just going to take the exact same thing there.

[04:26] Christopher David: Boom, ID is one.

[04:30] Christopher David: Name is the Consiers tasks.

[04:36] Christopher David: Leave that empty for now.

[04:38] Christopher David: Update it at.

[04:46] Christopher David: User ID.

[04:52] Christopher David: Oh, it's saying agent type does not have.

[04:54] Christopher David: Oh, we didn't really define anything here.

[04:56] Christopher David: So we needed to create it at is a string.

[04:58] Christopher David: ID is a number.

[05:00] Christopher David: Name is a string.

[05:02] Christopher David: Task is an array of tasks.

[05:04] Christopher David: Update it at string.

[05:06] Christopher David: User ID.

[05:08] Christopher David: Okay.

[05:10] Christopher David: That's the data that we have.

[05:14] Christopher David: And while we're at it, let's build up the type for step or task rather.

[05:20] Christopher David: We have agent ID number.

[05:24] Christopher David: Create it at string.

[05:28] Christopher David: Description string.

[05:30] Christopher David: ID number.

[05:32] Christopher David: Output.

[05:34] Christopher David: We don't know what that's going to be.

[05:36] Christopher David: We're going to say any prompt.

[05:38] Christopher David: I don't think we're using that.

[05:40] Christopher David: I'm going to try leaving that off for now.

[05:42] Christopher David: Steps is an array of steps.

[05:44] Christopher David: And update it at.

[05:46] Christopher David: String.

[05:49] Christopher David: Okay.

[05:50] Christopher David: That was good.

[05:54] Christopher David: And maybe we want to do.

[05:56] Christopher David: Export const demo task.

[06:00] Christopher David: Let's just do this too.

[06:02] Christopher David: Over here.

[06:06] Christopher David: User ID.

[06:08] Christopher David: One.

[06:12] Christopher David: Create it at.

[06:14] Christopher David: Boom.

[06:17] Christopher David: Description.

[06:19] Christopher David: Here's the task.

[06:20] Christopher David: Respond to user chat message after consulting knowledge base.

[06:23] Christopher David: That is the main task of the const yearge.

[06:27] Christopher David: Output is.

[06:30] Christopher David: No.

[06:32] Christopher David: Steps.

[06:34] Christopher David: We'll put demo steps.

[06:37] Christopher David: I need to reorient that to be up there.

[06:46] Christopher David: And what else updated that?

[06:53] Christopher David: How's that look?

[06:56] Christopher David: Our demo steps defined.

[07:00] Christopher David: If something is still expecting the singular demo step.

[07:03] Christopher David: Just use the first one.

[07:05] Christopher David: Demotast demo agent.

[07:10] Christopher David: And for the task of the demo agent, we'll put in the demo task inside your right there.

[07:16] Christopher David: Okay.

[07:17] Christopher David: That looks good.

[07:18] Christopher David: I'll commit that.

[07:20] Christopher David: Right here we are.

[07:23] Christopher David: Metadata.

[07:25] Christopher David: Okay.

[07:26] Christopher David: So say.

[07:27] Christopher David: Update.

[07:29] Christopher David: Consiers.

[07:31] Christopher David: Node.

[07:32] Christopher David: Demot data.

[07:34] Christopher David: Say update.

[07:37] Christopher David: Agent types.

[07:40] Christopher David: We don't need.

[07:45] Christopher David: We don't need to log the console to scar that change.

[07:48] Christopher David: Let's go back to our node.

[07:50] Christopher David: Stories.

[07:52] Christopher David: Okay.

[07:53] Christopher David: So for demo agent, I should be able to just pull that in.

[07:56] Christopher David: So that exists.

[07:59] Christopher David: We might not even need a separate task node.

[08:05] Christopher David: Okay.

[08:06] Christopher David: So it's complaining because there's no where that we're defining that agent is an appropriate

[08:13] Christopher David: org or type.

[08:16] Christopher David: To be passed to the story object, the component for which is node.

[08:21] Christopher David: So a node can take an agent or it can take.

[08:28] Christopher David: It can take a step or it can take an agent.

[08:31] Christopher David: Let's go take a look at our node props.

[08:33] Christopher David: Yeah, we're saying position is optional.

[08:36] Christopher David: Step is optional.

[08:37] Christopher David: If there is a step, it needs to be up type step.

[08:40] Christopher David: If there is an agent, it needs to be up type agent.

[08:46] Christopher David: Now does that make our story stop complaining as it does?

[08:53] Christopher David: Now we just need to implement the functionality for it.

[08:59] Christopher David: Right now in the node, we're saying if there's no step, return nothing.

[09:08] Christopher David: Eventually we'll kind of extract this out with a nicer switch statement with different sub components based on the type of node.

[09:14] Christopher David: But for now, let's just do this.

[09:24] Christopher David: Agent does not know return an agent node.

[09:39] Christopher David: And let's first just get this displaying here.

[09:44] Christopher David: The title of the node bar will be agent dot name.

[09:52] Christopher David: Let's see if we see anything here.

[09:55] Christopher David: Okay, look at this.

[09:57] Christopher David: We have a dragable node called the Concierge.

[10:08] Christopher David: For node content, agent description does that work.

[10:16] Christopher David: Does agent have a description?

[10:21] Christopher David: Maybe we should do the first task.

[10:26] Christopher David: Hmm.

[10:29] Christopher David: We're going to give you a step's agent task length.

[10:49] Christopher David: Our agent task steps length does that work.

[10:58] Christopher David: Task zero steps.

[11:00] Christopher David: Steps for nice.

[11:05] Christopher David: Look how easy that looks.

[11:07] Christopher David: Type make things easy.

[11:09] Christopher David: Okay, the Concierge.

[11:15] Christopher David: Then we get out of the things like belongs to etc.

[11:21] Christopher David: Did that mess up anything of our step node?

[11:27] Christopher David: No.

[11:28] Christopher David: Okay, basic agent node.

[11:39] Christopher David: How do you really need the steps count in there?

[11:43] Christopher David: Let's see how looks on our canvas with four nodes.

[11:47] Christopher David: I'm going to go to the canvas stories.

[11:51] Christopher David: And with four nodes, watch this.

[11:54] Christopher David: Let's do a node.

[11:58] Christopher David: Let's say agents is demo agents.

[12:03] Christopher David: And I'll have to read checker the coordinates here.

[12:07] Christopher David: Let's just try the 5050.

[12:14] Christopher David: Let's go that with five nodes.

[12:19] Christopher David: And let's maybe center that.

[12:30] Christopher David: Move down everything else by 100.

[12:40] Christopher David: Okay.

[12:41] Christopher David: Now we got to fix our canvas.

[12:43] Christopher David: It's kind of going off screen there.

[12:50] Christopher David: So look how easy that was to define an agent node.

[12:55] Christopher David: It's easy and isolation.

[12:57] Christopher David: It's not fully done, but it's good enough for now.

[13:00] Christopher David: I just want to be able to start putting it in the flow and starting to reason about that.

[13:05] Christopher David: So add agent node to canvas story.

[13:11] Christopher David: And then there's the last step.

[13:12] Christopher David: Let's go drop it in there.

[13:15] Christopher David: Let's go to our agent nodes.

[13:18] Christopher David: And where we have we're looping through all of the steps.

[13:22] Christopher David: Let's also make a node where we pass in the agent.

[13:27] Christopher David: And we set, oh, thank you co-parlots.

[13:33] Christopher David: Oh, it's behind everything.

[13:38] Christopher David: Let's change the y coordinates of these.

[13:41] Christopher David: Move that down.

[13:42] Christopher David: Let's put that in kind of the center.

[13:44] Christopher David: And then we have the center of the center.

[13:49] Christopher David: And then we have the center of the center.

[13:54] Christopher David: And then we have the center of the center.

[13:59] Christopher David: And then we have the center of the center.

[14:02] Christopher David: And then we have the center of the center.

[14:05] Christopher David: And then we have the center of the center.

[14:08] Christopher David: And then we have the center of the center.

[14:12] Christopher David: Node and say task number agents dot task.

[14:21] Christopher David: Oh, does it have a count?

[14:29] Christopher David: Does not have a count?

[14:31] Christopher David: Is it good to just do task ID?

[14:33] Christopher David: And task number 49.

[14:42] Christopher David: Well, it's the first task.

[14:49] Christopher David: Well, we're hard coding in the first task.

[14:52] Christopher David: I'm just going to say task one.

[15:02] Christopher David: I'm just going to move it for now.

[15:04] Christopher David: Agent can have multiple tasks.

[15:06] Christopher David: Okay, so we can repeat the same process for a task node.

[15:08] Christopher David: We want to do everything.

[15:09] Christopher David: Okay, so let's push that up.

[15:12] Christopher David: Make sure our task pass and merge it.

[15:17] Christopher David: And this is what's.

[15:20] Christopher David: Put agent node on agent nodes page.

[15:27] Christopher David: Building worked fine.

[15:28] Christopher David: Publish the branch.

[15:33] Christopher David: Open a PR.

[15:35] Christopher David: See this process that I'm going through.

[15:37] Christopher David: I want other people to be able to go through to.

[15:39] Christopher David: So like add agent node.

[15:44] Christopher David: And story.

[15:46] Christopher David: I'll create the pull request that will have my test start running.

[15:50] Christopher David: I'm going to upload a screenshot of what I built.

[15:55] Christopher David: I'm going to take a picture of it right there.

[16:06] Christopher David: Agent and steps.

[16:21] Christopher David: There.

[16:38] Christopher David: So you're running through our tests.

[16:40] Christopher David: And making sure you can fill our front end.

[16:44] Christopher David: Our test pass there.

[16:45] Christopher David: We didn't make any back end changes.

[16:47] Christopher David: So that is component driven development.

[17:07] Christopher David: Everybody.

[17:08] Christopher David: And encourage you to take a look at this component driven.org to learn about the philosophy there.

[17:13] Christopher David: But this is something that if there's some component that you want to see like a.

[17:18] Christopher David: Lightning, sats, payments.

[17:21] Christopher David: Visualization, even stuff that hasn't been specced out in terms of the actual functionality.

[17:25] Christopher David: To be able to quickly whip up stories and demonstrate how components work.

[17:31] Christopher David: It's that anybody can now make changes to this repo.

[17:35] Christopher David: Very cool.

[17:36] Christopher David: So add agent node and story.

[17:39] Christopher David: School washing merge.

[17:44] Christopher David: Delete that branch.

[17:47] Christopher David: Get check out main and get pull.

[17:53] Christopher David: And I'll go show you in and voice how that deploy is.

[17:58] Christopher David: This is said to auto deploy from main branch.

[18:01] Christopher David: So now that the PR has been merged.

[18:04] Christopher David: And the project is a bit of a bit of a bit of a bit of a bit of a bit of a bit of a bit of a bit of a bit of a bit of a bit of a bit of a bit of a bit of a bit of a bit of a bit of a bit of a bit of a bit of a bit of a bit of a bit of a bit of a bit of a bit of a bit of a bit of a bit of a bit of a bit of a bit of a bit of a bit of a bit of a bit of a bit of a bit of a bit of a bit of a bit of a bit of a bit of a bit of a bit of a bit of a bit of a bit of a bit of a bit of a bit of a bit of a bit of a bit of a bit of a bit of a bit of a bit of a bit of a bit of a bit of a bit of a bit of a bit of a bit of a bit of a bit of a bit of a bit of a bit of a bit of a

[18:34] Christopher David: bit of that is maybe done.

[18:37] Christopher David: Straightbooking kind of aggressively cash things sometimes.

[18:42] Christopher David: That should be up in a minute.

[18:49] Christopher David: Oh, I see.

[18:50] Christopher David: It needs to build it and then it deploys it.

[18:56] Christopher David: Seems like that's done.

[19:00] Christopher David: Do a hard refresh.

[19:00] Christopher David: There we go.

[19:01] Christopher David: With five notes.

[19:03] Christopher David: So that is now live at storybook.openagents.com.

[19:07] Christopher David: Anybody can go there, can click canvas, can click.

[19:10] Christopher David: Oh, yeah.

[19:10] Christopher David: So sometimes the like caching hasn't fully auto finished.

[19:15] Christopher David: So you just got to do a hard refresh.

[19:16] Christopher David: That's just a storybook.

[19:18] Christopher David: Get that pages thing.

[19:19] Christopher David: But you see agent node.

[19:20] Christopher David: There's our agent node.

[19:22] Christopher David: Stepnodes still works.

[19:24] Christopher David: I think there's both auto documented now.

[19:25] Christopher David: Yep.

[19:26] Christopher David: We've got node agent node.

[19:28] Christopher David: Stepnode.

[19:29] Christopher David: Well, it's a better containerization for that.

[19:32] Christopher David: Five nodes and has our.

[19:39] Christopher David: Yep, it's deployed live.

[19:40] Christopher David: Open agent.com slash agent slash one.

[19:44] Christopher David: Now, it's our new node.

[19:46] Christopher David: Easy.

[19:47] Christopher David: Now let's just do that for the rest of the whole application.

[19:51] Christopher David: Yeah.