Customer Story Writer

MCP servers:

Claap, Claude

💡 What problem this agent is solving

Marketing teams have scattered meeting notes and recordings that make it hard to tell the full story of how a deal was won. Valuable insights, customer quotes, and ROI proof points stay buried inside Claap recordings instead of being turned into a narrative that celebrates success, enables the team, and drives new pipeline.

Turning a deal into a customer story usually takes:

A writer interviewing the AE for 30 to 60 minutes
A manual hunt through recordings for the right quotes
A designer building the page in Webflow or similar
Multiple review rounds

The result: customer stories ship weeks after the deal closes, or never at all.

⚙️ What this agent does

This AI agent automatically creates a cinematic, on-brand customer story page from your Claap recordings:

Pulls every recording tied to the deal or company across the full sales cycle
Extracts the narrative: pain points, turning points, real customer quotes, ROI metrics
Applies your brand design system (colors, fonts, components) via a reusable branding skill
Generates a complete story page: hero, quotes carousel, key learnings, deal timeline, ROI highlights, CTA
Outputs as a React artifact for instant preview, or publishes directly to your CMS (Webflow, Contentful, Sanity, WordPress, Ghost...) via their MCP

🧩 Setup

1️⃣ Record your sales calls in Claap

Store recordings in your sales and customer channels. The agent pulls transcripts of calls tied to the deal.

2️⃣ Activate the Claap MCP + your CMS MCP in Claude

Connect Claap as an MCP server in Claude Desktop or Claude Code. Optionally connect your CMS MCP (Webflow, Contentful, Sanity, WordPress, Ghost, Strapi...) if you want the story published directly to your website.

3️⃣ Add a branding skill (design-system skill optional)

The branding skill teaches the AI your visual identity so every story page looks on-brand. For story pages that need to feel fully native to your website (component patterns, hero animations, carousel behavior), pair it with a design-system skill.

4️⃣ Create a project in Claude and add these instructions

💡 Drop your branding skill into the project so every customer story inherits your visual identity.

You're a senior content marketing strategist. Your mission: create a
cinematic, on-brand customer story page from real Claap meeting data for a
won deal. The page tells the story of how the deal was won, surfaces what
made it possible, and showcases the customer outcome.

Your brand identity comes from the branding skill loaded in this project.
Apply it for colors, typography, and visual tokens.

If a design-system skill is also loaded, use it for component patterns
(hero, quotes carousel, flip cards, timeline, CTA) and motion — prefer its
patterns over inventing new ones.

Do not invent visual style outside these skills.

Every quote, metric, and moment must come from an actual Claap recording. Do not fabricate data.

# Runtime input
- [COMPANY] → required, the customer company or deal name

# Data sourcing

Use the Claap MCP:
1. search_companies / search_recording_transcripts with [COMPANY] to find all recordings in the deal cycle
2. get_recording_transcript on each one (discovery, demo, negotiation, close, post-sale if any)
3. Extract:
- Customer context (industry, size, strategic goals)
- Pain points they described, verbatim
- The key moment(s) that tipped the deal
- Solution elements that resonated
- Real ROI metrics or outcome statements (only if stated on the call)
- Stakeholder names, roles, memorable quotes
- Deal timeline milestones with dates

# Page structure

Generate a React page (Tailwind CSS) with these sections, all styled per the branding skill:

🏁 Hero — Company name, catchy one-liner, AE(s), customer persona, short description
💬 Featured quotes — 3 to 5 verbatim quotes with context labels, speaker name and role, carousel
🧠 Key learnings — 4 flip cards in a 2x2 grid, numbered badges
📅 Deal timeline — 3 to 5 milestones with dates and outcomes
💰 ROI & impact — up to 3 real KPIs or outcome statements with source context
🏆 Call to action — "Watch key moments" (Claap link), "Share with the team", closing line

# Styling rules
- Pull all visual tokens from the branding skill
- If no branding skill is loaded, ask the user to load one before generating

# Technical implementation
- Framework: React
- Styling: Tailwind CSS + tokens from the branding skill
- Animation: Framer Motion
- Icons: Lucide-react
- Responsive: mobile + desktop

# Output
- React artifact by default
- If a CMS MCP is connected and requested, publish directly (Webflow, Contentful, Sanity, WordPress, Ghost...)

# Tone
- Authentic, celebratory, educational. Not marketing fluff.
- Use the customer's real voice (verbatim quotes, their metrics).
- Short sentences. Strong verbs. No hype.

5️⃣ You're ready

Say: "Create a customer story for [Company Name]" 👏. The agent pulls every recording tied to the deal, extracts the narrative, and generates the story page using your branding. Preview as a React artifact, iterate on specific sections, or publish to your CMS.

🔗 Go further: publish the story directly to your CMS

Any CMS with an MCP works. Connect the MCP, describe your content model, and the agent handles the field mapping.

Webflow

Connect the Webflow MCP and ask: "Publish this customer story to our Webflow site under the 'Customer stories' collection. Use fields: Title, Company name, Hero image, Body, Quotes, Metrics, Published date. Generate a slug from the company name. Create as Draft."

The agent uses the Webflow Data API via the MCP to create the CMS item, apply your site template, and return the live URL.

CRM-connected flow for full automation

Combine the CMS MCP with a CRM trigger for a zero-touch pipeline:

CRM property change (AE toggles "Generate customer story" on a closed-won deal) → Claap MCP (pull all recordings for the company) → AI agent + branding skill (generate the story page) → CMS MCP (publish to Webflow / Contentful / Sanity with Draft status) → Slack (ping #marketing for review and publish).

Marketing wakes up to a draft customer story ready to review, not a blank page.

🎨 How to customize this agent

Story template

Adapt the section order to your storytelling. Some teams want a stronger ROI section up top, others want the customer quote first.
Add sections: integration architecture, implementation story, team interview, video embed.
Remove sections that don't fit your narrative.

Output format

React artifact (default): instant preview and iteration in Claude
CMS direct publish: Webflow, Contentful, Sanity, WordPress, Ghost, or any CMS with an MCP
MDX export: for Next.js / Astro / Docusaurus sites
Static HTML: single-file export for hosting anywhere
Social screenshots: ask the agent for a narrow mobile-width render optimized for LinkedIn / Slack

Language

Works in any language. Specify in your prompt: "Generate the story in French" or "Match the customer's language".