CharlyAutomatiza

Posted on Aug 15

🤖 Your Backlog Speaks, Your IDE listens: How to Build and Test Apps with MCP in Command

"This isn't the future, it's the present. The tools are within everyone's reach." - Buenos Aires Meetup, July 2025

🎯 The Reality That Changed Everything

Picture this scene: It's 3 PM on a Friday, you have 20 tasks in the backlog, 3 critical bugs, and your PM just arrived with "a small modification" that needs to be ready by Monday. Sound familiar?

For 19 years in tech, I've lived this reality countless times. But something changed radically in recent months, and no, it's not another JavaScript framework 😄.

The revolution didn't come from where we expected. It came from being able to directly converse with our backlog.

🚫 The Problem We All Know

Traditional Development Limitations

In the traditional development cycle, regardless of whether you use Scrum, Kanban, or your preferred methodology, we face the same challenges:

Fragmented Communication: Between product, UX, development, and QA, there's always "broken telephone"
Infinite Manual Processes: From idea to code, there are 47 manual steps (I literally counted them once)
Gap Between Specification and Result: What we ask for vs. what we build vs. what we actually needed

Result: We spend 70% of our time on processes and only 30% solving real problems.

💡 The Silent Revolution: MCP Servers

MCP: My Code's Perfect (Finally!) 🎯

MCP (Model Context Protocol) is the framework that Anthropic launched to solve a problem we all faced: How do you give specific context to LLMs without going crazy?

Before MCP:

Each model needed its own implementation
Your project context was lost
You had to choose between Claude, GPT, Gemini... and start from scratch each time

With MCP:

One framework, any model
Your context + LLM power = magic
Tools that speak directly to your stack

The "Aha!" Moment

The turning point came when I realized something: We no longer need to be "10x engineers", we need to be engineers who leverage 10x tools.

🏗️ The Experiment: Wallet Sandbox

Setting Up the Laboratory

To demonstrate MCP's power, I created a virtual wallet application with:

Next.js 15 + App Router
TypeScript + Tailwind CSS
Redux Toolkit for state
Playwright for testing

The Crucial Part: All context was defined in structured documentation:

BACKLOG.md with detailed user stories
BUILD_STANDARDS.md with defined processes
PLAYWRIGHT_STANDARDS.md with testing standards

The Protagonists: GitHub MCP and Playwright MCP

1. GitHub MCP: Your AI Project Manager

Available tools:

Complete issues and PRs management
Automatic branch creation
Reviewer handling
Project tracking

2. Playwright MCP: Your Automated QA

Capabilities:

Automatic application exploration
Context-based test generation
Intelligent element detection
Automatic bug reporting

🎬 The Live Show: From Idea to Production

Act 1: "What Tasks Do I Have Assigned?"

👤 User: "What tasks do I have assigned in the backlog?"

🤖 AI: [Executes tools automatically]
- ✅ Reads BACKLOG.md
- ✅ Queries GitHub Issues
- ✅ Analyzes open PRs
- ✅ Classifies by priority

Response: "You have 3 pending critical bugs and 1 high-priority US. 
I also detected 2 PRs under review that might need your attention."

🔥 Plot Twist: I didn't tell it to go to GitHub. I didn't tell it to read the backlog. It simply... did it.

Act 2: "Implement Scheduled Transfers"

The user story [US-301] was defined in the backlog:

As a wallet user

I want to schedule recurring transfers

So that I can automate periodic payments

The Magic of Defined Context

Before executing any code, the system:

Verified the Mandatory Workflow:

   git checkout main
   git pull origin main
   git checkout -b feature/US-301-transferencias-programadas-v2

Analyzed Existing Architecture:
- Next.js App Router structure
- Established Redux patterns
- Available UI components
Followed Defined Standards:
- Naming conventions
- Strict TypeScript
- Server Actions patterns

The Result: 15 Minutes, Complete Functionality

In real-time, during the presentation, it built:

✅ Form to schedule transfers
✅ Frequency selector (one-time, daily, weekly, monthly)
✅ Future date validations
✅ Scheduled transfers management page
✅ Complete integration with existing flow

Visual Journey: From Concept to Reality

What would traditionally take 2-3 days of development, MCP delivered in just 15 minutes. Here's the actual implementation created during the live presentation:

📝 Step 1: Intuitive Transfer Scheduling

> Clean, user-friendly form that guides users through scheduling recurring transfers with frequency options, date validation, and clear input fields - all generated automatically following established design patterns.

✅ Step 2: Immediate Feedback & Confirmation

