PACE stands for Product, About, Chat, Executive Summary — a UX pattern designed specifically for AI-powered storefronts and product catalogs.
Traditional e-commerce patterns don't work well for AI tools, MCP servers, and modern SaaS products. PACE solves this by combining four essential components:
|
📦 Product Intelligent catalog with filtering and discovery |
ℹ️ About Context and trust-building before commitment |
💬 Chat AI-powered guided discovery |
🎯 Executive Summary Real-time insights and recommendations |
| Traditional E-commerce | PACE Pattern |
|---|---|
| Product-first | Conversation-first |
| Transactional | Relational |
| Static categories | AI-guided discovery |
| One-size-fits-all | Contextual recommendations |
| Admin-only analytics | Visible insights |
- ⚡ Lightweight — 15KB minified + gzipped (6x smaller than React)
- 🚀 Zero Dependencies — Pure vanilla JavaScript
- 🎨 Framework Agnostic — Works standalone or with React, Vue, Svelte
- 🤖 AI-Powered Chat — Built-in Claude, OpenAI, and custom adapters
- 📊 Executive Summary — Real-time conversation insights
- 🎯 Pattern-Based — Encodes PACE Pattern into reusable framework
- 🔌 Extensible — Plugin system, themes, and adapters
- 📱 Responsive — Mobile-first design
- ♿ Accessible — WCAG 2.1 compliant
- 🎓 Academic — Published on Zenodo with DOI
Via NPM:
npm install @semanticintent/pace-patternVia CDN:
<script type="module" src="https://unpkg.com/@semanticintent/pace-pattern@latest/dist/pace.esm.js"></script>
<link rel="stylesheet" href="https://unpkg.com/@semanticintent/pace-pattern@latest/dist/pace.min.css">Create an index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My AI Storefront</title>
<!-- Phosphor Icons -->
<script src="https://unpkg.com/@phosphor-icons/web"></script>
<!-- PACE.js CSS -->
<link rel="stylesheet" href="https://unpkg.com/@semanticintent/pace-pattern/dist/pace.min.css">
</head>
<body>
<div id="app"></div>
<script type="module">
import { PACE } from 'https://unpkg.com/@semanticintent/pace-pattern/dist/pace.esm.js';
const pace = new PACE({
container: '#app',
products: './products.json'
});
pace.mount();
</script>
</body>
</html>Create a products.json:
{
"products": [
{
"id": "my-product",
"name": "My First Product",
"tagline": "A great AI tool",
"category": "tools",
"price_display": "free",
"description": "## My Product\n\nThis is amazing!",
"action": "github",
"action_url": "https://github.com/you/product"
}
]
}That's it! Open index.html in your browser. 🎉
PACE.js is highly configurable while maintaining sensible defaults:
const pace = new PACE({
// Required
container: '#app',
products: './products.json', // or inline array
// About Page
about: {
title: 'About Us',
subtitle: 'Building the future of AI tools',
sections: [
{ title: 'Our Mission', content: '<p>...</p>' },
{ title: 'Team', content: '<p>...</p>' }
]
},
// Chat Widget
chat: {
enabled: true,
provider: 'claude',
apiKey: process.env.ANTHROPIC_API_KEY,
model: 'claude-3-5-sonnet-20241022',
placeholder: 'Ask about our products...',
suggestions: [
'What products do you offer?',
'How do I get started?'
]
},
// Executive Summary
executiveSummary: {
enabled: true,
updateInterval: 30000, // 30 seconds
insights: ['trends', 'recommendations', 'key_moments']
},
// Theme
theme: {
primaryColor: '#667eea',
accentColor: '#764ba2',
font: 'Inter, system-ui, sans-serif'
}
});
pace.mount();Products are defined in simple JSON:
{
"products": [
{
"id": "unique-id",
"name": "Product Name",
"tagline": "One-line description",
"category": "mcp_servers",
"price_display": "free",
"icon": "🚀",
"description": "## Markdown Description\n\nSupports **markdown** formatting!",
"action": "github",
"action_url": "https://github.com/..."
}
]
}Supported actions:
github— Link to GitHub repositorydemo— Link to live demodownload— Download linkbuy— Purchase link
# Clone and run
git clone https://github.com/semanticintent/pace.js
cd pace.js/examples/minimal
python -m http.server 8000
# Visit http://localhost:8000import { useEffect, useRef } from 'react';
import { PACE } from '@semanticintent/pace-pattern';
function Store() {
const ref = useRef(null);
useEffect(() => {
const pace = new PACE({
container: ref.current,
products: './products.json'
});
pace.mount();
return () => pace.destroy();
}, []);
return <div ref={ref} />;
}<template>
<div ref="container"></div>
</template>
<script>
import { PACE } from '@semanticintent/pace-pattern';
export default {
mounted() {
this.pace = new PACE({
container: this.$refs.container,
products: './products.json'
});
this.pace.mount();
},
beforeUnmount() {
this.pace.destroy();
}
}
</script>class AnalyticsPlugin {
init(pace) {
pace.on('product-selected', ({ detail }) => {
gtag('event', 'view_item', { item_id: detail.product.id });
});
}
}
pace.use(new AnalyticsPlugin());class CustomAdapter {
async sendMessage(message, context) {
const response = await fetch('/api/chat', {
method: 'POST',
body: JSON.stringify({ message })
});
return response.json();
}
}
pace.components.chat.adapter = new CustomAdapter();// Override CSS variables
pace.setTheme({
primaryColor: '#ff6b6b',
accentColor: '#4ecdc4',
font: 'Poppins, sans-serif'
});- DESIGN_PRINCIPLES.md — Architecture, philosophy, and technical design
- QUICK_START.md — Get up and running in 5 minutes
- PROJECT_STATUS.md — Current status and roadmap
- API Reference — Coming soon
- Chat Adapters — Coming soon
- Plugin Development — Coming soon
MillPond Storefront is the official reference implementation of PACE 1.0.1:
- 🎯 Interactive Demo: demo.millpond.dev - PACE 1.0.1 pattern showcase
- 🏪 Production Site: millpond.dev - Live storefront with AI chat
- 🔗 Source Code: github.com/semanticintent/millpond-storefront
| Feature | PACE.js | React | Vue | Alpine.js |
|---|---|---|---|---|
| Size | 15KB | 42KB | 34KB | 15KB |
| Dependencies | 0 | 2+ | 1+ | 0 |
| Build Required | ❌ | ✅ | ✅ | ❌ |
| Learning Curve | 5 min | Hours | Hours | 15 min |
| AI-Native | ✅ | ❌ | ❌ | ❌ |
| Pattern-Based | ✅ | ❌ | ❌ | ❌ |
PACE.js implements the PACE Pattern published on Zenodo. If you use this in your research or project, please cite:
@software{pace_pattern_2024,
author = {Semantic Intent},
title = {PACE Pattern: Product, About, Chat, Executive Summary},
year = {2024},
publisher = {Zenodo},
version = {1.0.1},
doi = {10.5281/zenodo.18049371},
url = {https://doi.org/10.5281/zenodo.18049371}
}- Core framework
- Four main components
- Basic theming
- Plugin system
- Working examples
- NPM package published
- Build system (Rollup)
- TypeScript definitions
- Claude API adapter
- OpenAI API adapter
- Advanced analytics
- A/B testing
- Multi-language support
- Mobile app wrappers
- Headless CMS integration
See PROJECT_STATUS.md for detailed roadmap.
Contributions are welcome! Here's how you can help:
- 🐛 Report bugs — Open an issue
- 💡 Suggest features — Start a discussion
- 📝 Improve docs — Submit a PR
- 🎨 Create themes — Share with community
- 🔌 Build plugins — Extend functionality
See CONTRIBUTING.md for guidelines.
MIT © Semantic Intent
See LICENSE for details.
- Built with inspiration from Alpine.js, Preact, and the PACE Pattern
- Powered by Phosphor Icons
- Published on Zenodo
- 📖 Documentation
- 💬 Discussions
- 🐛 Issues
- 🌐 Website
Built with ❤️ using the PACE Pattern
⭐ Star this repo if you find it useful!