Claude Code, Codex, Gemini – parallel agents in one editor | Zed live demo | Gaauwe Rombouts

This talk introduces Zed, a code editor developed primarily in Rust that aims to enhance developer workflow with a focus on speed, collaboration, and agentic workflows. The speaker discusses various frameworks popular in the React ecosystem, particularly Next.js and various integrated development tools like Biome and ESLint. The speaker showcases how Zed supports multiple coding agents, including built-in and external options such as Codex and Gemini, to provide users with extensive functionality for their coding tasks. Throughout the demonstration, the speaker highlights real-time editing features, project collaboration capabilities, and how Zed workflows adapt to different agents and tools in the developer's toolkit. Overall, Zed aims to improve developer productivity through innovative features and seamless integration with modern development tools.

Hello everybody. I'm Haler. I'm an engineer with Z and I want to start with some hot takes. Can anybody tell me their favorite react framework that they use? Next JS. I hear Next JS here. Let me write that quickly down. Anybody think that their framework is better than Next JS? Any Next JS haters here that want an alternative? Don't stack start. Nice. Any other frameworks? React router.

And do you guys use any tools with those frameworks? ES lens pretty standard these days, but front end ecosystem always moving fast. Maybe there are some new linters, some other cool new tools that anybody's using. Not all at once, okay. Excellent. Nice. And then last but not least, something that's moving even faster than the front end ecosystem is of course agents. So does anybody have a agent

that they use in their day-to-day work? I'm guessing some people are using agents here. So don't be shy. I know it's a big group, but anybody have an agent? Cloud. Go. Okay. Anybody using a different agent than Cloud? Or are we all Cloud fans here? Codex. And do we have maybe one more that we can try? Cursor. Oh. All right. So what I want to do now

is I prepared a little skill called the React Summit demo skill and I prepared some offline data with information about the talks that happened today. And what I'm going to do is for the frameworks that were just mentioned, I'm going to build a new project with that framework and possibly a tool that was mentioned in the agent that was required. Um, because in Zed, we support a

lot of different languages, a lot of different tools, but also a lot of different agents. Uh, so let's start with the Zed agent. Uh, I have the Zed agent selected here. Um, but in the Zed agent, we support a lot of providers out of the box. Um, so as a few people already mentioned, uh, Codex, for example, you can sign in through either the OpenAI subscription or

your ChatGPT subscription. I'm already signed in with my ChatGPT subscription. So, let's create, uh, React Summit with and we had some options. Next, yes. Um, people are probably using Biome here, so let's include Biome there as well. And let's have this start. Um, because we're going to create multiple projects, I'm going to create a new work tree now. And you see a new entry, uh, here. Uh,

besides our own agent, we support external agents. Um, we have our own protocol for that called the agent client protocol and it's an abstraction on top of, uh, harnesses that agents can implement. Um, and then other clients can use their own UI on top of it. Um, so I think somebody mentioned Cursor. I don't think I have a Cursor subscription at the moment. Uh, so we can

maybe try another agent. Um, I have a few installed here. If you want more, uh, we support a bunch of different agents from the ACP registry. Um, so let's use in this case Gemini. Um, it's going to load now. It's starting the harness in the background and then we still have our Zed UI that we're used to. So, create, uh, demo with and I think we had

Don't stop start and ox lint. So while that's running, we can create yet another work tree in the background. These agents are still running and another thing that we have is called terminal threads. So if you open terminal threads here, it as the name says opens another terminal because maybe some agents are not supported by either ACP or own Zed agent. One good example of that is

Claude code. We have support for Claude code both in our Zed agent and in ACP, but Claude also Anthropic also announced that their subscription is going to change and that third parties can use the subscription subscription anymore. So it will be based from a specific tokens. But in this case, you can still run Claude as any terminal and it's still an entry inside of Zed here. Still

running parallel from all the other agents. At this point, we got a question from Gemini. Let's just accept it. And [snorts] I will now leave the fate of my demo a bit in the hands of these agents. So while these are running, I wanted to quickly talk about what Zed is. If you haven't heard of Zed yet, we're building a code editor. It's written in Rust. We

