Transcription: OpenAgents Episode 073 - Agent Builder UI

Source: https://twitter.com/OpenAgentsInc/status/1757111834857926954 Wiki source: https://raw.githubusercontent.com/wiki/OpenAgentsInc/openagents/Video-Series.md Media title: OpenAgents - Episode 073: Agent Builder UI We review an interactive mockup of our ... Upload date: 20240212 Transcription model: mlx-whisper/mlx-community/whisper-tiny Generated at: 2026-06-01T19:05:25Z

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

[00:00] Christopher David: Happy Bitcoin 50k. Let's take a look at some UI improvements. We've got here so I can log in

[00:07] Christopher David: I'll get up

[00:11] Christopher David: and then

[00:14] Christopher David: Okay, I'll list my agents

[00:18] Christopher David: So contextual inferenceer

[00:21] Christopher David: We're gonna call this Connie contextual inferenceer. Connie codemoker. All right

[00:26] Christopher David: So this is our sort of like very basic mockup of the agent builder UI

[00:33] Christopher David: And right now if I click on the three plugins one two

[00:39] Christopher David: three I did define these in a

[00:45] Christopher David: Cedar called Connie cedar

[00:50] Christopher David: But we'll get it working also

[00:52] Christopher David: That I can create all these plugins via the plugin create form

[00:58] Christopher David: Which is not fully

[01:00] Christopher David: Connected now

[01:02] Christopher David: But that's where that is look a nice

[01:09] Christopher David: I would let's think about this so

[01:17] Christopher David: I think eventually we'll get back to the idea

[01:21] Christopher David: We were working with previously this agent graph where you can kind of build your you know the whole idea is your your building an AI agent workflow

[01:29] Christopher David: via these nodes like a graph of these nodes

[01:32] Christopher David: That's when we were thinking of doing it in React and inspired by like graph and level

[01:37] Christopher David: There's actually like a whole bunch of different people doing this basic idea. I do think we're gonna do our own version of that

[01:45] Christopher David: Maybe from scratch

[01:48] Christopher David: Probably not using React but what I have here is just a very basic

[01:54] Christopher David: Flow we using vanilla JavaScript that when I click this

[01:59] Christopher David: It'll add it to here that can click remove

[02:04] Christopher David: So let's make maybe a list of what's missing from here

[02:09] Christopher David: I've got a little scratch pad here

[02:14] Christopher David: So what

[02:17] Christopher David: Missed I

[02:19] Christopher David: Want to button to be able to click to run the flow

[02:29] Christopher David: And given a user input right you got a feed user input into that

[02:39] Christopher David: Extract URLs from a string so the idea is that

[02:43] Christopher David: The types of things that I would put into chatchipyT where I'm like putting in the message

[02:48] Christopher David: And saying

[02:50] Christopher David: Get the code from this link or read the doctrine is link

[02:54] Christopher David: It takes that prompt and then feeds it through this process and gives me a infiltration all at the end

[02:59] Christopher David: So in a button to click to run the flow I

[03:05] Christopher David: Might want to be able to test individual steps

[03:10] Christopher David: That's

[03:15] Christopher David: Maybe lower priority and

[03:19] Christopher David: Then one of the things I'm gonna need is

[03:23] Christopher David: Right now we have it such that the URL extractor plugin returns in array of strings

[03:34] Christopher David: But URL scraper expect a string and I was thinking like we could make it

[03:39] Christopher David: Such that this expect an array of strings just it would pass easily from one to the other

[03:43] Christopher David: But I think that would be like a nice

[03:47] Christopher David: Opportunity to build out some conditional logic

[03:50] Christopher David: Like some sort of little block for

[03:56] Christopher David: Looping through so I've got this kind of separated now

[04:02] Christopher David: Into two different sections you've got plugins these sort of like external wasm plugins using X-Tism

[04:08] Christopher David: And then for now just calling them parse blocks is probably a better word for that

[04:14] Christopher David: But array string loop loop through array of strings right now that won't work because that's not associated with the plugin

[04:20] Christopher David: This is just looping through plugins

[04:22] Christopher David: But you can envision that I would want array string loop to somehow go between these two cards

[04:30] Christopher David: I'll loop through there

[04:33] Christopher David: Let's take a quick look at the code of this

[04:37] Christopher David: And then we'll talk about how we're going to approach

[04:42] Christopher David: Implementing

[04:44] Christopher David: More advanced kind of conditional logic

[04:48] Christopher David: So this is in our agent builder

[04:59] Christopher David: So for the JavaScript interactions we're using a library called alpine jss. It's a very lightweight

[05:04] Christopher David: JavaScript

[05:09] Christopher David: Library that

[05:11] Christopher David: Kind of comes default as part of a

[05:15] Christopher David: Fresh layer of elintulation

[05:18] Christopher David: The other thing I did is for some of these login

[05:21] Christopher David: Flows and like the profile I pulled over some of the basic

[05:25] Christopher David: Interactions from a fresh layer of a

[05:29] Christopher David: And then alpine as well

[05:30] Christopher David: And that basically just ask chat you beat it help me build out the

[05:35] Christopher David: JavaScript

[05:37] Christopher David: of this so

