Name	Name	Last commit message	Last commit date
Latest commit History 7 Commits
dist	dist
examples/minimal	examples/minimal
src	src
.gitignore	.gitignore
DESIGN_PRINCIPLES.md	DESIGN_PRINCIPLES.md
LICENSE	LICENSE
PROJECT_STATUS.md	PROJECT_STATUS.md
QUICK_START.md	QUICK_START.md
README.md	README.md
package.json	package.json

PACE.js

AI-native storefront framework for the modern web

15KB • Zero Dependencies • Framework Agnostic

Quick Start • Examples • Documentation • Demo

What is PACE?

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}
i️ About
_{Context and trust-building before commitment}
💬 Chat
_{AI-powered guided discovery}
🎯 Executive Summary
_{Real-time insights and recommendations}

Why PACE?

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

✨ Features

⚡ 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

🚀 Quick Start

Installation

Via NPM:

npm install @semanticintent/pace-pattern

Via 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">

Minimal Example

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. 🎉

⚙️ Configuration

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();

📦 Product Format

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 repository
demo — Link to live demo
download — Download link
buy — Purchase link

🎨 Examples

Standalone Site

# Clone and run
git clone https://github.com/semanticintent/pace.js
cd pace.js/examples/minimal
python -m http.server 8000
# Visit http://localhost:8000

React Integration

import { 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} />;
}

Vue Integration

<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>

🔌 Extensibility

Plugins

class AnalyticsPlugin {
 init(pace) {
 pace.on('product-selected', ({ detail }) => {
 gtag('event', 'view_item', { item_id: detail.product.id });
 });
 }
}
pace.use(new AnalyticsPlugin());

Custom AI Adapters

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();

Themes

// Override CSS variables
pace.setTheme({
 primaryColor: '#ff6b6b',
 accentColor: '#4ecdc4',
 font: 'Poppins, sans-serif'
});

📚 Documentation

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

🌟 Reference Implementation

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

📊 Comparison

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	✅	❌	❌	❌

🎓 Citation

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}
}

🗺️ Roadmap

✅ v1.0 (Current)

Core framework
Four main components
Basic theming
Plugin system
Working examples

🔜 v1.1 (Next)

NPM package published
Build system (Rollup)
TypeScript definitions
Claude API adapter
OpenAI API adapter

🔮 v2.0 (Future)

Advanced analytics
A/B testing
Multi-language support
Mobile app wrappers
Headless CMS integration

See PROJECT_STATUS.md for detailed roadmap.

🤝 Contributing

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.

📄 License

See LICENSE for details.

🙏 Acknowledgments

Built with inspiration from Alpine.js, Preact, and the PACE Pattern
Powered by Phosphor Icons
Published on Zenodo

📞 Support

📖 Documentation
💬 Discussions
🐛 Issues
🌐 Website

Built with ❤️ using the PACE Pattern

⭐ Star this repo if you find it useful!

License

semanticintent/pace.js

Folders and files

Latest commit

History

Repository files navigation