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}

ℹ️ 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)

🔮 v2.0 (Future)

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!

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

License

semanticintent/pace.js

Folders and files

Latest commit

History

Repository files navigation