Frontend Engineering with Agentic AI: An MCP-Powered Development Lifecycle

This presents a real-world case study of how the Earnin Payroll frontend team adopted an agentic AI development workflow — powered by Claude Code, Cursor, and a suite of Model Context Protocol (MCP) integrations — to fundamentally reshape how frontend engineers plan, build, review, and ship features across a production NX monorepo.

The Problem: Modern frontend development demands constant context-switching — reading Jira tickets for requirements, translating Figma designs into components, writing Storybook stories for visual regression, coordinating with backend teams on Slack, creating PRs on GitHub, and managing cross-repo dependencies in a micro-frontend architecture. Each tool lives in its own silo, and developers spend significant time bridging the gaps between them.

Our Approach: We built an interconnected agentic workflow where AI agents operate across the full development lifecycle through MCP server integrations:

- Jira MCP — Agents read ticket requirements, create bug tickets from Slack conversations, and automatically reply in Slack threads with ticket links, keeping traceability without manual effort.
- Figma MCP — Design-to-code translation where agents consume Figma components directly and generate implementation aligned with our design system library.
- Slack MCP — Agents draft team communications with the right formatting conventions (threaded messages, channel routing for PR reviews vs. casual discussions), propose replies for human approval, and tag the right team members — all without leaving the coding context.
- Storybook MCP — Agents generate stories with proper Chromatic snapshot configuration, automatically disabling snapshots for interaction-only or visually duplicate stories to reduce CI cost and noise.
- GitHub CLI — Automated PR creation with conventional commit messages, branch management, and code review workflows integrated into the agent loop.
- Claude Code — The orchestration layer that ties everything together. Multi-agent dispatch for parallel ticket work (e.g., researching the codebase once, then fanning out parallel agents for independent Jira tickets). Persistent memory for team preferences, project context, and architectural decisions that carry acrossg documentation that guides agent behavior withinlibrary boundaries and import conventions.

Transcript

1. Frontend Engineering with Agentic AI An MCPPowered Development Lifecycle ABAAAA AgentCamp Bangkok 2026 May 16, 2026 Siwat Kaolueng Senior Software Engineer at EarnIn Pichyapa Khanapattanawong Software Engineer at EarnIn
2. 2 Siwat Kaolueng Jame Speaking Senior Software Engineer @ EarnIn https://www.linkedin.com/in/siwatkaolueng
3. 3 Pichyapa Kh. Putter Speaking Software Engineer @ EarnIn https://www.linkedin.com/in/pichyapa-khanapattanawong
4. Agenda for today 1. Problem 2. Solution 3. Technology 4. Workflow 5. Demo 6. Lessons Learned 7. Summary
5. Problem Solution Technology Workflow Lessons Learned Demo
6. “Manual coordination and high context-switching across disjointed tools that bottleneck frontend developmentˮ
7. “Weˮ 󰺑 “Humanˮ 󰞛󰟧 are the bottleneck 🍾👔
8. Problem Solution Technology Workflow Lessons Learned Demo
9. “Agentic AI workflow that streamlines Frontend Development from Planning → PRˮ
10. Problem Solution Technology Workflow Lessons Learned Demo
11. Technology Claude Code, Cursor Jira MCP Figma MCP Github CLI Storybook, React, OpenAPI, MSW CodeRabbit
12. Problem Solution Technology Workflow Lessons Learned Demo
18. Problem Solution Technology Workflow Lessons Learned Demo
29. Magic..?
31. - No design system - No examples - No existing patterns
32. With Design system, no components/examples
33. With Design system, no components/examples
34. With Design system, components, and patterns, + Proper prompting
35. ✅ Minimal fix ✅ Storybook + Interaction test
36. ✅ Analytics ✅ Tests & Codebase conventions ✅ Reuse patterns
37. “Implement these 2 designs from Figma. The design includes mobile and desktop, make the page responsive. Use the existing components and follow the patterns in the onboarding appˮ OR “Investigate Jira Ticket} and plan what needs to be doneˮ “use StyledModalSheet for the modalˮ “Create a PR for this branchˮ OR “Fix the failing test.ˮ OR “Get reviews from the branchʼs PR, validate, and plan to fix itˮ
38. - Streamline repeated daily work - Automation created by AI - AI helps planning, give recommendations, and optimizing the workflow
39. Live Demo Time!
40. Problem Solution Technology Workflow Lessons Learned Demo
41. Spec-driven detailed requirements Detailed spec gives better outcome that requires less fix Lessons Learned How to get the most out of AI Example and reusable patterns will help AI work better Check if your tool has MCP servers – it can help streamline the workflow Use Examples and Design Systems Utilize MCP Servers
42. “The best frontend engineers won't be replaced by AI; they'll be the ones who stopped letting tools interrupt their thinking.ˮ
43. “Use AI to centralize, eliminate friction, and reclaim your time for the work that matters. That's the AI-first mental model.ˮ
45. Thank you! Reach out to us if you have questions. Jame Siwat Pichyapa Kh.