PACE Components
The four core components that every PACE implementation includes.
The Four Components
| Component | Purpose | User Question |
|---|---|---|
| Product | AI-guided catalog | "What can you help me with?" |
| About | Context and trust | "Who are you?" |
| Chat | Conversational interface | "I want to ask questions" |
| Executive Summary | Real-time insights | "What have we discussed?" |
1. Product — AI-Guided Catalog
Purpose
The Product component is where users discover what's available. Instead of a static grid of cards, it's a conversation-driven catalog where the AI guide helps users find what they need.
Traditional vs. PACE
| Traditional Catalog | PACE Product Component |
|---|---|
| Grid of 50+ products | Guide asks: "What are you looking for?" |
| Search + filter UI | Natural language: "I need an MCP server for GitHub" |
| User browses randomly | Guide surfaces 2-3 relevant options |
| Information overload | Focused, curated recommendations |
Implementation Checklist
- [ ] Products are data-driven (JSON, API, CMS)
- [ ] Guide can search/filter programmatically
- [ ] Products have rich metadata (tags, categories, descriptions)
- [ ] Guide references specific product features in conversation
- [ ] Users can ask follow-up questions about products
Example Interaction
Guide: "Welcome to the pond. What are you fishing for?"
User: "I need something to help with database queries"
Guide: "Got it. For database work, I'd recommend:
1. **SQL MCP** — Direct database queries with natural language
2. **Schema Explorer** — Visual database schema browsing
3. **Query Builder** — Interactive SQL generation
Which sounds most useful?"2. About — Context and Trust
Purpose
The About component answers: "Who are you? Why should I trust you? What's your story?"
It provides context, credibility, and connection before users commit to engaging.
What Makes a Good About Section
| Must Include | Why It Matters |
|---|---|
| Origin story | Humanizes the product/creator |
| Philosophy | Shows values and approach |
| Use cases | Demonstrates understanding of user needs |
| Credibility | Publications, testimonials, track record |
| Connection | Links to ecosystem, related projects |
PACE-Specific Considerations
The About section should:
- Explain what the PACE Pattern is (for first-time visitors)
- Show how this implementation uses PACE
- Reference the guide (e.g., "Cormorant is your guide...")
- Link to source code, docs, community
Example About Structure
markdown
## About MillPond
MillPond is a conversational storefront implementing the PACE Pattern.
**What's PACE?**
Pattern for Agentic Conversational Experience — guide-first UX
where conversation replaces traditional navigation.
**Your Guide: Cormorant**
Named after the diving waterbird, Cormorant helps you find
exactly what you need through natural dialogue.
**The Philosophy**
"Don't make users hunt. Let the guide fish for them."
**Built With**
PACE.js framework, Claude AI, 15KB vanilla JavaScript.
[View on GitHub →](https://github.com/semanticintent/millpond-storefront)3. Chat — Conversational Interface
Purpose
The Chat component is the primary interface where users engage with the AI guide. This is where discovery happens.
Key Requirements
| Requirement | Implementation |
|---|---|
| Persistent | Chat history stays visible |
| Contextual | Guide references previous messages |
| Actionable | Responses include buttons, links, product cards |
| Natural | Feels like conversation, not commands |
UX Patterns
Greeting (Proactive)
Guide: "Welcome to the pond. What are you fishing for?"Clarification (Adaptive)
User: "I need something for my project"
Guide: "Happy to help! What kind of project — web app, CLI tool,
data analysis, or something else?"Recommendation (Contextual)
Guide: "Based on your interest in CLI tools, here are 3 MCP servers:
[product cards]"Follow-up (Efficient)
User: "Tell me more about the first one"
Guide: "SQL MCP — lets you query databases with natural language.
[Try it] [View docs] [Ask me anything]"Technical Considerations
- Streaming responses — Show text as it's generated
- Rich content — Support markdown, cards, buttons
- Error handling — Graceful fallbacks if AI fails
- Rate limiting — Prevent abuse
- Session persistence — Save conversation history
4. Executive Summary — Real-Time Insights
Purpose
The Executive Summary provides meta-awareness of the conversation:
- What has been discussed
- What products were mentioned
- User's apparent interests and expertise level
- Suggested next steps
Who Is It For?
Primary audience: The user
- "What have we covered?"
- "What did I express interest in?"
- "What should I do next?"
Secondary audience: The implementation team
- Track engagement patterns
- Identify drop-off points
- Optimize guide behavior
What to Include
| Section | Content | Format |
|---|---|---|
| Conversation Summary | High-level overview | 2-3 sentences |
| Products Discussed | List of mentioned products | Links with icons |
| User Intent | Detected goals/needs | Tags or badges |
| Expertise Level | Detected from language | Beginner/Intermediate/Advanced |
| Next Steps | Suggested actions | Buttons or links |
Example Executive Summary
markdown
## Executive Summary
### Conversation Overview
User is exploring MCP servers for database work.
Technical background indicated. Focused on SQL integration.
### Products Discussed
- ✅ SQL MCP — Primary interest
- 🔍 Schema Explorer — Mentioned
- ⏭️ Query Builder — Deferred
### Detected Interests
#database #sql #mcp-servers #postgresql
### Expertise Level
Advanced — User mentioned "JSON-RPC", "stdio transport"
### Suggested Next Steps
- [Try SQL MCP →]
- [View documentation →]
- [Compare with Query Builder →]Implementation Tips
- Update dynamically — Refresh as conversation progresses
- Summarize, don't transcribe — High-level insights, not full chat log
- Make it actionable — Include CTAs and next steps
- Visualize — Use progress bars, charts, or gauges where helpful
How the Components Work Together
Example User Journey
- About — User lands, reads origin story, understands PACE
- Product — User browses catalog, sees variety of offerings
- Chat — User asks: "Which MCP server for GitHub integration?"
- Guide — Recommends 2-3 options, explains differences
- User — Asks follow-up: "Does it work with GitHub Actions?"
- Guide — Answers, provides link to docs
- Executive Summary — Shows conversation progress, suggests trying the product
- User — Clicks "Try it" → conversion
Component Interaction Patterns
Pattern 1: Product → Chat
User clicks a product card → Chat opens with pre-filled context:
Guide: "You clicked on SQL MCP. Would you like to:
- See installation steps
- Learn about features
- Compare with alternatives"Pattern 2: Chat → Executive Summary
As conversation progresses, Executive Summary updates:
Products discussed: +1
User expertise: Upgraded to "Advanced"
Suggested next step: "Try SQL MCP"Pattern 3: Executive Summary → Product
User clicks "Products Discussed" → Filtered product view shows only mentioned items
Checklist: Does Your PACE Implementation Have All Four?
- [ ] Product — AI-guided catalog with conversational discovery
- [ ] About — Context, story, credibility, and connection
- [ ] Chat — Primary conversational interface with AI guide
- [ ] Executive Summary — Real-time conversation insights and next steps
If any are missing, your implementation is incomplete.
See Also
- PACE Principles — How components should behave
- The Semantic Matrix — Why P-A-C-E works as an acronym
- MillPond Example — See all four components in action
- Building Your First App — Implement the components
Product. About. Chat. Executive Summary. That's PACE. ✨