46:44
Multi-agent patterns in VS Code you won't learn from docs | BRK201
Visual Studio Code
Overview
This video showcases a live coding competition where developers build a collaborative markdown editor using various AI-powered tools and patterns within VS Code. The competition highlights different approaches, from manual coding with AI assistance to fully agent-driven development. It explores the capabilities and limitations of current AI tools in software development, focusing on rapid prototyping, real-time collaboration, and the evolving landscape of AI in the coding workflow. The event culminates in a vote for the most impressive implementation, demonstrating the practical application of multi-agent patterns.
How was this?
Save this permanently with flashcards, quizzes, and AI chat
Chapters
- The event is a live coding competition focused on multi-agent patterns in VS Code.
- This year's challenge is to build a cloud-based collaborative markdown editor, a real-world problem.
- Four contestants will build the editor using different tools: VS Code local agent, Copilot CLI, Copilot app, and Agent app.
- Kent C. Dodds and the host will build a voting app to allow the audience to vote on the best implementation.
This sets the stage for the competition, introducing the core problem and the diverse tools and approaches that will be explored, highlighting the practical application of AI in development.
The challenge is to build a cloud-based collaborative markdown editor, inspired by a tweet asking for a Google Docs-like experience for markdown.
- The voting app is being built in GitHub Codespaces for safety, allowing agents to run in an 'allow all' mode without risking local machine security.
- The development approach emphasizes iterative building and 'YOLO' mode with agents, starting with a simple homepage.
- The team plans to use vanilla HTML, CSS, and JavaScript for the voting app, avoiding complex frameworks for simplicity.
- The process involves a conversational approach with the agent, iterating on prompts to refine the output.
This demonstrates a secure and efficient way to leverage AI agents for development by using isolated environments like Codespaces, and highlights an agile, conversational development style.
The host and Kent C. Dodds start by asking the agent to create a simple homepage for the voting platform using vanilla web technologies.
- Julia uses the VS Code local agent with GPT-5.5 and high reasoning, aiming for a one-shot build of the markdown editor.
- Chris uses the Copilot CLI, employing an orchestrator agent pattern with GPT-4.6 as the planner and Codex for implementation.
- Chris's approach involves multiple tabs and workspaces, typical for his development style.
- Harold begins by researching existing markdown editors and exploring design options with design agents.
This showcases the diverse strategies and tools contestants are using, from single-agent, high-level reasoning to multi-agent orchestration and research-driven design.
Julia's agent scaffolds an idea markdown file and then proceeds to execute based on that idea, while Chris uses a planner agent to outline the editor's structure.
- The host's team encounters issues with a QR code generator library, with the agent initially failing to load the correct CDN URL.
- They switch to using 'Unpackaged' as a service to resolve package URLs, but still face errors.
- This highlights the fragility of relying on external dependencies and the need for robust error handling or alternative strategies.
- The debugging process involves inspecting network requests and using browser developer tools.
This section illustrates common real-world problems encountered when integrating AI-generated code, particularly with external libraries and dynamic URLs, emphasizing the importance of debugging skills.
The QR code JavaScript library fails to load, resulting in a 'QR code not defined' error, requiring troubleshooting with the Unpackaged service.
- The host's team implements persistence by writing votes to a JSON file and plans to integrate WebSockets for real-time updates.
- The host uses a custom 'poster board' design aesthetic skill with Opus 4.6 to generate multiple design mocks, demonstrating a reusable design system approach.
- The concept of spawning multiple sub-agents to parallelize tasks, like generating design mocks, is explored.
- Contestants are encouraged to iterate on designs by generating multiple mocks and refining the best ones.
This delves into more sophisticated multi-agent patterns, including state persistence, real-time communication, and the application of custom design systems and parallel processing for creative tasks.
The host asks the agent to generate 10 design mocks using the 'poster board' aesthetic, aiming to select and iterate on the best one.
- Contestants present their completed or near-completed collaborative markdown editors.
- Julia showcases a minimalistic UI with split-screen editing, user renaming, emoji support, and edit tracking.
- Chris demonstrates a GitHub-themed editor with a sidebar, real-time updates, and background assessment using Playwright.
- Pierce integrates emojis and comments, facing API boot-up issues but delivering a serviceable product.
- Harold presents multiple prototypes, focusing on agent-driven editing, commenting, and activity logs, with a feature-rich implementation.
This is the culmination of the competition, where the practical outcomes of the different AI-assisted development strategies are showcased and evaluated by the audience.
Julia's demo includes features like changing usernames, adding emojis, and tracking edits, presented in a split-screen view.
- The voting app is made public, allowing the audience to vote for their favorite implementation.
- Real-time updates of votes are observed, confirming the persistence and collaboration features are working.
- Harold is declared the winner, recognized for his feature-rich prototype and efficient development process.
- The event concludes with thanks to the contestants and recommendations for further learning on GitHub Copilot and agent development.
This wraps up the competition by announcing the winner and reinforcing the key takeaways about the capabilities and potential of AI in modern software development.
Harold's prototype, which focused on agent-driven editing and commenting, received the most votes from the audience.
Key takeaways
- AI agents can significantly accelerate prototyping and development, especially for common tasks like building web interfaces.
- Multi-agent patterns, where different agents handle planning, execution, and specialized tasks, are powerful for complex development.
- Developing with AI requires a conversational and iterative approach, treating prompts as a dialogue to refine outcomes.
- Security is a crucial consideration when using AI agents; environments like GitHub Codespaces offer a safer way to run agents with broad permissions.
- While AI can generate code, debugging, dependency management, and integrating real-time features still require human oversight and expertise.
- Reusable design systems and custom 'skills' can be applied to AI agents to ensure consistent aesthetics and functionality across projects.
- The future of software development will likely involve closer collaboration between human developers and sophisticated AI agents.
Key terms
Multi-agent patternsVS Code Local AgentCopilot CLICopilot AppAgent AppGitHub CodespacesYOLO ModeOrchestrator AgentPlanner AgentUnpackagedPersistenceWebSocketsDesign AestheticSub-agentsPlaywright
Test your understanding
- What are the primary differences in the approaches taken by the four contestants when building the collaborative markdown editor?
- How does using GitHub Codespaces enhance the safety and productivity when working with AI agents in 'allow all' mode?
- Describe a scenario where debugging AI-generated code proved challenging during the competition, and how was it addressed?
- What is the significance of 'multi-agent patterns' in the context of the collaborative markdown editor project?
- How can developers leverage custom design systems or 'skills' when working with AI agents to maintain a consistent project aesthetic?