Vibe Planning: The Smarter Way to Code with AI Agents

Key Concepts

• Coding Agents: AI tools used to generate code.
• Specs-Driven Development: An approach where coding agents plan and create specifications before implementation.
• VE Planning: A collaborative approach where the developer brainstorms and plans with the coding agent.
• Tracer: A VS Code extension that facilitates VE planning, implementation, and verification with coding agents.
• Atomic Parts: Breaking down a large application into smaller, manageable features or phases.
• Regression Testing: Ensuring new code changes don't negatively impact existing functionality.
• LLM (Large Language Model): The underlying AI model used by coding agents.
• Nano Banana (Gemini 2.5 Flash Image): Google's multimodal model for image generation.
• REST API: An architectural style for building web services.
• Candidate Count: A parameter in the Gemini API to generate multiple images in a single call.

1. Introduction and Problem Statement

• The video addresses the common issue of coding agents failing when tasked with building entire applications at once due to complex architectures and numerous files.
• Specs-driven development improves success rates, but new developers don't learn much in the process.

2. VE Planning: A Collaborative Approach

• VE Planning is introduced as a method where developers collaborate with coding agents (LLMs) as partners, not just task offloaders.
• Brainstorming: The developer brainstorms the idea with a coding agent, focusing on feedback and clarifying questions from the model. This helps the developer refine their understanding of the project.
• Divide and Conquer: The application is broken down into atomic parts (features or phases) for planning. This allows for focused planning and implementation.
• Iterative Implementation: Each feature is planned, implemented by a separate coding agent, tested, and verified using the initial planning agent. This ensures no regressions and avoids touching working implementations.

3. Using Tracer for VE Planning

• Tracer is presented as a tool to streamline the VE planning workflow.
• It's a VS Code extension that helps build plans for each feature, uses independent agents (like Claude or Copilot) for implementation, and verifies the implementation.
• The video emphasizes that while the process is possible with any coding agent, Tracer makes it smoother.

4. Practical Example: Building an Image Generation Web App

• The video demonstrates building a web app that uses HTML for the front end and Google's Nano Banana (Gemini 2.5 Flash Image) model for image generation via REST API.
• The app takes a text prompt from the user, generates four images, allows the user to select one, and then iterates on that image with a new prompt.

5. Step-by-Step Workflow with Tracer

• Phase 1: Initial Conversation and Planning:
  • The developer uses Tracer to chat with the AI, clarifying the intent and breaking it down into manageable tasks.
  • The agent performs web searches to find the Gemini API endpoint.
  • The agent asks clarifying questions about backend technology (Python is chosen) and image generation count.
  • Tracer generates a detailed plan with multiple phases.
• Phase 2: Implementation Plan:
  • Tracer creates a detailed file-level implementation plan, suggesting specific files and their contents.
• Phase 3: Execution and Verification:
  • The plan is executed using Cloud Code (or Copilot Tracer).
  • Tracer verifies the implementation from Cloud Code.
• Phase 4: Incremental Testing:
  • The developer performs incremental testing to track progress and test individual components.
  • The agent identifies and helps fix bugs.
• Phase 5: Building the Backend Functionality:
  • Tracer guides the implementation of the Gemini REST API client, providing details on parameters and expected output.
• Phase 6: Testing the API Endpoints:
  • The developer provides the Gemini API key.
  • The agent identifies and fixes issues with the implementation.
• Phase 7: Building the Front End:
  • The agent generates a plan for the next step (front end).
  • The plan is executed in Cloud Code.
  • The agent verifies that there are no regressions.

6. Demonstration of the Working App

• The video shows the working web app with a text prompt input, image generation, and iteration functionality.
• The developer demonstrates generating images of a cat on a skateboard and then iterating on the selected image.
• The app successfully generates images based on the prompts, although some issues are noted (e.g., candidate count not working).

7. Key Arguments and Perspectives

• The video argues that VE planning is a more effective approach for new developers to learn and build software with coding agents.
• It emphasizes the importance of collaboration, breaking down tasks, and incremental testing.
• The video promotes Tracer as a tool that simplifies and enhances the VE planning workflow.

8. Notable Quotes

• "Think of the LLM or coding agent as a collaborator or partner rather than a software engineer that you just offload tasks to."
• "Ask the model to ask you clarifying questions. That is extremely helpful especially for your own learning."

9. Technical Terms and Concepts

• Coding Agent: An AI-powered tool that can generate code based on instructions or specifications.
• LLM (Large Language Model): The underlying AI model that powers coding agents.
• Specs-Driven Development: A software development approach where detailed specifications are created before coding.
• REST API: An architectural style for building web services that use HTTP requests to access and manipulate data.
• VS Code Extension: A plugin that extends the functionality of the Visual Studio Code editor.
• Regression: A bug or issue that reappears in previously working code after a change or update.

10. Synthesis/Conclusion

• The video advocates for VE planning as a superior method for building software with coding agents, especially for new developers.
• VE planning emphasizes collaboration, breaking down tasks, and iterative development.
• Tracer is presented as a valuable tool for streamlining the VE planning workflow, facilitating implementation, and ensuring code quality.
• The practical example demonstrates how to use Tracer to build a real-world application, highlighting the benefits of the VE planning approach.