Steve (Builder.io)
@Steve8708 • 132,506 subscribers
CEO @builderio - visually code together
Shorts
Videos
Announcing Builder 2.0 We raised $67M to build collaborative coding for Claude and Codex - Start tasks from a local branch, Slack or Jira - Real-time collab between humans and agents - 100s of parallel agents code, test, review Reply "Builder" and I'll DM you 500 agent credits
Steve (Builder.io)90,017,226 views • 3 months ago
Announcing the Builder Review Agent: in-browser testing of every PR Stop shipping broken code. Let agents verify every change actually works. • Clicks, types, and navigates • Covers critical flows, edge cases, regressions • Hands you findings, repros, & one-click fixes
Steve (Builder.io)22,031,721 views • 2 months ago
Introducing Clips - 100% free, open source, agent-native alternative to Loom Unlike Loom, agent's can fully understand Clips just from a URL. Every Clip comes with APIs and metadata for agents to explore their contents. Agents can "see and hear" anything in a Clip - not just transcripts, but everything visually in the video at any timestamp. Easily share bug reports, feedback, analyses, or anything else in a way that you can easily pass to agents to use to improve products, reports, or more. Also unlike Loom, you own the software, so no one can jack up prices on you suddenly like Loom did to us. Clips is made to be customized. The built-in agent can customize its own code, so you can personalize the app to your needs and workflows. This, in my opinion, is the future of software. Open-source, forkable, customizable with agents, to make your own personal version of anything. You can also import Looms just from a URL and upload videos as well. I got so sick of telling people "don't send me feedback as looms, I can't pass those to agents, I need text and images" that I had to just solve this once and for all. There's a free hosted version you can use too, or fork and self host yourself. Will link to both in the replies.
Steve (Builder.io)229,309 views • 27 days ago
How I've changed the way I do code reviews by using the /visual-recap skill:
Steve (Builder.io)115,866 views • 17 days ago
When I’m trying to improve the user experience of my applications, one of the most valuable things is being able to see an entire user flow as a storyboard. Not just one screen or screenshot at a time. This is something I love using the `/visual-plan` skill for. You can describe any flow you want, and the agent will look through your code and wireframe out a storyboard of what the flow looks like. Then you can visualize the steps in a simplified way and spot areas to improve. Recently, I found that in certain flows we were still asking for organizations, even though I thought I had gotten rid of that and made it automatic. A quick storyboard let me see all the different code paths in a simple, visual, intuitive way. Spot the areas of the flow I didn’t want. And have the agent fix it. Sign up, onboarding, and setup flows are usually some of the most important experiences in your app. And usually the least looked at. Especially because it can be hard to reproduce every flow, for every situation, for every user type, feature flag, or whatever else you have. The `/visual-plan` skill lets you visualize any part of your code. Either to understand the current state, plan out a new state, or recap updates that were made. I’m pretty addicted to this skill. I use it for a lot of other things too, so let me know if you want to see videos on those. And of course it’s all open source. You can grab it on my GitHub. I'll link to it in the thread. If you try it, let me know your feedback.
Steve (Builder.io)146,687 views • 24 days ago
Introducing /visual-plan - a skill to generate rich, visual plans for Claude Code and Codex. Plan mode in Claude Code is incredible. But I always find my eyes glazing over when it gives me this huge markdown essay in my terminal. I found I can make much better visual plans with reusable components. So I made a skill called `/visual-plan`. It generates plans as MDX with visual, interactive components. Diagrams, interactive API specs, schema design changes, annotated code, and even pan and zoomable wireframes. So for any UI work, you can look at a wireframe first, comment on it, iterate, and then have the agent work. I’ve found this to be a much more intuitive interface for reasoning about what the agent is doing. It’s somewhat inspired by that popular post about how HTML is better than Markdown. But HTML can be slow and verbose to write. And it doesn’t look good checked into a repo. This has really made me feel like humans and engineering are entering a new abstraction phase, where we reason about things at the plan level. As long as the plan is good, agents are getting more and more reliable at executing on it. Almost to the degree that we trust the C compiler to compile to assembly reliably. Plans are the new intermediate representation. I also made a skill for the reverse of this, called `/visual-recap`. After the agent works, it gives you a recap of everything it did. Same idea: wireframes, interactive API specs and diffs, schemas, annotated code, etc. So now when you’re reviewing what the agent did for you, or looking at a pull request of somebody else’s code, you can see a visual recap instead of just reading a wall of text. It’s all free and open source. You can find it on my GitHub. Will link to it in the reply because we all know how dumb these algorithms are with links.
Steve (Builder.io)123,794 views • 1 month ago
Introducing the Clips chrome extension - the easiest way to send bug reports to agents with video, transcript, and browser debug info captured automatically. 100% free and open source. If you are like me and get tired of manually typing instructions to agents, attaching screenshots, pasting debug logs, and all of that, this might be your new favorite tool. With the Clips chrome extension, you can just click the Clips icon, hit record, and start talking. Visually demonstrate your issue, go through the flow, point out what’s broken. Clips will capture everything on your screen, plus network requests, browser logs, client errors, and all the details around them. And it redacts sensitive information. Then it gives you a link you can send to humans so they can play it and take a look. Or, more importantly, just give it to your agents by just pasting the URL to them. The link has special metadata for agents so just from the URL, the agent can pull all information from the clip automatically. No plugin or MCP server required. That means it can "see and hear" what’s in the video - read the transcript, grab snapshots at any timestamp, and inspect the logs and network requests that were shared with it. So whether you want to quickly demo an issue and send all that context to an agent, or get better bug reports from teammates, recording and sending Clips makes that super easy. Unlike expensive apps like Loom, this is all 100% free and open source. The framework that powers this, plus a bunch of other free applications, is open source too. You can just sign up and use it, or fork it and customize it to your needs. This, in my opinion, is the future of software. Rather than bloated SaaS that charges you a ton of money and still doesn’t even have the things you need, we get free open source canonical apps that you can fork and customize in any way you want. I'll link to all this stuff in the replies. If you try it, let me know your feedback.
Steve (Builder.io)60,088 views • 23 days ago
Introducing Fusion 1.0, the first AI agent for the full product development workflow • Speaks product, design, & code • Lives in your stack • Learns how your team builds & self improves 10M designs & PRDs turned into real products & features for the worlds largest companies
Steve (Builder.io)391,259 views • 8 months ago
Three skills I use every day in Claude Code and Codex to solve my hardest problems: 1️⃣ /agent-watchdog When I have one agent like Codex working on a task and I don't fully trust it's going to do everything right, I'll open up another one like Claude Code and tell it to watchdog the Codex thread. You can copy the Codex deep link into Claude Code and it'll look at the prompt you sent, watch the Codex thread until it's done, then compare the Codex solution to how it was planning to solve it and automatically fix anything that Codex missed. It can also test the work of the other agent end-to-end. Similar to the idea of OpenRouter's new Fusion feature, I've definitely found that two models thinking through a problem and checking each other's work can be wildly more impactful than just one. 2️⃣ /plan-arbiter Similar ideas as /agent-watchdog - but with this one you have both make plans, compare plans, negotiate the differences, and make a final plan to execute. I find Claude Code is better at writing plans, but Codex is faster and cheaper to execute on them. Then I usually have Claude Code watchdog the Codex work and fix anything that was missed. 3️⃣ /read-the-damn-docs One thing that drives me crazy with coding agents is they're so reluctant to look up docs. They'll just guess and guess and guess at the right API surface for things, or the right solution to an integration of two things. Once I explicitly tell it to look up the docs, it says "Oh, I see the answer," and it fixes the problem. So I made the /read-the-damn-docs skill. Add it and your agents will know when and how to do efficient web searches to look up docs for the types of problems you really should look up docs for. All of these are totally open source over on my GitHub. If you try them, let me know your feedback. Will link to them below:
Steve (Builder.io)42,501 views • 26 days ago
How I have Claude automate anything I do on my computer just by showing it: I use the free Clips app and hit record to start recording. Then I just do the action - like navigating to Rippling and approving any unapproved time off - and I’ll often just talk out loud as I do it explaining any add’l details like I would when showing a human. The Clips app captures everything on your screen and everything you say, and transforms it into a format Claude can “see and hear”. You'll then get a link that you can easily share with Claude (or humans too). I’ll paste it to Claude and say something like, "automate this for me every day at 8:00 AM." The link has special metadata that agents like Claude can discover. It exposes APIs to see the full transcript with timestamps and grab screenshots of what was on your screen at any of those timestamps. Once it's created the routine, you can go to the Routines tab in Claude Code desktop app. This also works with the CLI, Claude Cowork, Codex etc. You’ll see your new routine there, and you can just hit Run Now to have it start running it. Video attached shows this step by step. The Clips apps is free and open source - I’ll link to it and the source code in the thread.
Steve (Builder.io)25,187 views • 20 days ago
i'm a little sick of chatgpt giving me obviously broken code i've found a "micro agent" approach to LLM code generation can work much better the LLM first generates a *test*, and then enters a loop where it generates and iterates on the code until the tests pass source below
Steve (Builder.io)544,171 views • 2 years ago
