Skip to main content

Prompt Button Feature

A new feature that adds an AI-optimized "Prompt" button next to the Copy button, allowing users to export documentation content as prompts specifically formatted for Cursor AI, ChatGPT, Google Gemini, or any AI assistant.

Features​

  • Platform-Specific Formatting - Optimized output for Cursor, ChatGPT, Gemini, or Universal AI
  • Context-Rich Output - Includes page metadata, category, tool info, and source URL
  • Smart Content Extraction - Preserves code blocks, tables, lists, and formatting
  • Analytics Tracking - Tracks which platforms are most used
  • Visual Distinction - Purple/AI-themed styling separate from Copy button
  • Dropdown Interface - Clean 4-option dropdown menu
  • Responsive Design - Works on mobile and desktop
  • Accessibility - Proper ARIA attributes and keyboard navigation

How It Works​

The Prompt button appears automatically on all documentation pages next to the existing Copy button. It uses platform-specific formatters to optimize content for AI consumption.

User Experience​

  1. Click the "Prompt" button (purple icon with sparkles) next to breadcrumbs
  2. Select your AI platform from the dropdown:
    • Cursor AI - Optimized for Cursor with file paths and tool context
    • ChatGPT - Conversational format with expanded links
    • Gemini - Structured data format for Google's AI
    • Universal - Clean markdown for any AI assistant
  3. Content is copied to clipboard in AI-optimized format
  4. Paste into your AI assistant and start working!

Visual Feedback​

  • Button shows "Copied!" message for 2 seconds after copying
  • Dropdown closes automatically after selection
  • Purple hover state indicates AI-focused feature
  • Button includes hover and focus states for better UX

Platform-Specific Formatting​

Cursor AI Format​

Optimized for Cursor with:

  • File path references and code structure
  • Tool-specific context from frontmatter
  • Links to related tool documentation
  • Helpful Cursor-specific context footer
  • References to workspace structure

Example output structure:

# Tool Documentation: Webflow
Category: Website Tools
Monthly Cost: £25.00 GBP
Last Updated: 2026-01-07
Source: https://docs.pacing.agency/tools/webflow

## Context for Cursor
This is internal documentation for Pacing Agency's Webflow setup...

## Documentation Content
[Full content with preserved formatting]

## Helpful Context for Cursor
- Workspace: Main tech stack repository
- Related Files: tools/, architecture.md
- Tool Documentation: tools/webflow.md

ChatGPT Format​

Optimized for conversational AI with:

  • Friendly conversational intro
  • Expanded relative links to full URLs
  • Clear section headings
  • Context about how to use the information

Example output structure:

# Documentation: Webflow

Hi! I'm sharing documentation from Pacing Agency's internal tech stack...

## Quick Reference
- Category: Tools
- Tool Name: Webflow
[metadata...]

## How to Use This Information
This documentation includes configuration details...

## Full Documentation
[Content with all links expanded to full URLs]

Gemini Format​

Optimized for Google Gemini with:

  • Structured YAML frontmatter
  • Categorized metadata
  • Clean sectioned content
  • Additional context footer

Example output structure:

---
type: technical_documentation
source: pacing_agency_tech_stack
title: Webflow
category: Tools
tool_category: Website
---

# Webflow

## Document Summary
**Purpose**: Internal technical documentation...

## Key Information
[Structured metadata]

## Documentation Content
[Full content]

## Additional Context
- Organization: Pacing Agency
[...]

Universal Format​

Clean markdown for maximum compatibility:

  • Simple blockquote metadata
  • Minimal formatting
  • No platform-specific optimizations
  • Works with any AI assistant

Technical Implementation​

Component Structure​

docusaurus/src/components/PromptButton/
├── index.tsx              # Main component
├── styles.module.css      # Purple/AI themed styling
└── formatters.ts          # Platform-specific formatters

Platform Formatters​

The formatters.ts file contains 4 formatting functions:

export function formatForCursor(options: FormatterOptions): string
export function formatForChatGPT(options: FormatterOptions): string
export function formatForGemini(options: FormatterOptions): string
export function formatUniversal(options: FormatterOptions): string

Each formatter receives:

  • content: Markdown content from page
  • metadata: Page metadata (title, category, tool info, costs, etc.)
  • rawMarkdown: Optional raw markdown source

Metadata Extraction​

The component automatically extracts metadata from:

  • Docusaurus page context (useActiveDocContext)
  • Tool frontmatter (category, costs, account type)
  • URL path (for category detection)
  • Document title and structure
interface PageMetadata {
  title: string;
  category: string;
  toolCategory?: string;
  toolName?: string;
  lastUpdated?: string;
  monthlyCost?: number;
  accountType?: string[];
  source: string;
}

Integration​

The PromptButton is automatically injected into all documentation pages via the DocItem wrapper:

// docusaurus/src/theme/DocItem/index.tsx
import PromptButton from '@site/src/components/PromptButton';

export default function DocItemWrapper(props: Props): ReactNode {
  return (
    <>
      <div className="copy-download-button-container">
        <CopyDownloadButton />
        <PromptButton />
      </div>
      <DocItem {...props} />
    </>
  );
}

Styling​

Purple/AI-themed styling with:

  • Purple border and hover states (rgb(139, 92, 246))
  • Distinct visual identity from Copy button
  • Dark mode support with adjusted colors
  • Smooth animations and transitions
  • Shadow with purple tint on dropdown

Analytics Tracking​

The component tracks usage via Google Analytics (when analytics is implemented):

window.dataLayer.push({
  event: 'prompt_action',
  platform: 'cursor|chatgpt|gemini|universal',
  page_title: document.title,
  content_length: formattedContent.length
});