> Professional success screen providing users with complete transfer details and clear next steps. The confirmation experience feels polished and trustworthy - exactly what you'd expect from a production app.

📊 Step 3: Professional Management Dashboard

> Comprehensive dashboard where users can view, edit, and manage all their scheduled transfers. Each entry shows essential details like amount, frequency, and next execution date, with convenient action buttons for full control.

The Traditional vs. MCP Reality:

Traditional approach: Multiple wireframes, design iterations, component building, state management setup, validation logic, testing cycles
MCP approach: One conversation, instant implementation, production-ready result

Generated code: 347 lines across 5 files
Traditional development time estimate: 2-3 days
Real time with MCP: 15 minutes

Act 3: Automatic Testing with Playwright MCP

👤 User: "What tests do you suggest I perform?"

🤖 AI with Playwright MCP:
- ✅ Analyzes built functionality
- ✅ Identifies critical flows
- ✅ Generates and executes tests automatically
- ✅ Detects console errors
- ✅ Validates behavior across different browsers

The Surprising Part: It found bugs we didn't even know existed.

Technical Note: During the demo, I had to manage the tool limit in VS Code, strategically switching between GitHub MCP and Playwright MCP to optimize performance for different development phases.

Act 4: The Virtuous Circle

When Playwright MCP detected minor console errors:

👤 User: "Create a bug ticket with the detected error"

🤖 GitHub MCP:
- ✅ Analyzes the found error
- ✅ Gathers context and evidence
- ✅ Creates structured issue in GitHub
- ✅ Assigns appropriate labels and severity
- ✅ Includes reproduction steps

Result: Complete issue with all necessary information, ready to be worked on.

Act 5: Complete Automation Cycle - The Live Demo Finale

This is where the audience witnessed something unprecedented. After being satisfied with the implementation, I demonstrated the complete automated publication cycle:

The Automated Publication Process

👤 User: "I'm satisfied with the implementation. Let's publish this."

🤖 GitHub MCP (following predefined rules):
- ✅ Validates all code changes
- ✅ Executes automatic commit with proper message format
- ✅ Pushes branch to remote repository
- ✅ Creates pull request with detailed description
- ✅ Assigns configured reviewers automatically
- ✅ Links PR to original user story issue

What the audience saw: A complete Git workflow executed through natural language commands, all because the rules were predefined in the Copilot instructions.

The AI-Powered Code Review Cycle

Within minutes of the PR creation, the real magic happened:

🤖 GitHub Copilot (automatically):
- ✅ Reviews the generated code
- ✅ Analyzes implementation patterns
- ✅ Posts detailed review comments with suggestions
- ✅ Identifies potential improvements
- ✅ Suggests best practices

Accessing Review Feedback

During the demo, I showed how to interact with the review process:

👤 User: "Analyze all the comments on my PR"

🤖 GitHub MCP:
- ✅ Retrieves all review comments automatically
- ✅ Analyzes and summarizes feedback and suggestions
- ✅ Categorizes comments by importance
- ✅ Provides context for each suggestion
- ✅ Suggests possible action plan

Real review comments analyzed included:

Direct state mutation issues
Navigation in render problems
Hook usage improvements
Performance optimization opportunities

The Complete Cycle Metrics

Real demo timeline (~20 minutes total):

Feature implementation: 15 minutes
Automated testing: 2 minutes
Publication workflow: 1 minute
Copilot review: Automatic (2 minutes)
Issue creation: 30 seconds

Traditional workflow estimate:

Feature implementation: 2-3 days
Testing and debugging: 4-6 hours
Code review process: 1-2 days
Bug reporting and tracking: 1-2 hours
Total: 4-6 days

Productivity improvement: ~96% time reduction

🔧 The Ingredients for Success