don't include any binary for electron or any web technologies like that. We do this by creating our own UI framework also in Rust called GPUI and we support all the major platforms like Mac OS, Linux, and Windows. And even though it's Rust, it might be fun to see that this is our syntax for GPUI components. And if you're a web developer and you've seen Tailwind before, this

might look very familiar to you. Like the margin top, the gaps, children, uh even in the children, we sort of have components. Uh so, this was quite fun for me. I'm a front-end engineer at Zed, uh but even if I look at this Rust code, I can still understand what's happening here, read it, and even help writing new UIs in our editor. And we have three things

that we find very important when we're working on Zed, which is first of all speed. Uh it's a tool that you use every day. Uh it should be fast, it should get out of your way, and should be a nice tool to use. We value collaboration very much, and as I started in the beginning, we have agentic workflow supported. Of course, talking about speed is a bit

hard. Uh you kind of have to feel it. I've been using VS Code for a long time, uh always thought it was okay, uh and then I started using Zed, and you really feel the difference of being able to switch around, click on things, and see instant reaction coming. Uh one example of showing this off is if we go to the Bun code base, you might have

heard that Bun recently was rewritten into Rust. They had this massive PR of more than a million lines of changes, but if I scroll through this, uh we have no problem of viewing this diff. I can open files, I can go back, I can scroll up. Um if you try to open this PR in GitHub, for example, you're not a happy user. Uh it's going to take

a while to load things or even open things. Another cool thing about this speed is you might be working on multiple projects. Uh I work on the zed.dev website, but also on our cloud code base, which does our APIs and our customer-facing dashboard. And in this case, I already have the Bun project open. I can switch to the zed.dev project. My dev service running here. I have

my code here. If I need to switch to another project, I go to our cloud code base. Dev service still running. I can switch between all these projects without any issue, instantly, uh and it gets out of the way in my workflow. Then, another thing uh we find very important is collaboration. Um we are fully remote company. We have people across the whole world from India to

Europe, from North America to South America. Um but we still highly value working together with our colleagues. Uh it's really important to bounce ideas off each other, work together, get to a certain task. Uh and for this we have collaboration supported inside of Zed. As you can see on the side here, we have channels. Um and you can see here some rooms for example, and my colleagues

are actually working together right now. Uh we should probably not join them because that might be a bit confusing. Um but if I Let's just join a room. sure. Sure. And let me mute myself in case somebody joins. Um I'm now in this channel. If anybody else is using Zed and they join this channel, we can talk together through voice. Um but yeah, that's only a small

part. You can do that in Slack, you can do that in Teams. Um but the really cool things is that Okay, you can share your screen. but even cooler is that you can share your project as well. Um if we're both in a channel together and I share my project, we can directly simultaneously edit this code base together. It's Ah, somebody even joined me. you can write

code together. It's sort of like a Google Docs document or Notion, you will see multiple cursors in the code uh moving around. If you want to follow a colleague, you can follow them. If they open new files, the files open for you as well. Um it is as if you're working on a local project. Um and yeah, uh it's how we work together. We're across the whole

world, but we still hang out in these channels almost every day to work together on features. Um and yeah, it's a really nice way uh to be in the same program to do all your work. And then the third pillar that we find really important is the agentic workflows. We already started it before this. Um and if you might have seen it before, we already got a

notification of an agent that's ready. In this case, it's Gemini again, sadly asking for more permissions. So, let's allow a bunch of things. Um and while these these agents are running, we can see they started building something here already. Um [snorts] we have some changes and you can follow the agent around what it's doing at that moment. Uh since they're in different work trees, I can easily

switch between these. Uh did I not start a prompt here? Oh, boy. >> [snorts] >> With Let's see if that can quickly still do something. Um so, yeah, here we have already one that's finished. In this case, it built an application with Next.js 16, uses pnpm, Tailwind, and biome, and it already gave me the URL where this application is currently running. Um I can see what the

agent did, but I can also tell it to do extra things that it needs to solve. For example, in the corner here, we already see some issues. Let's make a screenshot of that. We can paste it back to the agent and say fix these issues. While this is running, we can check out the other one again, which is sadly still asking for Um but as you can

