Skip to main content
Glama
PROACTIVE_THINKING_WORKFLOW.md13 kB
# 🧠 Proactive Thinking Workflow - Think Before Code ## 🎯 Core Principle **ALWAYS call the `think` tool BEFORE writing code when new information arrives.** This ensures: - ✅ Better understanding of requirements - ✅ Identification of potential pitfalls - ✅ Best practices from the start - ✅ Fewer bugs and revisions - ✅ More efficient implementation --- ## 🔄 The Workflow ### 1️⃣ New Information Arrives Something new enters the conversation: - Error message - User requirement - Code review feedback - API documentation - Performance issue - Security alert ### 2️⃣ STOP - Think First **DO NOT** immediately write code! Instead, call the think tool: ``` Use the think tool to analyze: [THE NEW INFORMATION] Context: [CURRENT SITUATION] ``` ### 3️⃣ Review Insights Read the think tool's analysis: - Understanding of the problem - Potential approaches - Pitfalls to avoid - Best practices - Implementation strategy ### 4️⃣ Write Better Code Now implement with: - Clear understanding - Optimal approach - Awareness of edge cases - Following best practices --- ## 📋 Workflow Examples ### Example 1: Error Message Workflow **❌ WITHOUT Think Tool (Old Way):** ``` User: I'm getting "Cannot read property 'map' of undefined" AI: Let me add optional chaining: {users?.map(user => <UserCard user={user} />)} ``` **Result**: Quick fix, but might miss: - Root cause (missing initial state) - Better patterns (loading states) - Other potential issues - Best practices --- **✅ WITH Think Tool (New Way):** ``` User: I'm getting "Cannot read property 'map' of undefined" AI: Let me analyze this first. [Calls think tool with:] query: "Error: Cannot read property 'map' of undefined" context: "React component rendering users list from useState hook" [Think tool returns:] - Root cause: useState<User[]>() has no initial value - Three solutions: 1. Initialize with empty array 2. Add optional chaining 3. Implement loading state pattern - Best practice: Use loading state for better UX - Code structure example AI: Based on the analysis, I'll implement the loading state pattern: [Writes better code with loading/error states] ``` **Result**: Comprehensive solution with best practices! --- ### Example 2: New Feature Workflow **❌ WITHOUT Think Tool:** ``` User: Add dark mode toggle to header AI: [Immediately writes code] - Creates toggle button - Adds onClick handler - Updates state ``` **Issues**: - Might not check existing theme system - Could duplicate code - May not follow design patterns - Misses accessibility --- **✅ WITH Think Tool:** ``` User: Add dark mode toggle to header AI: Let me understand the context first. [Calls think tool:] query: "Implement dark mode toggle in header" context: "Next.js app, need to check if theme context exists, header component structure" [Think tool analyzes:] - Check for existing ThemeContext - Recommend button placement - Suggest animation approach - Consider accessibility (ARIA labels) - Match design system AI: Based on analysis, I'll: 1. Use existing ThemeContext 2. Add toggle with smooth transition 3. Include proper ARIA labels [Writes optimized, accessible code] ``` **Result**: Better integrated, accessible solution! --- ### Example 3: Performance Issue Workflow **❌ WITHOUT Think Tool:** ``` User: My app is slow AI: Let me add useMemo everywhere! [Adds random optimizations] ``` **Issues**: - No root cause analysis - Premature optimization - Might make things worse - Doesn't measure impact --- **✅ WITH Think Tool:** ``` User: Homepage renders 50+ times, React DevTools shows parent re-rendering all children AI: Let me analyze this performance issue. [Calls think tool:] query: "Excessive re-renders: 50+ on homepage, parent component causing all children to re-render" context: "useState for theme in Header component at top of tree, theme passed via props to 20+ children" [Think tool provides:] - Root cause: Props drilling causing cascade - Best solution: Context API with memo - Implementation order: 1. Create ThemeContext 2. Wrap app with provider 3. Use useContext in children 4. Memoize components selectively - Expected improvement: ~90% reduction in renders AI: I'll implement Context API solution: [Writes proper solution with measurements] ``` **Result**: Correct fix with measurable improvement! --- ## 🎯 When to Use Think Tool ### ✅ ALWAYS Use Before: 1. **Writing New Features** ``` User: Add user authentication → Think first: Check existing auth, security patterns, best libraries → Then code ``` 2. **Fixing Errors** ``` Error: Database connection failed → Think first: Analyze error, check config, identify root cause → Then fix ``` 3. **Optimizing Performance** ``` User: App is slow → Think first: Profile, identify bottleneck, plan optimization → Then optimize ``` 4. **Refactoring Code** ``` User: Reorganize components folder → Think first: Analyze current structure, plan new structure, impact assessment → Then refactor ``` 5. **Integrating APIs** ``` User: Integrate Stripe payments → Think first: Architecture, security, error handling, testing → Then integrate ``` 6. **Handling Feedback** ``` Review: "This could be more efficient" → Think first: Understand concern, evaluate alternatives → Then improve ``` 7. **Making Architectural Decisions** ``` User: Should we use Redux or Context? → Think first: Compare options, assess needs, recommend → Then decide ``` ### ⚠️ Can Skip For: - Simple typo fixes - Trivial text changes - Exact copy-paste requests - Very simple, obvious changes --- ## 🔧 How to Configure in Cursor ### Method 1: Add to Cursor Rules Create or update `.cursorrules` in your project root: ```markdown # Deep Thinking Protocol When new information arrives (errors, requirements, feedback, issues): 1. ALWAYS call the "think" MCP tool BEFORE writing code 2. Provide the new information as query 3. Include relevant context (tech stack, constraints, current code) 4. Review the insights before implementing 5. Write code based on the analysis Example pattern: - User reports error → Think first → Then fix - New feature request → Think first → Then implement - Performance issue → Think first → Then optimize The think tool helps avoid common pitfalls, follow best practices, and implement better solutions faster. ``` ### Method 2: Cursor Composer Instructions In Cursor Composer, add this instruction: ``` Before writing or modifying any code, use the "think" MCP tool to analyze: - What needs to be done - Current codebase context - Potential approaches - Best practices - Pitfalls to avoid Then implement based on the insights provided. ``` ### Method 3: Per-Session Reminder Start each session with: ``` Remember to use the think tool before coding when new information arrives. Analyze first, code second. ``` --- ## 📊 Workflow Comparison | Aspect | Without Think | With Think | |--------|---------------|------------| | **Understanding** | Surface level | Deep analysis | | **Approach** | First idea | Optimal solution | | **Edge Cases** | Often missed | Identified upfront | | **Best Practices** | Hit or miss | Always considered | | **Bugs** | More revisions | Fewer issues | | **Time** | Fast start, slow finish | Thoughtful start, fast finish | | **Quality** | Variable | Consistently high | --- ## 🎓 Real-World Impact ### Before Using Think Tool: ``` 1. User reports error 2. AI writes quick fix 3. Fix creates new bug 4. User reports new error 5. AI writes another fix 6. Still not quite right 7. Third iteration finally works ⏱️ Total time: 30 minutes, 3 iterations ``` ### After Using Think Tool: ``` 1. User reports error 2. AI uses think tool (20 seconds) 3. AI understands root cause 4. AI writes comprehensive fix 5. Works correctly first time ⏱️ Total time: 5 minutes, 1 iteration ``` **Result**: 6x faster, better quality, happier user! --- ## 💡 Best Practices ### 1. Always Provide Context ``` ❌ Bad: query: "Fix the bug" ✅ Good: query: "TypeError: Cannot read property 'map' of undefined in UserList component" context: "React 18, Next.js 14, fetching users from API with useState" ``` ### 2. Include What You've Tried ``` query: "Performance issue: homepage takes 4 seconds to load" context: "Next.js 14, bundle size 2.3MB, tried removing some imports but didn't help, using Material-UI and Chart.js" ``` ### 3. Mention Constraints ``` query: "Need to add real-time notifications" context: "Next.js on Vercel (no persistent WebSocket), 3-dev team, 2-month timeline, budget-conscious" ``` ### 4. Ask Specific Questions ``` query: "Should I use Redux, Zustand, or Context API for state management?" context: "Medium app (~20 components), 3 developers, need persistence, type safety important" ``` --- ## 🚀 Integration Checklist To make this workflow automatic: - [ ] Updated MCP server with new tool description - [ ] Added `.cursorrules` file to project - [ ] Configured Cursor Composer instructions - [ ] Tested think tool with example - [ ] Documented workflow for team - [ ] Created examples for common scenarios - [ ] Shared with other developers --- ## 📱 Quick Reference Card ### The Think-Before-Code Pattern ``` NEW INFORMATION ARRIVES ↓ PAUSE ⏸️ ↓ CALL THINK TOOL 🧠 ↓ REVIEW INSIGHTS 👀 ↓ WRITE BETTER CODE 💻 ↓ TEST & VERIFY ✅ ``` ### Remember: > **"Measure twice, cut once"** > > **"Think before coding"** > > **"Analysis prevents bugs"** --- ## 🎯 Success Metrics Track these to see the impact: 1. **First-Try Success Rate** - Before: Code works correctly first time ~40% - After: Code works correctly first time ~85% 2. **Revision Rounds** - Before: Average 2-3 revisions per feature - After: Average 1 revision per feature 3. **Bug Introduction** - Before: 1 bug per 2 features - After: 1 bug per 5 features 4. **Development Speed** - Before: Fast start, slow total - After: Thoughtful start, fast total 5. **Code Quality** - Before: Inconsistent - After: Consistently high --- ## 🎬 Example Session **Full workflow demonstration:** ``` User: I need to add pagination to the products table AI: Let me analyze this before implementing. [Calls think tool] query: "Implement pagination for products table" context: "Next.js 14 app, PostgreSQL database, currently showing all products (growing dataset, ~5000 products), using React components" [Think tool returns:] - Current approach won't scale - Recommend server-side pagination - Use Next.js API routes - Implement cursor-based pagination (better than offset) - Add URL params for bookmark sharing - Consider: loading states, error handling, empty states - Libraries: Can use plain fetch or React Query for caching - Example structure provided AI: Based on the analysis, I'll implement server-side cursor-based pagination: 1. First, let me check your current products fetching code... 2. I'll create an API route for paginated data... 3. Then update the component with pagination controls... 4. Add loading and error states... [Implements complete solution] This approach: ✅ Scales to millions of products ✅ Shareable URLs (page state in URL) ✅ Better performance (loads only what's needed) ✅ Proper loading states ✅ Error handling included User: Perfect! Works great! ``` **Result**: Right solution, first time, happy user! 🎉 --- ## 🔄 Continuous Improvement ### Week 1: Learning Phase - Use think tool for every code change - Notice the patterns - See the improvements ### Week 2: Habit Formation - Using think tool becomes natural - Fewer bugs in code - Faster overall development ### Week 3: Expert Level - Know when to use think tool - Anticipate insights - Writing higher quality code ### Week 4+: Mastery - Think tool is second nature - Significantly better code quality - Team adopts the practice --- ## 📚 Additional Resources - [THINK_TOOL_EXAMPLES.md](./THINK_TOOL_EXAMPLES.md) - 10 detailed examples - [README.md](./README.md) - MCP server setup - [src/index.ts](./src/index.ts) - Tool implementation --- ## 🤝 Team Adoption ### For Team Leads: 1. Introduce the concept in team meeting 2. Share this document 3. Run workshop with examples 4. Track metrics (bug reduction, first-try success) 5. Celebrate wins ### For Developers: 1. Read this guide 2. Try one example 3. Use for next 5 code changes 4. Share experience with team 5. Make it a habit ### For Code Reviews: Ask: "Did you use the think tool for this?" - If yes: Great! Shows in code quality - If no: Suggest for next time --- **Remember**: The few seconds spent thinking saves hours of debugging! 🧠💡 **Start using this workflow today and see the difference in your code quality!** 🚀

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/huuthangntk/claude-vision-mcp-server'

If you have feedback or need assistance with the MCP directory API, please join our Discord server