Transcription: OpenAgents Episode 008 - Agent UX Design

Source: https://twitter.com/OpenAgentsInc/status/1722742595409830389 Wiki source: https://raw.githubusercontent.com/wiki/OpenAgentsInc/openagents/Video-Series.md Media title: OpenAgents - Episode 008: Agent UX Design We review our completed feature tests and... Upload date: 20231109 Transcription model: gpt-4o-transcribe-diarize Generated at: 2026-05-31T23:09:17Z

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

[00:00] Christopher David: So check this out. We've got our feature tests done.

[00:04] Christopher David: User can create an agent.

[00:06] Christopher David: User can upload a file.

[00:07] Christopher David: User can create a conversation.

[00:09] Christopher David: User can send a message in a conversation.

[00:11] Christopher David: Agent can send a message in a conversation.

[00:14] Christopher David: I'm going to run our test suite.

[00:16] Christopher David: And we have 60 passing tests.

[00:21] Christopher David: Here's the unit tests we did yesterday.

[00:25] Christopher David: And then we've got feature tests.

[00:28] Christopher David: agent test we did that in the video those are the auth tests and then we now have chat tests like for example user can create a conversation creating a demo user creating an agent asserting that there's no conversations calling the create a conversation endpoint asserting that the conversation exists very basic stuff just interacting with the models that we created previously create a conversation that's profiles from previous

[00:56] Christopher David: And then send message test.

[00:57] Christopher David: Users can send a message,

[00:59] Christopher David: body cannot be null,

[00:59] Christopher David: conversation ID cannot be null,

[01:01] Christopher David: and agent can send a message, as well as upload a file via API.

[01:07] Christopher David: So that's all working. You can check out the code on the usual place.

[01:15] Christopher David: My ugly but hopefully readable commit history there.

[01:24] Christopher David: Before we start,

[01:24] Christopher David: here is a view of the New York City skyline. Isn't that nice?

[01:29] Christopher David: I don't know if you can see it.

[01:36] Christopher David: I don't have my mount thing,

[01:38] Christopher David: so you're going to have to get used to that.

[01:43] Christopher David: Let's do the UX design.

[01:47] Christopher David: So we've got,

[01:48] Christopher David: like...

[01:49] Christopher David: core functionality in place for interacting with our oh

[01:57] Christopher David: i'm sorry i didn't swap over i'm new to ecamm everybody

[02:03] Christopher David: new to ecamm there there's a better money shot with the glare but that's all right all right let's try this again edit

[02:13] Christopher David: that out editor

[02:19] Christopher David: Okay.

[02:23] Christopher David: So we have core functionality in place.

[02:27] Christopher David: Basics, I'm sure there's some stuff that we're missing.

[02:32] Christopher David: But our little agent first principles that we mocked up, the data models,

[02:39] Christopher David: these are all implemented via unit tests.

[02:42] Christopher David: These are all implemented via unit tests,

[02:44] Christopher David: and then we've got feature tests for these five because we thought that this would be the first thing that we're going to want in place.

[02:54] Christopher David: Now we really just need an interface and to connect the interface.

[02:58] Christopher David: And so in this video, we're going to design the user experience. So UX design is what we'll call it.

[03:08] Christopher David: And we want this to be as simple as humanly possible.

[03:19] Christopher David: Right now we have a web page, openagents.app,

[03:24] Christopher David: openagents.

[03:26] Christopher David: And what I want this to be is like the absolute.

[03:32] Christopher David: dirt simplest possible workflow i want there to be to be a button here that's like try it and then i wanted to do nothing other than prompt you to upload a document um previously i was thinking well maybe the first thing should be you name your agent there's other settings that you could do no we're going to be the simplest possible thing

[03:57] Christopher David: The core thing that we need is some like relevant piece of knowledge.

[04:02] Christopher David: Like I have PDFs of AI papers or ocean engineering specifications or whatever I want to interact with in a cool way.

[04:12] Christopher David: They're all in basically PDFs.

[04:16] Christopher David: I want to be able to upload a PDF and then just have magic happen.

[04:22] Christopher David: So, let's pop over to Excalidraw over here,

[04:26] Christopher David: and let's mock up some things.

[04:29] Christopher David: So, here we'll put, we're going to make this like horribly basic.

[04:37] Christopher David: Home page, and I want this, I like the hand-drawn font,

[04:42] Christopher David: just so it looks like really rough.

[04:46] Christopher David: I'll make that larger.

[04:48] Christopher David: Homepage.

[04:51] Christopher David: Okay,

[04:52] Christopher David: so this is going to say open agents.

[04:57] Christopher David: This is going to say blah,

[04:58] Christopher David: blah, blah.

[05:01] Christopher David: Actually make that two lines.

[05:03] Christopher David: This one will be larger.

[05:13] Christopher David: Do another text here that says blah, blah, blah.

[05:17] Christopher David: And

[05:23] Christopher David: then there will be a button that says try it.

[05:38] Christopher David: Next will be the...

[05:49] Christopher David: Call it the dashboard for now.

[05:58] Christopher David: No, we'll call it start.

[06:03] Christopher David: And it's going to have a

[06:07] Christopher David: text box.

[06:11] Christopher David: Not a text box, like a drag and drop thing.

[06:21] Christopher David: Drop a file here,

[06:26] Christopher David: and there might be a little bit of explanation down here,

[06:30] Christopher David: blah,

[06:30] Christopher David: blah, blah, blah, blah, blah, blah, blah, and on this screen there's going to be literally nothing you can do except for dropping a file here,

