Leveraging GitHub's AI Coding Agent: From Planning to Feature

[cheeragpatel]

Leveraging GitHub's AI Coding Agent: From Planning to Feature

Introduction

Following up on my previous post on Building an AI-Powered Trivia Game with GitHub Copilot, I’ve made some updates leveraging Coding Agent!

In this post, I'll walk you through an exciting journey of using GitHub's AI Coding Agent to implement a complete feature in our trivia game. The feature? Adding timers and scoring to make the game more competitive and engaging. What makes this story special is how I seamlessly moved from initial planning with GitHub Copilot in the IDE, to issue creation using GitHub MCP (Model Context Protocol), and finally to automated implementation using the Coding Agent configured with Playwright MCP.

With the power of a coding agent, I was able to multiply my productivity and streamline the development process. Putting me in the reviewer seat allowed me to focus on high-level design and user experience, while the agent handled the nitty-gritty details of implementation.

The Feature Request

Our trivia game was functional, but it lacked the competitive edge that timers and scoring bring. Players needed:

• A 30-second countdown timer for each question
• Scoring based on response speed (faster = more points)
• Real-time leaderboard updates
• Visual feedback when time runs out

Step 1: Planning with GitHub Copilot

The journey began in VS Code, where I used GitHub Copilot to brainstorm the implementation approach. It helped me think through the architecture changes needed:

The planning phase was crucial - GitHub Copilot helped identify that I'd need:

• A new CountdownTimer component with visual indicators
• Updates to GameState.js to track timing data
• Socket handler modifications for timer synchronization
• UI updates in both game-show and player views

Step 2: Creating the Issue with GitHub MCP

Instead of manually creating an issue on GitHub, I used the GitHub MCP (Model Context Protocol) directly from my IDE. This allowed me to create a well-structured issue without leaving my development environment:

The MCP integration made it seamless to translate our planning notes into a properly formatted GitHub issue with all the necessary details and acceptance criteria.

Step 3: Assigning to the Coding Agent

Here's where things get really interesting. I assigned the newly created issue to GitHub's Coding Agent, which I had configured with the Playwright MCP for testing capabilities:

The Coding Agent immediately began analyzing the codebase and understanding the requirements. It created a pull request with a comprehensive implementation plan:

Step 4: Implementation and Iteration

The Coding Agent's initial implementation was impressive. It created:

1. A CountdownTimer component with color-changing visual feedback (green → yellow → red)
2. Enhanced GameState.js to track question start times and calculate scores
3. Updated socket handlers for timer synchronization across clients
4. UI integration in both game-show and player views

What's remarkable is how the Coding Agent responded to feedback. When I suggested improvements through PR comments, it iterated on the implementation:
The agent understood context, made appropriate changes, and even updated its PR summary to reflect the modifications:

Step 5: The Final Result

After the automated implementation and iterations, I had a fully functional timer and scoring system:

Timer in Action

The countdown timer provides visual feedback as time progresses, creating urgency for players.

Real-time Scoring

Players can see their scores update in real-time based on how quickly they ansIr correctly.

Winner Announcement

When the game ends, the winner is announced with an animated popup.

Final Leaderboard

The final leaderboard shows all players' scores with smooth animations when positions change.

Key Takeaways

This experience demonstrated several powerful aspects of GitHub's AI tooling:

1. Seamless Workflow: Moving from planning with Copilot to issue creation with MCP to implementation with Coding Agent felt natural and efficient.

2. Context Preservation: The Coding Agent understood not just the issue description but also the existing codebase architecture, making appropriate design decisions.

3. Iterative Development: The agent's ability to understand and respond to PR feedback meant I could refine the implementation without manual coding.

4. Testing Integration: With Playwright MCP configured, the agent could even consider testing scenarios while implementing features.

5. Time Efficiency: What would have taken hours of manual coding was completed in minutes, with high-quality, maintainable code.

Conclusion

The combination of GitHub Copilot for planning, GitHub MCP for issue management, and the Coding Agent for implementation represents a new paradigm in software development. It's not about replacing developers but augmenting our capabilities to focus on what matters most - solving problems and creating value.

The timer and scoring feature transformed our simple trivia game into a competitive, engaging experience. But more importantly, this project demonstrated how AI tools can accelerate development while maintaining code quality and following best practices.

Have you tried using GitHub's Coding Agent in your projects? I'd love to hear about your experiences and any tips you've discovered along the way!

---

Check out the full implementation in our repository: cheeragpatel/quiz-game

[rudra-swnt-12]

Hi @cheeragpatel
Does using Json prompting help in any way for planning issues or solving anything
I'd like to know the actual usecase as to how and where Json prompting can be used for best results

[zainali0303]

JSON prompting is useful when you need structured, predictable outputs for planning, automation, or system-driven workflows. While it’s not directly related to Tailwind text colors, the same idea of structure applies—just like consistent text color tokens improve UI clarity, JSON prompting improves clarity and reliability when integrating AI responses into apps, tools, or design systems.

[mrizalbasri]

That makes sense regarding the structure. Could you provide a simple example of a prompt you use for planning tasks? I'm curious to see how you structure the JSON schema for that