FeedMob AdPilot - Project Story

Live Demo

Try the live deployment:

Inspiration

Creating effective advertising campaigns requires expertise across multiple domains—understanding target audiences, crafting compelling copy, designing eye-catching visuals, and optimizing for specific platforms. This complexity creates barriers for small businesses and independent advertisers who lack resources for full creative teams.

I was inspired to build FeedMob AdPilot after recognizing how Kiro IDE's unique features—Specs, Steering Docs, Agent Hooks, and MCP integration—could streamline this multi-faceted workflow. The Model Context Protocol (MCP) provided the perfect framework for building an AI agent system that could break down complex advertising tasks into manageable, interactive steps while maintaining context throughout the entire campaign creation process.

What it does

FeedMob AdPilot is a comprehensive MCP server that transforms natural language campaign descriptions into complete advertising assets through six core capabilities:

  1. Parse Ad Requirements: Extracts structured campaign parameters (product, audience, budget, platform, KPIs) from conversational input
  2. Conduct Ad Research: Generates comprehensive campaign reports with audience insights, competitor analysis, platform strategies, and performance benchmarks
  3. Generate Ad Copy: Creates two distinct, platform-optimized copy variations with headlines, body text, and CTAs
  4. Generate Ad Images: Produces multiple image variations with interactive selection interface
  5. Generate Mixed Media: Combines selected images and copy into complete creative assets
  6. Campaign Management: Stores and retrieves campaign data via PostgreSQL for persistence

The system presents all results through rich, interactive mcp-ui components that allow users to review, select, and refine outputs at each stage. A Next.js chat interface provides a conversational experience for the complete workflow.

How we built it

I leveraged Kiro IDE's full feature set to build this complex MCP server in a fraction of the time traditional development would require.

Development Approach

I used Kiro IDE's complete feature ecosystem in an integrated way:

Spec-Driven Development (10 Major Features)

I created formal specifications for each major feature with three documents:

  • requirements.md: User stories and acceptance criteria
  • design.md: Architecture, schemas, and correctness properties
  • tasks.md: Implementation checklist

This provided complete traceability from requirements to code and enabled systematic implementation.

Steering Documents (7 Persistent Context Docs)

I created always-included steering docs that taught Kiro about:

  • Technology stack and commands (tech.md)
  • FastMCP integration patterns (fastmcp-integration.md)
  • MCP-UI component creation (mcp-ui-integration.md)
  • Claude Agent SDK patterns (agent-tool-patterns.md)
  • Agent skill development (claude-agent-skills.md)
  • UI design system (color-guidelines.md)

These eliminated the need to repeat context in every conversation.

Agent Hooks (4 Automated Workflows)

  • Security Pre-Commit Scanner: Scans every file edit for security issues
  • MCP-UI Docs Checker: Ensures mcp-ui changes align with latest docs
  • MCP Builder Skill Hook: Provides MCP-specific guidance when editing server files
  • Agent Skills Builder: Helps create Claude Agent skills for new tools

MCP Integration (6 Servers)

  • fetch: External documentation and API specs
  • exa: Code examples and best practices
  • context7: Library documentation (FastMCP, Zod)
  • sequential-thinking: Complex problem decomposition
  • mcp-ui-docs: Always up-to-date mcp-ui documentation
  • agent-skills: skill-creator and mcp-builder skills

Hybrid Vibe + Spec Approach

  • Spec Mode for new features: Systematic, traceable implementation
  • Vibe Mode for iterations: 10x faster bug fixes and adjustments

Tech Stack

  • FastMCP + mcp-ui for the MCP server and interactive UI
  • Claude Agent SDK with custom skills for AI processing
  • TypeScript with Zod for type-safe validation
  • PostgreSQL for campaign data persistence
  • Vitest + fast-check for property-based testing