[06:42] Christopher David: and what's going to happen when you drop a file here?

[06:47] Christopher David: Well, it's going to make a post request to our now working files.store endpoint,

[06:56] Christopher David: which is the name of the route, and the actual endpoint is API files.

[07:04] Christopher David: Maybe I'll make a little note for that here.

[07:11] Christopher David: So post.

[07:13] Christopher David: API files and I'll make this in the readable file so we can see that it's maybe

[07:25] Christopher David: little arrow yeah

[07:31] Christopher David: there's not even gonna be a button you're just gonna drop a file there it's

[07:38] Christopher David: gonna post the file to the back end

[07:46] Christopher David: And should we go to a different page? No, we'll stay on the same page.

[08:02] Christopher David: So let's move this over here.

[08:05] Christopher David: This arrow will point to there.

[08:11] Christopher David: This arrow will point to there.

[08:16] Christopher David: Not pretty,

[08:16] Christopher David: I don't care.

[08:19] Christopher David: Okay, so you upload a file.

[08:27] Christopher David: So let's just stick with just the functionality that we've built.

[08:31] Christopher David: Let's review it.

[08:33] Christopher David: User can create an agent.

[08:43] Christopher David: We may just kind of consolidate with that with the upload a file or do that in the background.

[08:48] Christopher David: We may not even hit the end point.

[08:49] Christopher David: So we might refactor that a little bit just to kind of skip over hitting two end points.

[08:55] Christopher David: Sort of like minimize the steps and get someone to the meat of interactions as soon as possible.

[09:03] Christopher David: So given that the only other functionality that we have implemented...

[09:08] Christopher David: is can create a conversation,

[09:11] Christopher David: can send a message in a conversation.

[09:15] Christopher David: And to keep things simple of not having multiple conversations,

[09:18] Christopher David: it's just going to be let's just give you a box to chat with your document.

[09:28] Christopher David: But Chris,

[09:29] Christopher David: that's not full agent functionality. We're not building full agent functionality.

[09:32] Christopher David: We're doing one thing that actually works.

[09:35] Christopher David: And rather,

[09:36] Christopher David: we've already built the functionality.

[09:37] Christopher David: We're just building the simplest possible interface so we can start to interact with this and then reason about what else we want to build.

[09:47] Christopher David: So what are we going to see?

[09:49] Christopher David: Well,

[09:50] Christopher David: you know what?

[09:51] Christopher David: I really like the kind of refurbished chat GPT redesign.

[09:58] Christopher David: This like looks and feels really nice. And you can tell that they spent some of their,

[10:04] Christopher David: you know.

[10:05] Christopher David: billions of dollars in funding on like some designer uh to like make this real nice and so obviously we're just going to steal the fuck out of all of this okay so we're going to have it look exactly like the chat gpt interface thank you for the design folks so um yeah maybe we'll put a little bar should we put a bar on the side maybe

[10:27] Christopher David: in the beginning there won't be a bar maybe it'll just be this part here so this yeah we'll put this little blurb here

[10:36] Christopher David: We'll put that there,

[10:39] Christopher David: and we'll say chat with your - see,

[10:44] Christopher David: chat with your document - I mean that's basically what it's going to be first because the first implementation for the actual message generation will probably be some very simple like rag lookup. We'll put in some like -

[10:58] Christopher David: third-party rag integration or maybe we'll experiment with we have we're using postgres so we can use pg vector maybe we'll use our um our new embeddings endpoint to generate embeddings from the document that's probably what we'll do and then do some kind of cool rag paired with our um gptopia inference um but in the beginning it's going to be very simple kind of chat with your document

[11:26] Christopher David: So, and then later on once it gets a little smarter than that then we can call it, you know, chat with your agent where you can maybe create some tasks,

[11:36] Christopher David: other data models that we've created unit tests for but not yet feature tests for and we'll reason about that sort of batch of feature tests once we get a very basic working product here to chat over a document. That's a good starting point.

[11:53] Christopher David: Given that it's only going to take us like two days to get all of this something working,

[11:58] Christopher David: I'd rather take a couple days to put out something simple that you can actually play with, and then we'll evolve it from there.

[12:04] Christopher David: So this is going to say chat with your agent,

[12:07] Christopher David: and down here there's going to be a,

[12:10] Christopher David: how's

[12:13] Christopher David: it look over there, send

[12:21] Christopher David: message.

[12:25] Christopher David: And then there's going to be a button.

[12:35] Christopher David: There's the box.

[12:46] Christopher David: So I'll put some text here.

[13:01] Christopher David: And then when they click this,

[13:04] Christopher David: it will post an API to what we call messages,

[13:09] Christopher David: post API messages,

[13:10] Christopher David: and it will obviously show up on

[13:17] Christopher David: the screen there.

[13:28] Christopher David: So,

[13:29] Christopher David: one thing if you didn't know is that this is the core functionality of something that multiple people,

[13:37] Christopher David: hackers,

[13:37] Christopher David: startups are basically charging money for currently.

[13:43] Christopher David: There's so many different permutations of chat over your documents and we're just going to have this and it's going to work and it's going to be connected to our swarm backend.

[13:55] Christopher David: Let's see if we can get this done and implemented by tomorrow-ish.

[13:59] Christopher David: So I think this is a great start,

[14:01] Christopher David: very basic,

[14:03] Christopher David: but something that should be pretty achievable for us to create, and we will do that in the next video.

[14:10] Christopher David: See ya.