Get Your AI Agent Started with PM7-UI

The quickest way to build beautiful UIs with your AI coding assistant.

Give Your AI Agent the Documentation

Copy and paste this message to your AI assistant (ChatGPT, Claude, Copilot, etc.):

We're using pm7-ui for our UI. Here's the documentation: https://raw.githubusercontent.com/patrickmast/pm7-ui/main/README-AI-HowToUse.md

This single link contains everything your AI needs to know about PM7-UI components, patterns, and best practices.

Install PM7-UI in Your Project

Have your AI run this command in your project:

npm install @pm7/core

Then import the CSS (your AI will know where to put this):

import '@pm7/core/dist/pm7.css';

Start Building with Natural Language

Now you can ask your AI to build UI components using simple prompts:

"Add a primary button that saves the form"

"Create a card with a header 'User Profile' and show the user data inside"

"Add a dropdown menu with options: Edit, Delete, Share"

"Show a success toast notification when the save is complete"

Your AI knows all PM7-UI components and will generate the correct code for your framework!

Working with Specific Components

Need your AI to work with a specific component? Give it the direct documentation:

💡 Pro Tip

Visit our README Links page to get copy-paste ready documentation URLs for all components. Your AI will appreciate the direct links!

Example for the Menu component:

Implement a dropdown menu using: https://raw.githubusercontent.com/patrickmast/pm7-ui/main/packages/core/src/components/menu/README.md

Tips for Success

✅ Do:

Give your AI the main documentation link at the start of your session
Use natural language to describe what you want to build
Reference specific component docs when needed
Let your AI handle the implementation details

❌ Don't:

Try to memorize CSS classes (that's your AI's job)
Write component code manually
Worry about framework-specific syntax

Troubleshooting

My AI doesn't know about PM7-UI

Make sure you've given it the documentation URL. Some AI assistants might need a reminder:

Please read this PM7-UI documentation first: https://raw.githubusercontent.com/patrickmast/pm7-ui/main/README-AI-HowToUse.md

My AI is using React component syntax

Remind your AI that PM7-UI uses CSS classes, not React components:

Remember: PM7-UI uses CSS classes like pm7-button, not React components. It works with ALL frameworks.

Framework Integration

PM7-UI now includes self-healing components that automatically recover from framework re-renders!

✨ New in v2.7.0: PM7.initFramework()

Use PM7.initFramework() for seamless integration with React, Vue, and Angular. This method includes automatic timing delays and enables self-healing for all components.

React Integration

import { useEffect } from 'react';
import '@pm7/core/dist/pm7.css';
import '@pm7/core';

function App() {
  useEffect(() => {
    // Use initFramework() for better timing + automatic healing
    PM7.initFramework();
  }, []);
  
  return (
    // Your components here - they'll self-heal automatically!
  );
}

Vue Integration

import { onMounted } from 'vue';
import '@pm7/core/dist/pm7.css';
import '@pm7/core';

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

Angular Integration

import { Component, AfterViewInit } from '@angular/core';
import '@pm7/core/dist/pm7.css';
import '@pm7/core';

@Component({
  // ...
})
export class AppComponent implements AfterViewInit {
  ngAfterViewInit() {
    PM7.initFramework();
  }
}

Self-Healing Components

The following components automatically recover from framework re-renders:

Menu - Preserves open/close state
Accordion - Preserves expanded sections
Tab Selector - Preserves active tab
Tooltip - Preserves open state
Sidebar - Preserves open state and collapsibles
Dialog - Preserves content during transforms

No more workarounds needed! Components just work, even when your framework re-renders them.

Next Steps

Browse Components Framework Integration Guide Advanced AI Guide Get Component Links