see it didn't add a Git ignore for the node modules yet, which is a shame. >> Um but yeah, as you can see, we're now making some changes here. We told it to fix the issues, and since this this is our set agent, we can see the changes in real time. If you want to have more context, we can open it. The file instantly loads with all

the LSP and language features that you would like from it. let's see if we now refresh this, it actually solved the issue. Um but you can also reference code, for example. So, if we go here and we see this title and think, "Okay, maybe this title can be a bit bigger better." So, if we search for this text, we can find it here. I can select this

code and through a key combination reference it here back again, and I can say change the copy of this text. Uh in this case, it also added Biome. We have a few languages uh supported by default, which is Rust, but here, of course, more importantly, the TypeScript, and Tailwind, uh and also even ESLint. So, if you want to get up and running, you can use it without

doing anything crazy. But, as we said, the front-end ecosystem always moving fast. If you're using something like Biome uh or ESLint, you can go to our extensions, and [snorts] for example, search for Biome. We can install it. And [snorts] I hope that now, if I we can immediately see the errors coming from Biome in our editor. So, even if you're using new tools uh like Biome or

ESLint, uh we got your back. Let's see. Cloud code is probably still working. Gemini is still asking for permissions. Uh yeah, as I said, this demo is an agentic demo. Uh I kind of put my faith into them that they could fix this for me. Uh hopefully, at least, it gives some insight in how you can run these simultaneously. If you still want to write code, um,

or fix some things by hand, we also have our own, uh, edit prediction model called Zeta. Um, so if, for example, I say here const high, don't know if they can complete that. Maybe if we try. And here you see, I don't know if people can see it, but it has light gray suggestions. Um, and if I then tap, it auto completes, um, the code that you

might have wanted to write. It's running NPM lens. Does it already have something working? Would be nice. Cloud code is here as well. Did we have an Ox lens file here? Don't think so. Oh, man, Gemini, what are you doing? Um, but yeah, um, any tool you want to use, um, well, okay, there it goes. Uh, it's finally finished. Uh, so here it is again, it tells

me that the project was created. It used Ox lens. Uh, so let's see if we have We have an index file. Um, and if I go here now, I can, like I showed before, reference this back, for Um, [snorts] but I can also, I think, if I put a console log here, we don't get any errors because this time we're using Ox lens. So, again, we can

go to extensions, install Ox lens here. And if it helps us out this time, it shows an error. And if not, you kind of have to trust my word on this, but luckily you saw it with BIOS, so it is working. Um if we go to this project, I think this had Tailwind. Um so yeah, as I said, it comes out of the box. If I want

to add a margin top here, uh you don't need to do anything fancy. The colors are included, the auto complete is included. Um so if you're a React dev, which you probably are if you're here, um you can download Zed um and get started. Cloud code is finished now as well. I don't think it likes modules node modules this time. Um but the terminal threads are a

bit less integrated um as in we don't have our own Zed UI that we can show you there. Uh so it's just a terminal as you're used to with uh cloud code. But that doesn't mean that Zed doesn't benefit you. Uh you can still Well, it's not a great diff because of the node modules. Uh here we go. Uh you can still use our other features to

help you out after for example cloud code in the terminal created a bunch of code for you. Uh you can view the diffs in Zed. Uh you Well, maybe not the logs. You can reference this code and just like before I can give it the shortcut to even reference it back to the terminal. So yeah, uh it was a bit uh of a demo of how you

can use agents in Zed. Uh we think of ourself as a very open platform. We support hopefully the agent that you use because we understand that companies have different needs. Uh so we have all these agents, languages support, um and overall we're a super fast editor that hopefully helps you out in your day-to-day work. Um if this demo was interested or you want to try out Zed

for yourself, uh as we support all the major platforms. Uh you can go to zed.dev/download to get started. If you're here today with your company, we also have a business If your procurement department has specific needs about certain settings that need to be configured organization-wide, you can go to the set business website which give you a bit more information if that's helpful to you. And last but

not least, yesterday we put out a blog post about Delta DB and our next big vision. Definitely check out the website. We have a blog post about what it is and you can also sign up with your information to, yeah, request early access if you're interested in that. Yeah, thank you very much for your attention and hopefully enjoyed this. >> [applause]