AI Agent Guide

pm7-ui is the first UI library built specifically for AI Coding Agents.
Learn how to leverage its AI-first design for rapid development.

The First UI Library Built for AI

Simple CSS Classes

No complex APIs or component imports. Just use class="pm7-button" and it works.

Copy-Paste Ready

All examples are plain HTML that you can copy directly into any project.

Framework Agnostic

Works the same in React, Vue, Angular, or vanilla HTML. No context switching.

Quick Start for AI Agents

🤖 AI Tip

Tell your AI agent: "I'm using pm7-ui. Use CSS classes like pm7-button, pm7-card, etc."

1. Basic Setup

// Just import the CSS once
import '@pm7/core/dist/pm7.css';

// Or in HTML
<link rel="stylesheet" href="https://unpkg.com/@pm7/core/dist/pm7.css">

2. Use Components

Now you can use any PM7 component with simple CSS classes:

<!-- Buttons -->
<button class="pm7-button pm7-button--primary">Primary Button</button>
<button class="pm7-button pm7-button--secondary">Secondary Button</button>

<!-- Cards -->
<div class="pm7-card">
  <div class="pm7-card-header">Card Title</div>
  <div class="pm7-card-body">Card content</div>
</div>

<!-- Inputs -->
<input type="text" class="pm7-input" placeholder="Enter text...">

Common AI Prompts

Building a Form

Prompt: "Create a login form using pm7-ui classes"

<form class="pm7-card" style="max-width: 400px; margin: 0 auto;">
  <div class="pm7-card-header">
    <h2>Login</h2>
  </div>
  <div class="pm7-card-body">
    <div style="margin-bottom: 1rem;">
      <label for="email">Email</label>
      <input type="email" id="email" class="pm7-input" placeholder="you@example.com">
    </div>
    <div style="margin-bottom: 1.5rem;">
      <label for="password">Password</label>
      <input type="password" id="password" class="pm7-input">
    </div>
    <button type="submit" class="pm7-button pm7-button--primary pm7-button--full">
      Sign In
    </button>
  </div>
</form>

Creating a Navigation Menu

Prompt: "Create a dropdown menu with pm7-ui"

<div class="pm7-menu" data-pm7-menu>
  <button class="pm7-menu-trigger">
    Options
  </button>
  <div class="pm7-menu-content">
    <button class="pm7-menu-item">Profile</button>
    <button class="pm7-menu-item">Settings</button>
    <div class="pm7-menu-separator"></div>
    <button class="pm7-menu-item pm7-menu-item--destructive">Logout</button>
  </div>
</div>

Building a Product Card

Prompt: "Create a product card with image, title, price, and buy button"

<div class="pm7-card" style="max-width: 300px;">
  <img src="product.jpg" alt="Product" style="width: 100%; height: 200px; object-fit: cover;">
  <div class="pm7-card-body">
    <h3>Product Name</h3>
    <p style="color: var(--pm7-muted-foreground);">Brief product description</p>
    <div style="display: flex; justify-content: space-between; align-items: center; margin-top: 1rem;">
      <span style="font-size: 1.5rem; font-weight: bold;">$99.99</span>
      <button class="pm7-button pm7-button--primary">Add to Cart</button>
    </div>
  </div>
</div>

Framework-Specific Examples

React

// Just use className instead of class
import { useEffect } from 'react';
import '@pm7/core';

function MyComponent() {
  useEffect(() => {
    // Enable self-healing for framework re-renders
    PM7.initFramework();
  }, []);
  
  return (
    <button className="pm7-button pm7-button--primary" onClick={handleClick}>
      React Button
    </button>
  );
}

Vue

<!-- Use class as normal -->
<template>
  <button class="pm7-button pm7-button--primary" @click="handleClick">
    Vue Button
  </button>
</template>

<script>
import { onMounted } from 'vue';
import '@pm7/core';

export default {
  setup() {
    onMounted(() => {
      PM7.initFramework();
    });
  }
}
</script>

Angular

<!-- Use class with Angular event binding -->
<button class="pm7-button pm7-button--primary" (click)="handleClick()">
  Angular Button
</button>

Interactive Components

Some components need JavaScript for interactivity. They auto-initialize when you include the PM7 script:

// Import once in your app
import '@pm7/core';

// Or manually initialize after adding dynamic content
PM7.init();

Components with Auto-initialization & Self-Healing

Menu - [data-pm7-menu] - ✨ Self-heals on re-render
Accordion - [data-pm7-accordion] - ✨ Self-heals on re-render
Tab Selector - [data-pm7-tab-selector] - ✨ Self-heals on re-render
Tooltip - [data-pm7-tooltip] - ✨ Self-heals on re-render
Sidebar - [data-pm7-sidebar] - ✨ Self-heals on re-render
Theme Switch - [data-pm7-theme-switch]

✨ Self-Healing Components (v2.5.0+)

Components marked with ✨ automatically recover from framework re-renders. AI agents no longer need to write workarounds for React, Vue, or Angular state management!

📝 Note about Dialogs

Dialogs use data-pm7-dialog for identification but are NOT auto-initialized. Use openDialog('dialog-id') to open them.

Documentation Links for AI

🤖 AI Agent Reference

For a complete reference of ALL PM7-UI attributes and patterns, see AI-AGENT.md - the definitive guide for AI agents using PM7-UI.

📚 Component Documentation

Need all pm7-ui documentation links in one place? Visit our README Links page for easy access to all component documentation.

Tips for AI Agents

💡 Pro Tip

Always specify "pm7-ui" in your prompts to get consistent results.

DO:

✅ Use simple CSS classes: pm7-button, pm7-card
✅ Combine modifiers: pm7-button pm7-button--primary pm7-button--lg
✅ ALWAYS use data-pm7-* attributes for ALL components
✅ Import CSS once at the top of your app
✅ Check AI-AGENT.md for complete attribute reference

DON'T:

❌ Import React components from @pm7/react (package removed)
❌ Use complex component APIs
❌ Worry about framework-specific syntax
❌ Use pm7-* attributes without data- prefix

Complete Example

Here's a complete example you can copy and paste:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>pm7-ui Example</title>
  <link rel="stylesheet" href="https://unpkg.com/@pm7/core/dist/pm7.css">
</head>
<body>
  <div style="max-width: 1200px; margin: 0 auto; padding: 2rem;">
    <!-- Header -->
    <header style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem;">
      <h1>My App</h1>
      <div class="pm7-menu" data-pm7-menu>
        <button class="pm7-menu-trigger">Menu</button>
        <div class="pm7-menu-content">
          <button class="pm7-menu-item">Home</button>
          <button class="pm7-menu-item">About</button>
          <button class="pm7-menu-item">Contact</button>
        </div>
      </div>
    </header>
    
    <!-- Content -->
    <div class="pm7-card">
      <div class="pm7-card-header">
        <h2>Welcome</h2>
      </div>
      <div class="pm7-card-body">
        <p>This is a complete pm7-ui example.</p>
        <button class="pm7-button pm7-button--primary">Get Started</button>
      </div>
    </div>
  </div>
  
  <script src="https://unpkg.com/@pm7/core"></script>
</body>
</html>