Vibe Coding Tutorial - Setup and Advanced Tips and Tricks

Key Concepts

Vibe coding, Windsurf, Cursor, VS Code, Klein, Replit, Canvas (Claude, ChatGPT, Google), Agents, Code stack (front-end, back-end), JavaScript, Python, NodeJS, GitHut 2.0, Plan/PRD (Product Requirements Document), Version control (Git, GitHub), Rules (global, workspace), Dev/Test/Prod environments, Workflow (feature, tests, commit), Chat vs. Write mode, 3JS, Security, Maintainability, Refactoring, MCP (Model-Controller-Persistence) servers.

Vibe Coding Tools

• Windsurf: A code editor and fork of VS Code, favored by the speaker. It offers chat, write, and legacy modes, various model options (Claude 3.7, Claude 3.5, OpenAI), tab completion, and browser preview functionality. Sponsored the video.
  • Actionable Insight: Windsurf is recommended for its agentic capabilities and features tailored for AI-assisted coding.
• Cursor: Another code editor similar to Windsurf.
• VS Code with Klein Extension: An alternative for those who prefer to stay within the VS Code environment.
• Replit: A completely online code editor that allows easy app deployment.
• Canvas (Claude, ChatGPT, Google): Simplest way to start, allowing code writing and execution directly in the browser, primarily for HTML and JavaScript.
  • Limitation: Less agentic than dedicated code editors like Windsurf or Cursor.

Choosing a Coding Language and Stack

• Rule: Select the most popular coding language for better AI support due to extensive training data.
• JavaScript: The most popular language globally.
• Python: The de facto language for AI.
• Recommended Stack: Python for the back-end, HTML and JavaScript for the front-end. NodeJS can be used for JavaScript on the back-end.
• GitHut 2.0: A resource for identifying popular coding languages (Python, Java, JavaScript, C++, TypeScript, etc.).

Planning and Documentation

• Importance: A detailed and thorough plan is crucial for guiding the AI.
• AI Assistance: Use AI (e.g., Grock) to help generate a plan and identify edge cases.
• PRD (Product Requirements Document): Format the plan as a PRD in Markdown (.md) format.
• To-Do List: Create a step-by-step to-do list in Markdown format.
• Iterative Process: Continuously update the plan as the project evolves.

Version Control with Git and GitHub

• Crucial for All Coding: Essential for saving code at different stages and reverting to stable versions.
• Git: The standard version control software. AI can assist with writing Git commands.
  • Basic Terminology: Commit, revert, logs.
• GitHub: Cloud-based storage for Git repositories, providing secure code storage and collaboration.
  • Analogy: "Google Docs for code."

Rules for AI Coding Agents

• Purpose: Rules act as system prompts, guiding the AI to write code in a specific style and following desired workflows.
• Location: Rules are typically found in the settings of AI coding tools (e.g., Windsurf settings).
• Types:
  • Global Rules: Apply to all projects.
  • Workspace Rules: Apply only to a specific project.
• Examples of Global Rules:
  • Always start a new server after making changes.
  • Prioritize iterating on existing code before writing new code.
  • Prefer simple solutions and avoid code duplication.
  • Account for different environments (dev, test, prod).
  • Avoid writing scripts in files if they are only run once.
  • Keep files short (200-300 lines of code).
• Awesome Cursor Rules: A GitHub repository containing Markdown files with best practices specific to different coding languages and frameworks (React, Python with FastAPI, etc.).

Vibe Coding Workflow

1. Reference the Plan: Consult the PRD.md file.
2. Check the To-Do List: Review the to-do.md file.
3. Build One Feature at a Time: Focus on developing a single feature.
4. Write Tests: Create tests for the new feature to ensure it works as expected.
5. Run Tests:
   • Run tests specifically for the new feature.
   • If tests pass, proceed to the next step.
   • If tests fail, fix the code or update the tests.
6. Run Entire Test Suite: Ensure all existing code still works correctly.
   • If all tests pass, proceed to the next step.
   • If tests fail, fix the code or update the tests.
7. Commit Code: Save the changes to Git.
8. Repeat: Continue the process iteratively.
9. Rollback: If the code becomes unfixable, revert to a previous stable commit.

Miscellaneous Tips

• Chat vs. Write Mode: Use "write" mode for code generation and "chat" mode for asking questions.
• Model Selection: Claude is considered a strong coder, with Cloud 3.7 being a preferred option.
• Front-End Templates: Use free or paid templates for visually appealing front-ends.
• Targeted Updates: Use "@" to specify specific files, directories, or web links for the AI to reference.
• 3JS Library: A popular 3D JavaScript library for game development.

Security and Maintainability

• Address Concerns: Acknowledge criticisms about the security and maintainability of AI-generated code.
• Security Best Practices:
  • Learn and implement security best practices.
  • Use rules to enforce security measures.
  • Rate limit API endpoints.
  • Use row-level security.
  • Capture data on authentication routes.
• Ted Worble's Tips:
  • Don't share API keys publicly.
  • Don't save keys in Git (use .gitignore).
  • Use npm run audit for Node.js apps.
  • Don't roll your own authentication (use Clerk or similar).
  • Set up IP and user-based rate limiting.
  • Implement DOS protection and firewalls.
  • Use monitoring and analytics.
  • Write test automation for critical parts of the codebase.
• Maintainability:
  • AI code will improve over time.
  • Refactor code to improve conciseness and modularity.
  • Use rules to enforce code quality.
  • Perform security audits.

MCP (Model-Controller-Persistence) Servers

• Purpose: MCP servers allow adding custom tools to AI agents.
• Configuration: Can be configured within tools like Windsurf.
• Examples:
  • Unity MCP: Enables vibe coding directly into Unity.
  • Firecrawl MCP: Provides deep research capabilities.

Conclusion

Vibe coding offers a new approach to software development, leveraging AI to assist with code generation and problem-solving. By using the right tools, following a structured workflow, and focusing on planning, testing, and security, both experienced and novice programmers can benefit from this emerging technique. While challenges related to code quality and security exist, they can be mitigated through best practices, continuous learning, and the use of rules to guide AI behavior. The future of vibe coding is promising, with ongoing improvements in AI capabilities and the development of specialized tools and resources.