[05:38] Christopher David: Let's try and I'm I don't really like no alpine very well, but let's just we can kind of tell what's going on here

[05:44] Christopher David: So when this agent builder screen component initializes

[05:51] Christopher David: It's getting the initial data from this agent builder function and on in it. It's calling in it

[05:57] Christopher David: And then it's also got a handler I guess for

[06:01] Christopher David: When there's an ad block event it calls the ad block function

[06:06] Christopher David: Okay, so let's go down and look at the

[06:10] Christopher David: actual code of this

[06:15] Christopher David: So at the bottom and got script function agent builder. This is the initial data

[06:21] Christopher David: It's just a JavaScript block with

[06:23] Christopher David: Available blocks this should be filled with blocks from server

[06:30] Christopher David: I guess that's if we're like kind of pre-populating right now. We're not doing that selected blocks in it

[06:37] Christopher David: Placeholder for a fetch available blocks from the server and populate available blocks

[06:43] Christopher David: Or call in the blocks now my call at nodes instead but

[06:47] Christopher David: um

[06:49] Christopher David: You know envisioning that you know plugins is really just one type of these things need to be composed

[06:55] Christopher David: But they're gonna be other things that maybe represent conditional logic so

[06:59] Christopher David: blocks or nodes

[07:01] Christopher David: Then we've got ad block

[07:04] Christopher David: This is if a plugin is clicked on yeah, so it's clone the block object

[07:08] Christopher David: Boba give it any guy D and then push it into selected blocks

[07:13] Christopher David: and

[07:15] Christopher David: Then remove blocks so up here somewhere will probably be a loop through selected blocks

[07:25] Christopher David: Yeah, it's got this syntax which I'm not familiar with but it's from alpine so

[07:32] Christopher David: It's a template of

[07:35] Christopher David: Looping through selected blocks

[07:38] Christopher David: Set the key

[07:40] Christopher David: Preach of the blocks we're going to render a little thing and

[07:46] Christopher David: Pass it the index

[07:49] Christopher David: And then we got a click handler on the button

[07:53] Christopher David: For remove block

[07:57] Christopher David: So that function just like that

[08:01] Christopher David: So we've been previous videos already hooked up such that when we have a

[08:10] Christopher David: Flow like this defined as agent having tasks

[08:17] Christopher David: Attask task having steps we can run that so we basically just need to connect that idea of running it and see the output

[08:26] Christopher David: to the UI here

[08:28] Christopher David: Let's go back to our

[08:33] Christopher David: Thing here and just speculate about this a little bit

[08:37] Christopher David: So a button to click to run the flow

[08:49] Christopher David: We need a way to

[08:51] Christopher David: Connect the loop

[08:53] Christopher David: The like array string

[09:08] Christopher David: Bindically to run the flow

[09:11] Christopher David: Away to see the outputs

[09:23] Christopher David: We

[09:27] Christopher David: Previously had a screen for

[09:32] Christopher David: Kind of testing each individual plug in maybe we could pull that functionality into here

[09:39] Christopher David: So like what do I want to be able to do if I see a plug in here I like to be able to pull it here and kind of test it in isolation

[09:47] Christopher David: And that might be what we do first because I'm not going to be able to run the whole flow anyway until we get this

[09:54] Christopher David: Array string piece so we'll do this maybe as like a series of short videos

[10:01] Christopher David: Where we build each piece of this in order

[10:11] Christopher David: So we'll do this first I want to test to I want to be able to run any

[10:18] Christopher David: Individual block

[10:34] Christopher David: We'll call it plug in because you wouldn't run in a racetring loop

[10:39] Christopher David: I guess you could use dummy data for that

[10:42] Christopher David: So see run any individual plug in

[10:45] Christopher David: Like on the graph we can already run any individual plug in via the separate plug in place, but I want to do it on the graph

[10:56] Christopher David: And see it's output

[11:15] Christopher David: So right now these don't save

[11:26] Christopher David: Oh wait to save and load that you will call them the

[11:31] Christopher David: Block flows

[11:34] Christopher David: So

[11:44] Christopher David: So what I think I want to do is do this one first and just like run into the error called like hey

[11:50] Christopher David: That's not going to work because this is exciting a string

[11:55] Christopher David: So to run this individual

[11:57] Christopher David: Plug in have that work. I want to be able to hit a button to try the entire flow

[12:09] Christopher David: And if I put three back to back where it's all strings that it should you know work the entire thing and show the output of each

[12:17] Christopher David: I want to get the error from

[12:21] Christopher David: Having this output be wrong because it needs to be properly typed via this one

[12:27] Christopher David: So I'd support for that

[12:31] Christopher David: And then we'll do save and load

[12:39] Christopher David: After that then we'll just want like a nicer UI for collecting the prompt

[12:45] Christopher David: Because remember I'm trying to replace my

[12:50] Christopher David: usage of chattpt

[12:53] Christopher David: And then

[12:55] Christopher David: I get to have fun

[12:58] Christopher David: Designing something that I actually want to use it today

[13:01] Christopher David: But first we'll get this kind of agent builder UI logic all built out over the next few videos

[13:09] Christopher David: All right, see you soon