Series Feature Implementation

Date: January 8, 2026
Agent: Claude Code (Sonnet 4.5)

Overview

The Series feature allows grouping blog posts into series with dedicated landing pages. Each series has:

• A title and slug
• A markdown summary that displays at the top of the landing page
• A filtered list of blog posts that belong to the series

This is similar to the Category feature but with the addition of rich markdown content for context.

Collaboration Model

This feature demonstrates AI-assisted development with Agility CMS using MCP:

• User (Joel): Set up all content models, containers, and pages in Agility CMS
• AI Agent (Claude Code): Queried the CMS via MCP, generated all code, created components, updated documentation
• Why it works: MCP allows the agent to directly inspect and understand the CMS structure, making code generation accurate and context-aware

What the User Set Up in Agility CMS

1. BlogSeries Content Model (ID: 21)

• title (Text, Required): The series title
• slug (Text, Required): URL-friendly identifier
• markdownSummary (Text, Required): Markdown content describing the series

2. BlogSeries Container (ID: 26)

• Reference Name: BlogSeries
• Type: Dynamic Page List

3. Example Series Content

The user created a series called "Building This Site" (contentID: 64)

4. Blog Post Model Update

The BlogPost model was updated with:

• seriesID (Integer): Stores the contentID of the associated series
• series (LinkedContentDropdown): UI field that saves to seriesID

Implementation by Claude Code

Created Files:

1. src/lib/cms-content/getSeriesListing.ts - Data fetching helper
2. src/components/agility-components/SeriesLanding.tsx - React component

SeriesLanding Component Features:

• Uses processMarkdown() to render the markdown summary with full gallery support
• Displays posts in the same layout as BlogListing
• Uses dynamicPageItem.contentID as the seriesID for filtering
• Side-by-side layout (50/50 split) with series description on left and posts on right

How MCP Changed the Development Process

Traditional Approach (Without MCP)

1. User sets up CMS models manually
2. User documents the structure
3. Agent reads documentation and guesses at implementation
4. Frequent back-and-forth to fix mismatches

MCP-Enabled Approach (What We Did)

1. User sets up CMS models manually in Agility UI
2. Agent queries Agility CMS directly via MCP tools
3. Agent generates code that exactly matches CMS structure
4. Zero guesswork, minimal user correction needed

The Result: The series feature was implemented in a single conversation with multiple iterations, all code worked first try because the agent was working with live CMS data, not documentation.

Visual Results

The Series Landing page showing the 50/50 side-by-side layout

Blog post detail page showing prominent series link above the title

Joel's Thoughts / Reflections

[Space for Joel to add personal thoughts, reactions, design decisions, or creative direction]