【en】A Hands-on Web3 AI Vibe Coding Workshop

Event URL
https://luma.com/um87sb5p

GitHub Repo
https://github.com/mashharuki/Web3AIVibeCodingStarterKit

Transcript

1. A Hands-on Web3 AI Vibe Coding Workshop
2. Today's Agenda 1. Opening & Self-Introduction (5 min) 2. Today's Goals and Flow (5 min) 3. AI Vibe Coding Live Demo (10 min) 4. Tips for AI Vibe Coding (10 min) 5. Hands-on Session (90-125 min) 6. Wrap-up & Review (5 min) 7. Showcase & Networking (20-55 min)
3. First: Instructor Introduction Haruki UNCHAIN Admin Web3 Engineer ETH Tokyo'24 finalist X: @haruki_web3
4. Goals of This Workshop By the end of this workshop, you will... Gain the ability to develop a Web3 app prototype Acquire the "tips" to maximize the power of AI
5. AI Vibe Coding Live Demo "The Moment a dApp is Born with AI" Now, I will show you how to build a DEX prototype from scratch, focusing on interaction with AI.
6. Theme: Let's build an AMM DEX! 1. Create requirements and design documents 2. Create a task list 3. Start implementation
7. Tips for AI Vibe Coding Just knowing this will dramatically improve your AI-driven development experience! I will introduce four particularly important points.
8. Tip #1: Use Multiple Models for Different Tasks What a model "can do" and is "good at" varies. Models good at coding （e.g., Claude ） Models capable of multimodal processing （e.g., Gemini ）
9. Tip #2: Enhance AI Capabilities with MCP UsingMCPturns the AI into a powerful "dedicated assistant" for your project!
10. Tip #2: Enhance AI Capabilities with MCP You can directly teach the AI your project's file structure and coding conventions. This allows the AI to deeply understand the project's context and generate more accurate code.
11. Tip #3: Proceed in Stages No need to aim for perfection all at once. "Build small, then move on" is the shortcut to success.
12. Tip #3: Proceed in Stages Create requirements, design, and task list documents Set up the overall project Implement the smart contract Implement the front-end
13. Tip #4: Custom Instructions "How you give instructions" to the AI is also important. Let's prepare a custom instruction file in advance. Clear instructions maximize the AI's power!
14. Hands-on Time! (90-125 min)
15. 1. Part 1 (Basic): DEX (Decentralized Exchange) Development First, experience the basic flow of AI Vibe Coding with the prepared theme!
16. 2. Part 2 (Advanced): Original dApp Development (If time permits) Create a one-of-a-kind dApp with your own unique idea!
17. Hands-on Steps Create requirements, design, and task list documents Project Setup Smart Contract Development Front-end Development
18. Sample GitHub GitHub - Web3AIVibeCodingStarterKit
19. Sample Documents Please refer to the following documents! Prompts Requirements Document Task List
20. Sample Configuration Files Claude Code Configuration File Gemini CLI Configuration File GitHub Copilot Configuration File Kiro Configuration File
21. Q&A / Showcase
22. Today's Summary Today, we explored the world of AI Vibe Coding and experienced its amazing potential.
23. Today's Summary The four key points for success ✅ Use Multiple Models for Different Tasks ✅ Enhance AI Capabilities with MCP ✅ Proceed in Stages ✅ Set up Custom Instructions
24. Thank You!
25. Supplementary Materials
26. Overall AI VibeCoding Environment
28. Recommended Tools Introduction
29. IDE
30. VS Code (with GitHub Copilot) Kiro
31. Coding Agent
32. GitHub Copilot Agent Mode Gemini CLI Kiro's built-in Coding Agent Claude Code
33. MCP
34. context7 serena MCP GitHub MCP sequential-thinking