PACE Pattern

Appearance

Examples ​

Real-world implementations of the PACE Pattern.

Overview ​

Learn by example. Each implementation demonstrates different aspects of PACE:

ExampleComplexityWhat It Shows
MillPondAdvancedFull production implementation with AI
MinimalBeginnerSimplest possible PACE app
ReactIntermediateIntegration with React

MillPond Storefront ​

The reference implementation of PACE.

Live Demo: millpond.cormorantforaging.dev

What It Includes ​

  • ✅ 5 products (MCP servers)
  • ✅ Claude AI guide ("Cormorant")
  • ✅ Custom About page with origin story
  • ✅ Executive summary tracking
  • ✅ Purple gradient theme
  • ✅ Full search and filtering
  • ✅ Analytics integration
  • ✅ Production deployment

Key Features ​

Conversational Guide

Guide: "Welcome to the pond. What are you fishing for?"
User: "I need something for databases"
Guide: "For database work, I'd recommend SQL MCP..."

Adaptive Responses

  • Beginner: "Think of MCP servers like plugins for Claude"
  • Expert: "Implements JSON-RPC 2.0 over stdio transport"

Real-Time Tracking

  • Products discussed: SQL MCP, GitHub MCP
  • User expertise: Intermediate
  • Suggested next steps: Try SQL MCP, View docs

View MillPond Documentation →

Minimal Example ​

The simplest PACE app possible - perfect for learning.

Code: View on GitHub

What It Includes ​

  • ✅ 3 products
  • ✅ No AI (shows placeholder chat)
  • ✅ Default theme
  • ✅ Single HTML file
  • ✅ CDN-based (no build step)

Complete Code ​

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Minimal PACE App</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@semanticintent/pace-pattern/dist/pace.min.css">
</head>
<body>
  <div id="app"></div>

  <script type="module">
    import { PACE } from 'https://cdn.jsdelivr.net/npm/@semanticintent/pace-pattern/dist/pace.esm.js'

    const pace = new PACE({
      container: '#app',
      products: {
        products: [
          {
            id: '1',
            name: 'Starter Kit',
            tagline: 'Everything you need',
            category: 'Getting Started',
            description: '## Starter Kit\n\nPerfect for beginners.'
          },
          {
            id: '2',
            name: 'Pro Tools',
            tagline: 'Advanced features',
            category: 'Advanced',
            description: '## Pro Tools\n\nFor power users.'
          },
          {
            id: '3',
            name: 'Enterprise',
            tagline: 'Full solution',
            category: 'Enterprise',
            description: '## Enterprise\n\nComplete package.'
          }
        ]
      }
    })

    pace.mount()
  </script>
</body>
</html>

That's it! 100 lines, zero dependencies, fully functional.

View Minimal Example Documentation →

React Integration ​

How to use PACE.js with React.

Code: View on GitHub

What It Includes ​

  • ✅ React 18
  • ✅ Vite
  • ✅ TypeScript
  • ✅ PACE.js wrapper component
  • ✅ State synchronization

Component Example ​

tsx
import { PACE } from '@semanticintent/pace-pattern'
import { useEffect, useRef } from 'react'

export function PACEWrapper({ products, onProductSelect }) {
  const containerRef = useRef<HTMLDivElement>(null)
  const paceRef = useRef<PACE | null>(null)

  useEffect(() => {
    if (!containerRef.current) return

    const pace = new PACE({
      container: containerRef.current,
      products: products
    })

    pace.on('product:select', ({ product }) => {
      onProductSelect?.(product)
    })

    pace.mount()
    paceRef.current = pace

    return () => {
      pace.destroy()
    }
  }, [products])

  return <div ref={containerRef} />
}

View React Integration Documentation →

More Examples Coming Soon ​

We're working on additional examples:

  • Vue Integration - PACE with Vue 3 Composition API
  • Svelte Integration - Lightweight PACE + Svelte
  • E-commerce Store - Full shopping cart implementation
  • Documentation Site - PACE for doc discovery
  • SaaS Onboarding - Guided product setup

Want to contribute an example? See Contributing Guide

Example Template ​

Start your own example with this template:

javascript
import { PACE } from '@semanticintent/pace-pattern'

const pace = new PACE({
  container: '#app',
  products: './products.json',

  // Optional: AI
  aiAdapter: adapter,

  // Optional: Theme
  theme: {
    primary: '#667eea',
    accent: '#764ba2'
  },

  // Optional: Events
  greeting: 'Your custom greeting'
})

// Listen to events
pace.on('ready', () => {
  console.log('PACE ready')
})

pace.on('product:select', ({ product }) => {
  console.log('Selected:', product)
})

// Mount
pace.mount()

Learn by Doing ​

The best way to learn PACE is to build with it:

Try These

  1. Start with Minimal Example - Get it running in 5 minutes
  2. Study MillPond - See production-level implementation
  3. Build your own - Use First App Tutorial
  4. Share it! - Submit to our example gallery

Example Repository ​

All examples are in the main repo:

GitHub: semanticintent/pace.js/examples

bash
git clone https://github.com/semanticintent/pace.js.git
cd pace.js/examples

Each example has:

  • ✅ Complete source code
  • ✅ README with setup instructions
  • ✅ Live demo link
  • ✅ Explanation of key concepts

Learn PACE by building! 🛠️