OpenAI Agent Builder vs Claude: Who Wins Multi-Agent Workflows? (Complete Comparison)

Open AAI is building its complete AI ecosystem and just released the most important part especially for builders and developers. OpenAI's agent builder really surprised me and solved a lot of problems of other platforms and easier solutions bring more opportunities. Along with their agent kit, they've released some massive things. Agent Builder only does half the job, but the rest 50% the selling has never been easier than before. Along with agent kit, OpenAI also released chatkit, a customizable chat interface you can modify, place anywhere, and add any agent, too. They also added widgets, a completely new way to interact with AI apps and agents, and you can build your own. They've released so many new things that make me excited for this new ecosystem. But like any other ecosystem, this one isn't cheap. So, here's a quick word from our sponsor, Speechmatics. Most transcription tools stop at plain text, but in real conversations, that's rarely enough. If you're running a meeting, a customer support call, or building real world agents, you need to know who said what. That's exactly what speaker diorization delivers. With Speechmatics, each speaker is tagged automatically. Even if voices overlap, the audio is noisy, or the speakers have strong accents or different dialects, the system stays accurate. And it's not just English. From Spanish and Arabic to Hindi, you get the same high performance in 55 plus languages. That means your agents are ready to scale globally without changing providers. For developers building on Pipecat, integration is seamless. You don't just get transcripts, you get clarity and context your agents can actually use. And here's the best part. Use coupon code TBC to claim $200 in free credits. Click the link in the description and start building today. Let me start by blessing you with some beginner level info so most of you aren't confused when we get to chatkit. This is a pre-built workflow from Open AI. It's an analyzer that delivers targeted data across commerce and personal use by identifying the category. We start from the start node and it adds the user's input into the conversation history so it remembers chats and exposes this input as text variable so it can be passed on to the next node. Next is the guardrails node. It determines whether the prompt is safe to pass on or not. You select what you wanted to check from the options so you don't have to add anything manually. It can perform moderation and even detect jailbreaking prompts. If it fails, we end the workflow. If it passes, we move on to our first agent. This is the domain selector agent, and it takes the user's message and places it into different categories. Since it's not going to output plain text, we have different output formats here. And we'll choose the JSON one. With N8N, you normally have to do a lot of configuration manually. I don't know if they've added this new AI feature, but here you can just prompt it. This was prefilled with the required data, but I can tell it to classify the incoming input as a vehicle. This will automatically name the output and the variables. This is what natural language workflow building looks like and it's genuinely impressive. Based on the agents output, we have an if else condition. If the input is equal to commerce, it goes to this commerce agent. If it's related to personal, it goes to the personal one. I modified this a little bit to show you the file search feature. Normally, a file search agent would be connected here. But for demonstration purposes, OpenAI has the agent return madeup data related to a user query. In a real workflow, you connect your file search node to a vector store. A vector store is a really good search engine optimized for AI agents. To connect it, you have to create one. When you upload actual data into it, it's going to cost around 10 cents per gigabyte per day. Working with a large data set will cost quite a lot. This agent performs the query in the database. This is the prompt it has right now, but we should convert it. The prompt is now changed to query the database. The fields here were also generated by AI with employee query coming in and the employee name and employee query fields chosen as the agents output. These fields are used for searching in the file search node. You can type double curly braces to put the fields in the prompt. The next executive agent would get the data from the file search node and can give us a structured answer with that data or even in a widget. We will have to change its prompt though. There's also a user approval node which helps build what's called a human in the loop architecture. In this example, you receive a reconciliation proposal which you either approve or reject using the node. If we approve it, the workflow proceeds to the approval agent. Inside, it's instructed to draft a proper response by filling out the data according to a widget structure. This is an email widget. It's going to fill out this email component and present this in the AI chat. There's a tool section inside the agent nodes where you have your standard tools and then MCP servers. For MCPs, there are several official connectors provided by OpenAI. Then from thirdparty developers, we have platforms like Zapier and Pipedream which actually offer multiple MCP servers. To add custom MCP servers, you need to add the remote server link and the API for that. This really opens up a lot of new possibilities with these agents. You might even have a small pop-up agent that can query Google Sheets for specific data while that sheet is open. And all of this is enabled by Chatkit UI. You can even evaluate your agent and run tests by describing pass and fail criteria, making sure everything works before deployment. There's a preview option as well where it runs your agent step by step so you can confirm each node works correctly. Now that you know all the basics, we can move on to the chatkit implementation. To actually build out the beautiful chatkit interfaces, OpenAI has this open-source repo. It's a chatkit project implemented in Nex.js with a backend providing a good base for cloud code to start from. Copy the git link and clone it onto your system. Run npm install and then this command to create a file for your API keys. After using this command to open it in cursor, you can see that you'll need an open AAI API key and your workflow ID from agent builder. Enter the key and run npm rundev and you'll get a demo like this. I can greet it and it'll say hi back because the agent is instructed to simply say it back. OpenAI implemented some amazing tools that take the developer experience to the next level, even for vibe coders. Let's start with the playground. It's a customizer for your chatkit component. You can change the modes, set a custom accent color to match your theme, experiment with different colors, and even change fonts, which is really amazing. This makes customization really accessible, especially for vibe coders. You can even customize the greetings, add start prompts, and choose whether to include a model picker or a tool menu, which allows users to pick from the tools you've provided for your agents. To implement all this customization, you can get the code and give it to your agent, and it'll handle everything. This is an official demo of the chat kit being used as a helper chat within another application rather than the main app itself. The implementation is really nice as the chat is linked to the globe. If I give a prompt, it's going to use the map and move to that location. Finally, the widget builder, which is what I was most excited for. The gallery had beautiful pre-made widgets. We already saw the email one earlier, and there are widgets related to shopping, music, calendars, notifications, and a lot more. This actually reminds me of how they're implementing the new chat GPT apps feature with multiple apps. Spotify had a similar UI like this, so they're probably using widgets there as well. They've also given a component and icon library to custom generate your own widgets. You can either build with claude code using this agents.md file. It has all the proper context for the widget implementation or you can use the native builder. I tested it out but my first prompt actually went really wrong. I wanted it to implement something customizable for food and food intake but it just created a simple card. I was a little clearer with the second prompt and it implemented something better. I wondered whether providing a design reference would help it improve. I had Claude implement one, but I don't think Claude could build a great widget here. However, the widget builder did follow through and created an exact replica. For reference, Claude Code didn't build this with the agents.m MD. This was in HTML. We've covered agent builder and the all the customization tools. Now, let's actually implement one using the playground. I made a custom theme and asked Claude to implement it for me on the base version of chatkit. I updated the agent and said that it should receive an employee name and then feed some dummy data. For the output, I actually chose this widget. I made this using the widget maker by just prompting it. The widget actually turned out really good. To show how to render the widget, I took its default values in the widget maker and input them in the agent prompt box so that the agent always knew the default output format. If I go back now and ask for an update on an employee, it's going to give me the output in this beautiful widget. The widgets also automatically adapt to the UI changes, meaning the changes I make to agent kit are automatically reflected in the widgets, which is really efficient. You can also have your agent as an embeddible chat in the sidebar where it can provide information in the same widget style we've already seen. It's all adjustable using Claude since it's built entirely with React code. This way, it could be a helper bot like the one in the open AI demo. You can also turn it into a full screen fully compatible agent because all the existing functionalities are already built in and provided to you through a template. On the back end, your agent will be running on Open AI's servers. So, you don't have to worry about that. I've customized this one as well with a different style. We gave it our query about preparation for a meeting and it gave us an answer. Right after that, it showed us an update in the form of widgets that I added in and we can add any widgets we want. This version is actually pretty good. And now that you know how to make custom ones with Claude, you can make them and actually sell them. Overall, everything integrates really well in this new OpenAI ecosystem. That brings us to the end of this video. If you'd like to support the channel and help us keep making videos like this, you can do so by using the super thanks button below. As always, thank you for watching and I'll see you in the next one.