1. Why is it necessary to Plan before Code?
One of the most common mistakes when Vibe Coding is jumping straight into coding without a plan. The results are usually:
- Agent goes in the wrong direction and has to redo from the beginning
- Code structure is not suitable for scale
- Missing important edge cases
- Costs many iterations (and tokens/requests)
Plan Agent Solve this problem by separating the stages planning. planning and implementation. implementation.
2. Plan Agent Workflow
┌─────────────────────────────────────────────────┐
│ PLAN-FIRST WORKFLOW │
├─────────────────────────────────────────────────┤
│ │
│ 1. 📝 USER: Mô tả feature/task │
│ ↓ │
│ 2. 🔍 PLAN AGENT: Phân tích codebase │
│ - Đọc files liên quan │
│ - Hiểu architecture hiện tại │
│ - Hỏi clarifying questions nếu cần │
│ ↓ │
│ 3. 📋 PLAN AGENT: Tạo implementation plan │
│ - Step-by-step tasks │
│ - Files cần tạo/sửa │
│ - Dependencies cần install │
│ - Potential risks/trade-offs │
│ ↓ │
│ 4. 👀 USER: Review + điều chỉnh plan │
│ ↓ │
│ 5. 🚀 HAND OFF: Plan → Agent để implement │
│ │
└─────────────────────────────────────────────────┘
3. Use Plan Agent
Step 1: Select Plan Agent
In Chat view, select "Plan" from agent dropdown.
Step 2: Describe the task
I want to add a real-time notification system to our Express.js app.
Requirements:
- WebSocket-based (Socket.IO)
- Notification types: info, warning, error, success
- Persist notifications in PostgreSQL
- Mark as read/unread
- Bell icon with unread count badge
- Dropdown showing recent notifications
- API endpoints for CRUD operations
- Only authenticated users receive notifications
Step 3: Plan Agent analyzes and returns the plan
Plan Agent will create a structured plan like:
## Implementation Plan: Real-time Notification System
### Phase 1: Database & Models
1. Create `notifications` table migration
- Fields: id, user_id, type, title, message, is_read, created_at
2. Create Notification model (Sequelize/Prisma)
3. Add relations to User model
### Phase 2: Backend API
4. Install socket.io dependency
5. Create NotificationService (create, getByUser, markAsRead, delete)
6. Create NotificationController with REST endpoints
- GET /api/notifications (with pagination)
- PATCH /api/notifications/:id/read
- DELETE /api/notifications/:id
7. Add authentication middleware to notification routes
### Phase 3: WebSocket Integration
8. Setup Socket.IO server alongside Express
9. Implement auth for WebSocket connections (JWT verification)
10. Create room-per-user pattern for targeted notifications
11. Emit events on notification create/update
### Phase 4: Frontend Components
12. Create NotificationBell component (badge with unread count)
13. Create NotificationDropdown component
14. Setup Socket.IO client with auto-reconnect
15. Add toast notifications for new incoming notifications
### Trade-offs & Risks:
- Socket.IO adds complexity; consider SSE for simpler use case
- Need Redis adapter for multi-server deployment
- Consider rate limiting notification creation
Step 4: Review and adjust
You can respond:
Good plan! But let's make these changes:
- Use Prisma instead of Sequelize
- Add a Phase 0 with unit test setup
- Skip the toast notifications for now
- Add rate limiting in Phase 2
Step 5: Hand off to Agent
When plan is OK, select hand off to Agent. The agent will execute the plan step-by-step, and you can track progress within the session.
4. Plan for different scenarios
4.1. New Features
Plan adding OAuth2 social login (Google, GitHub) to our Next.js app.
We currently use JWT with email/password auth.
Consider: NextAuth.js vs custom implementation.
4.2. Refactoring
Plan migrating our REST API from Express.js to Fastify.
Current codebase has 15 route files, 8 middleware, Sequelize ORM.
We want zero downtime migration — propose a phased approach.
4.3. Bug Investigation
Plan debugging this issue: Users report that their session expires
randomly after 10-15 minutes, even though token expiry is set to 24h.
Analyze our auth flow and create a debugging plan.
4.4. Architecture Decision
Plan the data layer for our e-commerce app. Compare these options:
1. PostgreSQL + Prisma
2. MongoDB + Mongoose
3. PostgreSQL + Drizzle ORM
Consider: our team knows SQL, we need transactions, Vercel deployment.
5. Plan-First vs Code-First
| Criteria | Plan-First | Code-First (Direct Agent) |
|---|---|---|
| When to use | Tasks are complex, multi-file, affecting architecture | Tasks are simple, single feature, well-defined |
| Setup time | Longer (plan + review) | Fast (code now) |
| Output quality | Higher, less redo | Depends on prompt quality |
| Risk | Low (catch issues early) | Higher (possibly in the wrong direction) |
| Token efficiency | Better (fewer iterations) | May take many iterations |
Rule of thumb:
- Task < 30 minutes → Code-First (Direct Agent mode)
- Task > 30 minutes or affecting many files → Plan-First
- Migration or refactoring → Always Plan-First
6. Tips for effective planning
- Provide full context: tech stack, current conventions, constraints
- Clearly state the trade-offs you know about: helps Plan Agent focus on the right decisions
- Request risk analysis: "What could go wrong?" or "What are the edge cases?"
- Ask about alternatives: "Compare approach A vs B" before committing
- Review the plan carefully before handing off: Editing a plan is easier than editing implemented code
7. Practice exercises
- Open Chat view → select Plan agent. agent
- Prompt: "Plan building a markdown blog engine with: file-based posts, tags, categories, search, RSS feed, dark mode. Use Next.js 15 and Tailwind."
- Review plan from Plan Agent
- Requires at least a 2-point adjustment
- Hand off to Agent to implement Phase 1
8. Summary
Plan Agent is the "architect" — it helps you think before acting. In this series, we will use the Plan-First approach for all real-life projects in Part 5.
| Workflow | Steps |
|---|---|
| Plan-First | Describe → Plan → Review → Adjust → Hand off → Implement |
| Code-First | Describe → Implement → Review → Iterate |
The next song will be a cover Cloud Agent & Copilot CLI — how to run agents anywhere: local, background, cloud, and via pull requests.