1. Copilot Instructions (The Project's DNA)

The secret lies in the instructions you define. My instructions file included:

⚠️ **CRITICAL WORKFLOW REQUIREMENT** ⚠️
ALWAYS START by verifying backlog task and Git workflow steps BEFORE suggesting any technical solution.

1. **Enhanced Task Discovery Process**:
   - Read BACKLOG.md first
   - Search GitHub Issues if task not found
   - Confirm task ID (US-XXX, TT-XXX, BG-XXX)

2. **Git Workflow**:
   - Start from updated main
   - Create feature branch following naming convention
   - Follow commit message standards

3. **Development Standards**:
   - Next.js 15 with App Router
   - TypeScript strict mode
   - Component structure patterns

4. **Publication Rules**:
   - Auto-commit with proper message format
   - Auto-push to remote branch
   - Auto-create PR with detailed description
   - Auto-assign reviewers including Copilot
   - Auto-apply labels and issue linking

2. Structured Documentation

Every aspect of the project was documented:

BACKLOG.md: 50+ user stories with acceptance criteria
BUILD_STANDARDS.md: Development processes and Git workflows
PLAYWRIGHT_STANDARDS.md: Testing standards and Page Object Model

3. Context, Not Commands

Instead of saying "do X", I defined why and how:

## Test Automation Standards

### Pre-Publication Validation
- ALWAYS validate tests execute successfully before publishing changes
- Distinguish between test failures and application bugs
- Create GitHub Issues for application defects with comprehensive evidence

4. Technical Constraints and Solutions

Tool Limitations: VS Code has a tool limit for MCP servers, requiring strategic tool selection during different phases of development.

Context Management: Longer conversations can impact performance, sometimes requiring fresh contexts for complex workflows.

📊 The Numbers That Matter

Before vs. After

Process	Traditional Method	With MCP	Reduction
Backlog analysis	30 min	2 min	93%
Feature implementation	2-3 days	15 min	99%
Test creation	4-6 hours	2 min	99%
Bug reporting	20 min	30 seconds	97%
Code review setup	5 min	Automatic	100%
Complete cycle	4-6 days	~20 min	~96%

Output Quality

Standards adherence: Consistent (predefined rules)
Automatically detected bugs: Comprehensive test coverage
Generated documentation: Complete and up-to-date
Code review coverage: Automatic and thorough

🚀 Practical Implementation: Your Roadmap

Phase 1: Preparation (1 week)

Document Your Context:

   - Create BACKLOG.md with your current tasks
   - Define BUILD_STANDARDS.md with your processes
   - Structure TESTING_STANDARDS.md

Configure Your IDE:
- VS Code with native MCP support
- Or Cursor with cursor rules
- Install necessary MCP Servers
Define Your Copilot Instructions:
- Git workflows
- Code standards
- Testing processes
- Publication automation rules

Phase 2: First Experiments (1 week)

Start Simple:

   "What pending tasks do I have in my backlog?"
   "Analyze this code and suggest improvements"
   "Create a test for this functionality"

Iterate the Instructions:
- Observe what works and what doesn't
- Adjust context based on results
- Refine standards

Phase 3: Complete Integration (2 weeks)

Complete Workflows:

   Backlog → Implementation → Testing → PR → Deploy

Advanced Automation:
- Automatic bug detection
- Performance testing
- Documentation generation
- Automated code review cycles

Recommended Tools

IDEs with MCP Support

VS Code: Native support
Cursor: Excellent integration, no tool limits
Claude Desktop: For quick experimentation

Essential MCP Servers

GitHub MCP: Project and code management
Playwright MCP: Automated testing
Supabase MCP: Database and backend services - Getting Started

🚀 Your Next Move: The Revolution Starts Now

For Developers

The competitive advantage is real, and the window is open now.

This Week:
- Download VS Code or Cursor
- Configure GitHub MCP
- Have your first conversation with the backlog
This Month:
- Implement your first complete feature with MCP
- Automate your testing suite
- Measure the time saved
- Set up automated publication workflows
This Quarter:
- Make MCP your main workflow
- Train your team
- Document your processes
- Become the productivity multiplier for your organization

For Product Managers

It's time to get closer to technical implementation.

MCP democratizes development. Now you can:

Converse directly with the backlog
Validate implementations in real-time
Iterate ideas without waiting for complete sprints
See changes in production within hours, not weeks

For CTOs and Tech Leads

The competitive advantage lies in early adoption.

Teams that adopt MCP now will have:

Significantly faster development cycles
Consistent quality through predefined standards
Lower learning curve for new developers
Documentation that stays current automatically
Complete traceability from idea to production

🌟 Final Reflections

The New Reality

After 19 years in technology, I can affirm that we've never been so close to democratizing software development.

MCP doesn't replace technical knowledge, it amplifies it. You still need to:

Understand the problem you're solving
Know the technologies you use
Define clear processes and standards

But now, instead of spending time on repetitive tasks, you can converse with your backlog and build solutions.

The Live Demo Impact

During the Buenos Aires Meetup, someone asked: "How do you see the future of these tools?"

My answer was clear: Let's not talk about the future. Let's talk about the present.

The tools are here. MCP Servers are available. IDEs have native support.

What we demonstrated live wasn't a vision—it was reality. In 20 minutes, we went from user story to production-ready code with automated testing, code review, and bug tracking.

The only question left is: When are you going to start?