This allows us to understand:

  • Which AI platforms are most popular
  • What content is being exported as prompts
  • How the feature is being used

Usage Examples​

Example 1: Exporting Tool Documentation for Cursor​

  1. Navigate to /tools/webflow
  2. Click "Prompt" button
  3. Select "Cursor AI"
  4. Paste into Cursor chat
  5. Ask: "Help me set up a new Webflow project based on this documentation"

Example 2: Sharing Guide with ChatGPT​

  1. Navigate to /Guides/gtm-setup
  2. Click "Prompt" button
  3. Select "ChatGPT"
  4. Paste into ChatGPT
  5. Ask: "Walk me through implementing this GTM setup for a new client"

Example 3: Using Architecture Docs with Gemini​

  1. Navigate to /architecture
  2. Click "Prompt" button
  3. Select "Gemini"
  4. Paste into Google AI
  5. Ask: "Analyze this architecture and suggest improvements"

Setup Guide​

For New Repositories​

  1. Copy component files:

    • docusaurus/src/components/PromptButton/index.tsx
    • docusaurus/src/components/PromptButton/styles.module.css
    • docusaurus/src/components/PromptButton/formatters.ts

  2. Update DocItem wrapper:

    import PromptButton from '@site/src/components/PromptButton';

    // Add to render:
    <div className="copy-download-button-container">
      <CopyDownloadButton />
      <PromptButton />
    </div>

  3. Test the feature:

    • Start dev server: npm start
    • Navigate to any documentation page
    • Verify button appears next to Copy button
    • Test all 4 platform options

Customization​

Button Text​

Change button text in index.tsx:

<span className={styles.buttonText}>Prompt</span>
// Change to: "AI", "Export", "Optimize", etc.

Button Colors​

Modify purple theme in styles.module.css:

.promptButton {
  border: 1px solid rgba(139, 92, 246, 0.3); /* Change color here */
}

Formatter Customization​

Add custom context or modify formatting in formatters.ts:

export function formatForCursor(options: FormatterOptions): string {
  // Add your custom context or formatting
  formatted += `## Custom Section\n\n`;
  formatted += `Your custom content here\n\n`;
  return formatted;
}

Platform Icons​

Update SVG icons in index.tsx dropdown items to change visual appearance.

Best Practices​

When to Use Each Platform​

Cursor AI:

  • When working in Cursor editor
  • Need file path references
  • Building/modifying code
  • Understanding tool integrations

ChatGPT:

  • General questions about documentation
  • Need conversational explanations
  • Want expanded context
  • Creating content based on docs

Gemini:

  • Complex analysis tasks
  • Structured data processing
  • Multi-step workflows
  • Google Workspace integration

Universal:

  • Any other AI assistant (Claude, etc.)
  • Maximum compatibility needed
  • Simple markdown preferred
  • Custom AI tools

Content Optimization Tips​

  1. Select specific pages - Don't export entire site, focus on relevant pages
  2. Combine with questions - After pasting, ask specific questions
  3. Reference multiple pages - Export 2-3 related pages for complete context
  4. Update regularly - Re-export when documentation is updated
  5. Use with code - Combine documentation export with code snippets

Limitations​

1. Content Extraction​

  • May not perfectly preserve all MDX components
  • Complex nested structures might simplify
  • Dynamic content is not captured
  • Images are referenced by URL (not embedded)

2. Length Limits​

  • Some AI platforms have context length limits
  • Long pages may need to be split
  • Code blocks count toward token limits
  • Consider exporting specific sections for very long docs

3. Platform Variations​

  • Each AI platform interprets markdown differently
  • Some formatting may not translate perfectly
  • Links may need to be manually clicked
  • Tables might render differently

Troubleshooting​

Button Not Appearing​

Issue: Prompt button doesn't show on page

Solutions:

  1. Check DocItem wrapper includes PromptButton import
  2. Verify component files are in correct location
  3. Clear browser cache and restart dev server
  4. Check browser console for errors

Copy Not Working​

Issue: Nothing copied to clipboard when clicking

Solutions:

  1. Check browser supports Clipboard API (modern browsers only)
  2. Try HTTPS (required for clipboard access)
  3. Check browser console for permission errors
  4. Test in different browser

Formatting Issues​

Issue: Output format doesn't look right in AI

Solutions:

  1. Try a different platform format
  2. Check if AI platform has markdown rendering issues
  3. Use Universal format for clean markdown
  4. Manually adjust formatting after paste

Missing Metadata​

Issue: Tool costs or categories not appearing

Solutions:

  1. Verify frontmatter in source tool doc
  2. Check metadata extraction in component
  3. Test on page with known good metadata
  4. Review page context in browser DevTools

Future Enhancements​

Potential improvements for this feature:

  1. Image Embedding - Include base64-encoded images in prompt
  2. Section Selection - Allow user to select specific sections to export
  3. History - Save recent prompts for quick re-export
  4. Custom Templates - User-defined prompt templates
  5. Batch Export - Export multiple related pages at once
  6. AI Response Integration - Paste AI response back into docs
  7. Prompt Library - Pre-built prompts for common tasks
  8. Version Comparison - Export diffs between versions

Contributing​

Found a way to improve the formatters? Have a new platform to add?

  1. Modify formatters.ts with your changes
  2. Test thoroughly with real AI platforms
  3. Update this documentation
  4. Share with the team for feedback

Status: ✅ Production-ready
Last Updated: 2026-01-07
Tested With: Cursor AI, ChatGPT 4, Google Gemini
Browser Support: All modern browsers with Clipboard API