Challenges we ran into

  1. Claude Agent SDK Authentication: Initial plugin loading had authentication issues. I worked around this by implementing a hybrid approach that falls back to embedded mode when plugins are unavailable.

  2. Complex Multi-Stage Workflow: Maintaining context across six different tools required careful schema design. I used Zod schemas to ensure type safety and validation at each boundary.

  3. Interactive UI State Management: Building rich mcp-ui components that maintain state and trigger tool calls required understanding the UIResource pattern deeply. Kiro's mcp-ui-docs MCP server was invaluable here.

  4. Agent Skill Design: Creating effective agent skills that produce structured JSON output consistently required iteration. The skill-creator skill from agent-skills MCP server helped tremendously.

  5. Database Schema Evolution: As features evolved, managing PostgreSQL migrations while maintaining backward compatibility required careful planning.

  6. MCP-UI Chatbot Compatibility: During testing phase , discovered that some existing mcp-ui chatbots didn't work properly or had poor UX. This led to building a custom Next.js chat interface specifically designed for our workflow.

  7. Production Deployment Issues: Encountered several critical production issues:

    • Gateway timeout problems with long-running agent operations
    • MCP tool call timeouts requiring optimization
    • Docker container missing dependencies for image generation features
    • Required implementing proper health checks and monitoring
  8. Agent Processing Time: Research and copy generation agents sometimes took too long, requiring implementation of streaming responses and better user feedback during processing.

Accomplishments that we're proud of

  1. Complete End-to-End Workflow: Built a production-ready system with 6 MCP tools, 6 agent services, 6 UI factories, and PostgreSQL persistence—all documented with 10 comprehensive specs.

  2. Spec-Driven Traceability: Every line of code traces back to a requirement in the specs. Correctness properties became property-based tests.

  3. Interactive UI Excellence: Created rich mcp-ui components with collapsible sections, side-by-side comparisons, interactive selection, and dark mode support.

  4. Hybrid Development Approach: Successfully combined Spec mode for structured features and Vibe mode for rapid iterations, achieving both quality and velocity.

  5. Production Deployment: Successfully deployed to production with Docker and Coolify:

  6. Custom Chat Interface: Built a custom Next.js chat client specifically optimized for mcp-ui interactions when existing chatbots proved insufficient.

  7. Comprehensive Documentation: Created detailed documentation including Quick Start guides, API references, usage examples, and deployment instructions.

  8. Rapid Development: Completed the entire system from concept to production deployment in just 6 days using Kiro IDE's full feature set.

What we learned

  1. Kiro's Power in Structured Development: Specs aren't just documentation—they become the blueprint for systematic implementation with full traceability.

  2. Steering Docs Eliminate Repetition: Teaching Kiro once through steering docs saved countless hours of context repetition across conversations.

  3. Agent Hooks for Quality: Automated workflows through hooks catch issues early and provide context-aware assistance exactly when needed.

  4. MCP Extends Capabilities: Integrating external MCP servers (mcp-ui-docs, agent-skills, context7) was like having specialized teammates available 24/7.

  5. Hybrid Vibe + Spec: Neither pure spec-driven nor pure vibe coding is optimal—the combination gives structure for complexity and speed for iterations.

  6. MCP Architecture Patterns: Building with FastMCP + Claude Agent SDK + mcp-ui creates a powerful pattern: validated input → AI processing → interactive output.

  7. Property-Based Testing: Defining correctness properties in specs naturally leads to better test coverage and more robust code.

  8. Production Reality Check: Development and production are different beasts. Gateway timeouts, container dependencies, and tool call timeouts only appear in production—requiring iterative fixes and optimizations.

  9. Custom UI Sometimes Necessary: While leveraging existing tools is ideal, sometimes building a custom solution (like our Next.js chat interface) is necessary when existing options don't meet specific UX requirements.

  10. Rapid Iteration Wins: Kiro enabled moving from concept to production in 6 days—a timeline that would have been impossible with traditional development approaches.

What's next for FeedMob AdPilot

Immediate Priorities (Bug Fixes & Optimizations)

  1. Fix Gateway Timeout Issues: Optimize long-running agent operations to prevent timeout errors
  2. Resolve MCP Tool Call Timeouts: Implement better async handling and streaming responses
  3. Docker Image Generation Dependencies: Complete Docker container configuration for image generation features
  4. Performance Optimization: Reduce overall processing time for research and generation agents

Feature Roadmap

  1. Video Ad Generation: Extend to TikTok/Instagram Reels with AI-generated video content
  2. A/B Testing Integration: Track performance metrics and recommend winning variations
  3. Multi-Platform Campaigns: Optimize single campaigns across multiple platforms simultaneously
  4. Real-Time Analytics: Connect to advertising platforms for live performance data
  5. Template Library: Build a library of proven campaign templates by industry
  6. Collaboration Features: Multi-user workspace for creative teams
  7. API for Integration: REST API for integration with existing marketing tools
  8. Enhanced Storage: Implement comprehensive campaign versioning and history tracking

Built With

Share this project:

Updates