Real World Development with GitHub Copilot and VS Code — Harald Kirschner, Christopher Harrison

Key Concepts

• VIP Coding: A coding approach that prioritizes output over code, embracing AI and automation.
• YOLO Vibes: The initial stage of VIP coding, characterized by speed, creativity, and instant gratification, often resulting in chaotic but functional code.
• Structured Vibes: A balanced approach to VIP coding that emphasizes maintainability, readability, and quality control.
• Spectrum Vibes: The advanced stage of VIP coding, focusing on scale, reliability, and velocity while maintaining speed and reducing chaos through best practices.
• Agent Mode: A mode in VS Code Copilot that allows the AI to execute commands and perform tasks automatically.
• MCP (Managed Code Provider) Servers: Servers that provide additional tools and functionalities to VS Code Copilot, extending its capabilities.
• Tool Sets: Groupings of related tools within VS Code Copilot, allowing for more focused and efficient task execution.
• Custom Modes: User-defined configurations in VS Code Copilot that enforce specific coding practices or workflows, such as Test-Driven Development (TDD).
• Prompts: Reusable instructions or queries that can be injected into the Copilot chat to guide the AI's behavior.
• Instructions: Guidelines or rules that provide context and constraints to the AI, influencing its code generation and problem-solving.
• Sampling: A technique where the MCP server uses the client's LLM to summarize or process information, reducing token usage.

VIP Coding at Scale: Embracing AI and Automation

The talk focuses on VIP coding, a methodology that prioritizes the output of coding projects over the code itself, leveraging AI tools to accelerate development. The core idea is to "forget that code exists" and focus on the desired outcome, trusting the AI to handle the implementation details.

The VIP Coding Journey: From YOLO to Spectrum

The VIP coding journey is presented as a progression through three distinct phases:

1. YOLO Vibes: This initial phase is characterized by rapid prototyping, speed, and a focus on getting something up and running quickly. It's ideal for proof-of-concept projects, learning new technologies, and personal projects. The speaker terms this as "YOLO vibes" due to its chaotic nature.
   • Example: Building a water tracking app over the weekend.
   • Key Features: Voice input, auto-accepting changes, natural language communication with the AI.
2. Structured Vibes: This phase emphasizes balance and sustainability, focusing on maintainability, readability, and quality control. It's suitable for projects that require long-term support and collaboration.
   • Key Features: Starter templates, clear instructions for the LLM, guardrails, custom tools with domain knowledge.
3. Spectrum Vibes: This advanced phase aims for scale, reliability, and velocity while maintaining speed and reducing chaos. It involves establishing best practices and leveraging advanced AI capabilities.
   • Key Features: Specs, custom prompts, advanced MCPs, database access, logging, project tracking, debugging.

YOLO Vibes in Action: Building a Hydration Tracker

The speaker demonstrates YOLO vibe coding by building a water hydration app using VS Code Copilot. The process involves:

1. Opening an empty VS Code window and activating Agent Mode.
2. Using the prompt: "Create a react vite website that for water hydration water consumption app simple and big accessible UI following Apple design principles with material design."
3. Allowing Copilot to scaffold the project, install dependencies, and generate the initial code.
4. The AI generates a functional app with a clean, minimal UI, demonstrating its design capabilities.
5. The speaker then uses voice input to request a dark mode and a more kid-friendly design.
6. The speaker uses the "Work Visually" feature to select the header and request animated particles.

Structured VIP Coding: Adding Guardrails and Customization

The speaker then transitions to structured VIP coding, emphasizing the importance of guardrails and customization. This involves:

1. Using a starter template with a consistent tech stack and clear instructions for the LLM.
2. Incorporating custom tools with expert domain knowledge or internal knowledge.
3. Bootstrapping greenfield projects with pre-configured stacks and design systems.
4. Customizing the AI's behavior to align with internal stacks, workloads, and deployment infrastructure.

Spectrum VIP Coding: Leveraging Specs, Prompts, and MCPs

The speaker then discusses spectrum VIP coding, which focuses on scale, reliability, and velocity. This involves:

1. Creating a spec from conversations about the project.
2. Using custom prompts and tools to guide the AI's behavior.
3. Leveraging MCPs for database access, logging, project tracking, and debugging.
4. Using different models for different tasks, such as using 03 for deeper thinking.

VS Code Copilot Tools and Features

The talk highlights several key VS Code Copilot tools and features that facilitate VIP coding:

• Agent Mode: Allows the AI to execute commands and perform tasks automatically.
• New Workspace Flow: Simplifies the process of creating projects from scratch.
• Voice Dictation: Enables hands-free coding using voice input.
• Visual Context: Allows attaching visual elements to the chat for reference.
• Auto Accept: Automatically approves changes suggested by the AI.
• Undo Button: Provides checkpoints for reverting to previous states.
• Workspace Instructions: Markdown files that provide context and constraints to the AI.
• Custom Modes: User-defined configurations that enforce specific coding practices.
• MCP Servers: Extend Copilot's capabilities with additional tools and functionalities.
• Tool Sets: Groupings of related tools for more focused task execution.
• Model Management: Allows users to select and configure different LLMs.

MCP Servers: Extending Copilot's Capabilities

The speaker provides a detailed overview of MCP servers, highlighting their role in extending Copilot's capabilities. Key points include:

• MCP servers provide additional tools and functionalities to Copilot.
• They can be configured through the mcp.json file.
• Examples of MCP servers include Playwright MCP (for browser testing) and Jispad (for knowledge base and prompts).
• MCP servers can be added through HTTP or SSE (deprecated).
• Tool sets allow for grouping related tools for more focused task execution.
• Sampling allows the MCP server to use the client's LLM for certain tasks.

Custom Modes: Enforcing Coding Practices

The speaker demonstrates how to create custom modes in Copilot to enforce specific coding practices, such as Test-Driven Development (TDD). This involves:

1. Creating a new mode in the "Configure Chat Modes" menu.
2. Defining the mode's behavior and instructions.
3. Specifying the tools that the mode should use.
4. Activating the mode and applying it to a project.

Key Takeaways and Best Practices

The talk concludes with several key takeaways and best practices for VIP coding:

• Experiment and find what works best for you.
• Provide feedback and iterate on the AI's suggestions.
• Work on your process and use modes, prompts, and instructions to ingrain it.
• Commit often to save working states.
• Trust read-only access to specific tools.
• Refine instructions as the AI makes mistakes.
• Use well-structured, self-explaining code.
• Keep instructions updated.

Conclusion

VIP coding represents a paradigm shift in software development, leveraging AI to accelerate development and empower non-technical users. By embracing automation and focusing on the desired outcome, developers can achieve greater speed, efficiency, and innovation. The key is to experiment, iterate, and find the right balance between AI assistance and human oversight.