00:00:00Engineering has always been a very collaborative process because of the scale of work and the different roles involved in it.
00:00:05This has changed due to AI, but at the same time it brings new ways of collaboration.
00:00:09Different models have different strengths, either in their roles or in their cost.
00:00:13Let's take one example.
00:00:14It's a well-known fact that the latest Gemini models are really great at designing.
00:00:18They're way more creative than any Claude model, especially if you give them less instructions.
00:00:23But overall, Opus 4.6 is an outstanding model,
00:00:26especially with Claude code as the tooling around it, which is a much more stable tool than Gemini CLI.
00:00:31But there's no efficient way to use these together in a shared workflow.
00:00:35Even if you do try to use them, you'll have to do a lot of the manual work,
00:00:38and there's no way to make these agents do the work autonomously.
00:00:41Recently, we came across a tool that solves this communication problem by letting different
00:00:46agents with different models in them chat with each other and removes us from the middle.
00:00:50Agent Chatter is a chat interface for real-time coordination of AI agents.
00:00:55It supports the three most popular agents like Claude code, the Gemini CLI, and Codex,
00:01:00and also open-source models like Kimi, Quen, and more.
00:01:03You can also use it to save costs by letting expensive agents like Claude do the planning
00:01:07and letting Kimi or GLM do the implementation.
00:01:10It uses a shared chat with multiple channels and lets the agents talk to each other
00:01:14and implement features in coordination.
00:01:16Our initial impression of the tool was that the default UI wasn't that polished.
00:01:20But since this is an open-source project, we forked the original repo and created
00:01:24a visual layer on top of it, which to us looks much better and is easier to navigate
00:01:28with certain changes that suited our needs.
00:01:31We pushed this version to our forked repo while keeping the original functionality intact.
00:01:35But all the credit for the underlying architecture of this platform goes to the original creator.
00:01:40Now, this project actually contains a bunch of scripts
00:01:43that you need to run once for initializing the agents for this tool.
00:01:46These scripts are the entry points to running the system,
00:01:49and without them you can't run any agent.
00:01:51To access these scripts, you need to clone the entire repo.
00:01:54The repo pretty much contains scripts to initialize all of the agents separately.
00:01:58But before you use the scripts, if you're on Mac OS or Linux, you need to have TMUX installed.
00:02:02TMUX is basically a terminal multiplexer.
00:02:05It allows you to create multiple terminal sessions and control them all from a single point.
00:02:09This is what the agent chat uses underneath,
00:02:11to send tasks to each terminal agent that it's running.
00:02:14For those on Windows, you can run the scripts directly and it's going to work for you.
00:02:18They have listed all the commands for running each agent's scripts.
00:02:21So for example, if you're going to be using Claude code and the Gemini CLI together,
00:02:26you copy the commands for them and paste them into the terminal in the folder where you clone the repo.
00:02:31You can select the commands for whichever agents you want to run.
00:02:34Once you paste the command, an agent session is going to spawn up in the TMUX session.
00:02:38You can use as many agents as you like in your setup.
00:02:40For example, you could set up four agents, three Claude sessions, and one Gemini session.
00:02:44But no matter how many agents you use, each one needs to be run in a dedicated terminal.
00:02:49So if you are running four sessions, you need four terminals running side by side,
00:02:53and you'll be able to control them all from the single chat session in the tool.
00:02:56Now, once everything is installed, when you navigate to localhost,
00:03:00you should see all of the agents you started running displayed in the chat panel.
00:03:03Now, in order to make the most out of this tool,
00:03:06there are certain steps that you need to take that will help you work more efficiently.
00:03:09It's recommended to initialize the framework you're using to build your app before using the tool,
00:03:14because this is a point that causes multiple agents to have conflicts even if they are assigned different roles.
00:03:20So make sure your Next.js app or whatever framework you're using is already initialized before you begin.
00:03:25First, since each of the agents is actually running as a separate Claude or Gemini session,
00:03:29you'll have to manually approve permissions for each of them individually.
00:03:33While they also provide scripts to run in skip permissions mode,
00:03:36it's not recommended because with multiple agents, the risk of an agent deleting another's work is much higher.
00:03:42So you'll have to set up the settings.json for both Claude code and Gemini CLI with the appropriate permissions.
00:03:48This way, if a file edit or build command needs to run, it won't wait for your manual approval
00:03:53and at the same time you have control over the dangerous commands.
00:03:56Another important thing is to ensure that the MCP tools are configured in the file as well,
00:04:01or else you would have to approve them too.
00:04:03You should also create an agents.md file.
00:04:05It currently serves as a template containing an optimized structure for using the agents,
00:04:09which later gets filled by them.
00:04:11It includes the role rules, behavior and all principles the agents need to follow.
00:04:15You would also need planning files like a PRD, back-end and UI spec templates,
00:04:20which we currently were using templates for and will get filled later by the planning agent.
00:04:24The purpose of using these templates is to provide structure so the agents don't add unnecessary content.
00:04:30All these templates are available on AI Labs Pro from where you can download and use them on your own.
00:04:35If you've found value in what we do and want to support the channel,
00:04:38AI Labs Pro is the best way to do it.
00:04:40The link is going to be in the description.
00:04:42Another thing this tool lets you do is give a name to each agent and assign it a specific role.
00:04:47This makes it easier to identify the agent and have it work according to a role specifically tailored for it.
00:04:52For example, if you are using Gemini for UI design,
00:04:55you can rename it accordingly and assign it a custom role of UI UX expert.
00:04:59You assign names and roles to each agent so that they operate in accordance with the persona set for them.
00:05:04And lastly, you need to set up certain rules so that the agents follow the tasks properly.
00:05:09As mentioned earlier, you should be using agents.md.
00:05:12But Claude uses Claude.md and Gemini uses Gemini.md
00:05:16and neither uses the other as their key instruction file.
00:05:19So to coordinate them, you use agents.md and add a rule so that they both refer to it as the key guiding file.
00:05:25You can set up multiple rules to fit your needs and add as many as you want.
00:05:29But when you create a rule, it first resides in draft
00:05:31and you have to manually move it to active for the agents to recognize it.
00:05:35Rules are refreshed after every 10 chat triggers, which you can adjust according to your needs.
00:05:39Another thing to note is the loop guard, which by default is set to 4.
00:05:43The loop guard is the maximum number of agent-to-agent hops
00:05:46before the agents pause their tasks and wait for input.
00:05:49It was added to prevent agents from getting stuck in a cross-questioning loop for too long.
00:05:53Once the loop guard is reached, the agents stop communicating
00:05:56and you have to send a continue command to resume.
00:05:59You should increase it if you want the agents to better coordinate with each other for longer.
00:06:03But before we plan the implementation, let's have a word from our sponsor, Airtop.
00:06:06If you're spending hours every week manually scraping data
00:06:10or clicking through dozens of browser tabs, there is a much better way to handle that.
00:06:13Airtop is a cloud-based platform that lets AI agents interact with the web just like a human would
00:06:19using custom or pre-built templates that solve the most annoying manual tasks.
00:06:23Think of it as a cloud browser that handles all the grunt work for you.
00:06:27For example, I'm using a template to research competitor pricing.
00:06:30I just give the agent instructions in plain English, no code required,
00:06:33and it navigates the site, handles the login, and extracts exactly what I need into a clean format.
00:06:39My favorite part is that it bypasses frustrating anti-bot measures and
00:06:43CAPTCHAs that usually break traditional automations,
00:06:46making it incredibly reliable for high-volume work.
00:06:48Build reliable automations in minutes and sign up for Airtop for free right now.
00:06:53Click the link in the pinned comment and start building today.
00:06:56Now once all the steps are completed, it's time to move towards the implementation.
00:07:00As we have always stressed the importance of planning before implementation,
00:07:03you should start with planning here as well.
00:07:05Similar to how Slack channels work, you can create different channels here too.
00:07:09You'll want to set up separate channels for both the front-end and back-end.
00:07:12Once you give the app idea, it actually sends a request to the Tmux session
00:07:16and urges it to check the message because it was mentioned.
00:07:18The planner agent creates a whole plan, notifies you, and asks you to approve or add changes.
00:07:23It documents the plan in the PRD right on top of the template you initially added.
00:07:28You can make changes as you see fit, and it updates the PRD with those changes.
00:07:32This tool uses MCP to let Claude send responses and read chats from the chat interface,
00:07:37making two-way communication possible.
00:07:39Once the plan is confirmed, you ask it to proceed.
00:07:41And once the PRD is approved, it alerts Gemini by itself
00:07:44and asks it to implement the UI spec documents.
00:07:47But then the UI designer and planner agents start coordinating with each other
00:07:51on the implementation details, with the planner suggesting details
00:07:54and the UI designer incorporating those into the plan, and then the review continues back and forth.
00:07:59Now one thing to note, even though we had set the loop guard to 8,
00:08:02it didn't register that for some reason.
00:08:04So we hit the max loops after just 4 iterations and were prompted to continue the conversation.
00:08:08Now the builder gets informed that the plans are ready to implement by the UI designer,
00:08:13and the builder acknowledges that it has received the plans and waits for approval to proceed.
00:08:18The designer agent also alerts you that it wants to proceed with the UI implementation,
00:08:22which you should hold off on until you've reviewed the plans yourself.
00:08:25In the backend channel, you can ask the builder agent and the planner to check the backend.md,
00:08:30which gets created by the planner when it's implementing the PRD.
00:08:33You use them to coordinate with each other to validate the documents,
00:08:37but each of them may identify gaps in the implementation.
00:08:40So they all coordinate with each other and involve the UI designer to deal with the UI specs,
00:08:44having them work together to fix the issues.
00:08:47You can then ask the planner for one more review once they've implemented everything.
00:08:50In our case, they found some additional issues during the final review.
00:08:54After addressing those, all agents confirmed that
00:08:56the issues were resolved and the app was ready to be built.
00:08:59But you don't want to build it just yet. There's one more step you should take.
00:09:02You want to have them review the plans with each other.
00:09:04This tool has multiple modes to try, and you should test the planner mode.
00:09:08You can try out multiple modes for design review, code critique, and more.
00:09:12These modes work in 3 phases with different models playing different roles.
00:09:16You set the planner agent as the presenter, who lays out what it had done previously,
00:09:20and the reviewer agent as the challenger, who critically challenges what the presenter says.
00:09:24The planning agent is the synthesizer, combining the findings from each.
00:09:28The session starts when the presenter presents, after which the challenger critically analyzes
00:09:32the findings and stress tests the documents, identifying a lot of gaps.
00:09:36Because the agents are cross-questioning each other,
00:09:38they're able to identify and fix many issues that would slip through otherwise.
00:09:42After which you end up with the final plan, which marks the end of the 3-phased session.
00:09:46Also, if you are enjoying our content, consider pressing the hype button,
00:09:50because it helps us create more content like this and reach out to more people.
00:09:54Once the review is done, you ask the planner to act as an orchestrator and coordinate with
00:09:58all the other agents to implement the project, using the respective models for their tasks.
00:10:03It acknowledges and has both the designer and the builder work in parallel.
00:10:06It sends messages to both the backend and frontend channels, giving the builder
00:10:10the green light to start building and unblocking the frontend engineer, so they can implement the design.
00:10:15Working with this is really interesting because you essentially just hand over
00:10:18the task to the planning agent and only need to ask it for updates.
00:10:22Having the agents work together is fascinating because they call each other out when mistakes happen.
00:10:26For example, in our case, the UI designer accidentally tried to solve an error
00:10:30that should be the builder's responsibility.
00:10:32Both the planner and the builder agents pointed out that it wasn't supposed to implement the fix,
00:10:37because it overwrote the file the builder was working on.
00:10:39This workflow would be much smoother if you had the agent's work in dedicated work trees,
00:10:44with one agent merging and reviewing everything as a whole,
00:10:47because that would eliminate the issue of agents overwriting each other's work.
00:10:50So that's something to keep in mind for more complex setups.
00:10:53The planner then triggers the review agent, which identifies issues in detail,
00:10:57provides a thorough report, and assigns tasks to the agents.
00:11:01Since we had already set the rule that if any agent needed something from another,
00:11:04it should just ask, the UI designer requested access to a particular variable from the builder,
00:11:09and the builder granted it.
00:11:10Once the review on their end is done, the planner asks you to perform the final front-end review.
00:11:15When you navigate to the development server,
00:11:17you'll find that the UI matches the gamified version you wanted.
00:11:20The landing page has high contrast, giving it a game-like feel,
00:11:23and uses hype words and references that make it exciting to try out.
00:11:26After the typing test, you receive a performance report.
00:11:29The results are displayed on the dashboard, showing the best speed yet,
00:11:33along with current levels and progress, making the design experience immersive.
00:11:37That brings us to the end of this video. If you'd like to support the channel and
00:11:40help us keep making videos like this, you can do so by using the super thanks button below.
00:11:45As always, thank you for watching and I'll see you in the next one.