PACE Pattern

Appearance

Quick Start ​

Build your first PACE app in 5 minutes.

Prerequisites ​

  • Node.js 18+ (or modern browser for CDN)
  • Text editor
  • Basic JavaScript knowledge

Step 1: Install PACE.js ​

bash
npm install @semanticintent/pace-pattern

Option B: CDN ​

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

Step 2: Create Your Project ​

Create these files:

my-pace-app/
├── index.html
├── app.js
└── products.json

index.html ​

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My 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" src="app.js"></script>
</body>
</html>

app.js ​

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

const pace = new PACE({
  container: '#app',
  products: './products.json',
  greeting: 'Welcome! What can I help you find?'
})

pace.mount()

products.json ​

json
{
  "products": [
    {
      "id": "product-1",
      "name": "Starter Kit",
      "tagline": "Everything you need to get started",
      "category": "Getting Started",
      "description": "## Starter Kit\n\nPerfect for beginners. Includes all the basics.",
      "action_label": "Get Started",
      "action_url": "https://example.com/starter"
    },
    {
      "id": "product-2",
      "name": "Pro Tools",
      "tagline": "Advanced features for power users",
      "category": "Advanced",
      "description": "## Pro Tools\n\nFor experienced users who need more control.",
      "action_label": "Learn More",
      "action_url": "https://example.com/pro"
    },
    {
      "id": "product-3",
      "name": "Enterprise Suite",
      "tagline": "Full-featured solution for teams",
      "category": "Enterprise",
      "description": "## Enterprise Suite\n\nComplete solution with team collaboration.",
      "action_label": "Contact Sales",
      "action_url": "https://example.com/enterprise"
    }
  ]
}

Step 3: Run Your App ​

With NPM ​

bash
npm install -g serve
serve .

With Python ​

bash
python -m http.server 8000

With Node.js ​

bash
npx http-server

Open http://localhost:8000 in your browser.

Step 4: See It Work ​

You should see:

  1. Purple gradient interface with sidebar navigation
  2. Product catalog showing 3 products grouped by category
  3. About page with default PACE information
  4. Chat widget (without AI, shows placeholder)
  5. Executive Summary tracking your activity

Try These Actions ​

✅ Click a product — See it highlighted ✅ Search products — Type "pro" in search box ✅ Navigate — Click sidebar items (Product, About, Chat, Summary) ✅ Check URL — Notice hash-based routing (#product, #about, etc.)

Step 5: Add AI (Optional) ​

To enable the conversational guide, add an AI adapter:

Using Claude ​

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

const pace = new PACE({
  container: '#app',
  products: './products.json',
  aiAdapter: new ClaudeAdapter({
    apiKey: 'YOUR_ANTHROPIC_API_KEY',
    model: 'claude-3-sonnet-20240229'
  }),
  greeting: 'Welcome! What are you fishing for?'
})

pace.mount()

Using OpenAI ​

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

const pace = new PACE({
  container: '#app',
  products: './products.json',
  aiAdapter: new OpenAIAdapter({
    apiKey: 'YOUR_OPENAI_API_KEY',
    model: 'gpt-4'
  })
})

pace.mount()

API Keys

Never commit API keys to version control. Use environment variables:

javascript
apiKey: process.env.CLAUDE_API_KEY

Step 6: Customize ​

Change Colors ​

javascript
const pace = new PACE({
  container: '#app',
  products: './products.json',
  theme: {
    primary: '#3b82f6',  // Blue
    accent: '#8b5cf6',   // Purple
    font: 'Roboto, sans-serif'
  }
})

Change Greeting ​

javascript
const pace = new PACE({
  container: '#app',
  products: './products.json',
  greeting: 'Hi there! Looking for something specific?'
})

Set Default View ​

javascript
const pace = new PACE({
  container: '#app',
  products: './products.json',
  defaultView: 'chat'  // Start on chat instead of products
})

Troubleshooting ​

"Cannot find module" ​

Problem: Import error when using NPM.

Solution:

bash
rm -rf node_modules package-lock.json
npm install

"PACE is not defined" ​

Problem: Using UMD build incorrectly.

Solution: Access via namespace:

javascript
const pace = new PACE.PACE({ ... })

Or use ESM:

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

Products not loading ​

Problem: CORS error loading products.json.

Solution: Use a local server (see Step 3), not file:// protocol.

Styles not applied ​

Problem: CSS not loading.

Solution: Add stylesheet:

html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@semanticintent/pace-pattern/dist/pace.min.css">

Next Steps ​

Congratulations! You've built your first PACE app. 🎉

What's next?

Continue Learning

Full Example ​

Here's everything in one file for easy copy-paste:

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My 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 to get started',
            category: 'Getting Started',
            description: '## Starter Kit\n\nPerfect for beginners.',
            action_label: 'Get Started',
            action_url: 'https://example.com'
          },
          {
            id: '2',
            name: 'Pro Tools',
            tagline: 'Advanced features',
            category: 'Advanced',
            description: '## Pro Tools\n\nFor power users.',
            action_label: 'Learn More',
            action_url: 'https://example.com'
          }
        ]
      },
      greeting: 'Welcome! What can I help you find?'
    })

    pace.mount()

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

    pace.on('product:select', ({ product }) => {
      console.log('Selected:', product.name)
    })
  </script>
</body>
</html>

Save this as index.html, run a local server, and you're done!

Built your first PACE app in 5 minutes! 🚀