Multi-Agent ChatLab

Summary

I built a simple browser-based “ChatLab” for multi-agent AI experimentation (GitHub link). It is:

• Pure client-side implementation — no server or build system required, all you need is a modern browser and an account/API key with your LLM of choice
• Portable — Encapsulated in a single HTML file (the only external dependencies being Preact and Showdown)
• Secure — your secret LLM API keys don’t get sent to any third party server except the LLM vendor’s
• Versatile — Supports multiple LLM APIs starting with Google Gemini, Anthropic’s Claude, and OpenAI
• Easy to use — Supports rich text (via Markdown), basic color-coding to track different Agents in a conversation, editable message history, tabbed interface makes it easy to customize different Agents to use different system prompts and models, and ability for users to participate directly or to target a given Agent to respond

Motivation

As I explored the potential for multi-agent AI workflows, I quickly hit a wall with existing tools. The chat interfaces and developer tools made available by OpenAI, Google, and Anthropic aren’t built to support multiple participants, and I found myself resorting to cumbersome and error-prone copy-and-paste-and-edit workflows across multiple browser tabs or terminal windows.

So I built this to make it easier to experiment. I hope the MultiAgent ChatLab helps others who want to similarly experiment with multi-agent AI.

Design / Architecture

Streamlined Multi-Agent Conversation Handling

• My experimentation showed the major LLMs could be “encouraged” to act as if they were in conversations with multiple participants just by adding prefixes to messages (i.e. “[OpenAI]: That's a great idea! [Claude]: I agree! [User]: Ok, let's go!“) and passing each message as if it were input from the User.
  
  The challenge was that, without specialized tooling, this required a lot of effort to pass the same conversation history to multiple AI Agents because each message needed to have the right prefix added and then copied into the LLM API payload.
  
  The ChatLab tracks the message history automatically and adds (and strips) those prefixes behind-the-scenes.
• To customize the Agents, the ChatLab allows you to customize each Agent with a unique name (which determines the prefix), model, and system prompt (which gives the Agent instructions to follow) (see below).

User-Friendly Interface

• There is a simple tabbed interface to allow you to direct messages to a particular Agent to respond
• The message history is presented as a simple chat interface with colors that distinguish different agents from one another.
• The message interface also supports in-browser Markdown rendering to display rich-text responses properly
• Individual messages can also be edited and deleted, making it much easier to experiment

How to Use the ChatLab

1. Download the HTML File. You can grab it directly from GitHub. You can also just access it here.
2. Open in modern browser like Chrome. Just open the file locally — no additional setup needed
3. Configure your Agents: Identify the Agents you want participating and use the tabbed interface at the bottom to give them names and system prompts and pick the model you want to use for them
4. Carry out the Conversation.
   • Click on the tab for the Agent you want to start first with. If you want to start the conversation as a User, fill out the text field just below Message:. If you want the Agent to start, leave that text field blank. In either case, hit the Send button to invoke the AI model
   • You can send messages as the User by filling out the Message: field and pressing Send on the tab for the Agent you want to respond.
   • Or, if you just want an AI agent to go next, just press Send after selecting the tab for that agent.
   • If you want more space for the message (or if you just want the AIs to talk to each other), hit the Hide Controls button on the tab bar to collapse the input area. You can press Show Controls to bring it back.
5. Experiment and tweak away
   • You can adjust System Prompts and Models as you go
   • You can also Edit or Delete individual messages if you want the message history to reflect something different. The model will pass every message (and handle all the prefix addition and removal for you) each time

I’ve enjoyed watching AI Agents bantering with each other or with myself. The screenshot below shows some of the back and forth between one agent pretending to be Napoleon Bonaparte and another pretending to be the Duke of Wellington, the British commander who defeated Napoleon at Waterloo.

Conclusion

In an era where AI is increasingly collaborative, tools that simplify multi-agent workflows are essential. It’s my hope that the MultiAgent ChatLab can help more people prototype, experiment, and iterate on this new world of AI agent capability without needing an advanced setup or sharing sensitive API keys with external services.