Copy Page for AI — Share pages with AI in one click

If you've browsed GitBook or other popular documentation sites, you've likely seen the option to copy an entire page in Markdown format for LLMs and it's incredibly useful.That's why I recreated this Copy Documentation button for Framer from scratch, with extensive customization options and flexible behavior.All that's left is for you to add it to your documentation site or blog and give your users a faster way to share content with AI tools.

Instructions

Getting Started:

1. Copy and paste the component into your Framer project

2. Place it anywhere on your page (typically in the header or navigation). Note: The parent wrapper (or any ancestor container) must have its overflow set to "visible"; otherwise, the dropdown will not be visible.

3. Choose between Split Button or Dropdown Only mode in the Button Mode control

4. Customize dropdown menu items by reordering or adding dividers in the Menu Items control

5. Configure copy behavior (exclude frames, and even you can remove headers/footers) in Copy Settings

6. Set up AI prompts and your GitHub URL(optional) in their respective settings

7. Style the button, dropdown, and menu items using the comprehensive styling controls

8. Preview the dropdown styling on canvas using the Canvas Preview toggle

9. Now Publish your site and that's it.

This works as a Copy Page Markdown button, a documentation copy button, and a flexible page copy utility for LLM or AI.

How It Works

Properties Control

• Button Mode: Toggle between split button (action + dropdown) or dropdown-only layout

• Main Action: Choose what the primary button does (Copy Page, ChatGPT, Claude, Gemini, etc.) - visible only in split mode

• Button Text: Customize the button label

• Menu Items: Reorder dropdown options and insert dividers for better organization

• Custom Icons: Upload your own icons to replace default SVG logos (ChatGPT, Gemini AI, Claude AI, Perplexity AI, Grok AI, Google AI, etc.)

Copy Settings:

• Exclude specific frames by name (comma-separated)

• Remove header/footer HTML tags

• Include page URL in copied content

• Converts HTML to Markdown for clean content export

• Automatically supports copy to clipboard

AI Settings:

• Custom AI prompt text sent to AI services

• Option to append page URL to prompts

• Open in New Tab: Control link behavior

• GitHub URL: Repository link for the GitHub menu option

Styling Controls:

• Canvas Preview: Show dropdown on canvas for easier styling

• Icon: Configure size and color for all icons

• Button Style: Colors, padding, borders, shadows, spacing

• Dropdown Style: Background, blur, shadow, width modes, alignment

• Item Style: Individual menu item appearance including hover states

• Divider Style: Customize both menu dividers and split button separator

• Font Style: Separate font controls for button text, menu titles, and descriptions

• Animation: Customize transition timing and spring physics

Key Features

Smart Content Conversion:

• AI-Optimized Markdown: Converts HTML to clean structured Markdown for LLMs

• Intelligent Filtering: Exclude headers, footers, or specific frames

• Table Support: Preserves table structure in Markdown

• Code Block Preservation: Keeps formatting for technical content

Dual Layout Modes:

• Split Button: Main action + dropdown toggle

• Dropdown Only: Compact layout with all options inside the menu

Interactive States

• Loading animation with spinner

• Success feedback with checkmark + "Copied!"

• Hover effects, focus states, smooth transitions

AI Service Integration

• Pre-configured: ChatGPT, Claude, Gemini, Perplexity, Grok, Google AI

• Custom prompts per service

• Optional URL injection

• GitHub integration for documentation workflows

User Experience

• Keyboard navigation

• ARIA accessibility support

• Responsive layout

• Canvas preview for styling inside Framer editor

Customization

• 8 property control groups

• 40+ styling options

• Custom icons per AI/LLM

• Flexible dropdown alignment

• Adjustable dropdown width

Use Cases

Documentation Sites

• Let users copy docs into AI tools

• Acts as a familiar documentation copy button

• Works like GitBook-style Copy Page Markdown

Product Pages

• Send product content to ChatGPT for any question related to product

• Use custom AI prompts for comparisons

Blog & Articles

• One-click Copy as MD for summarization

• Supports research workflows with Perplexity or Claude

Educational Content

• Help students copy tutorial's content to AI to ask question related to that.

• Clean Markdown for notes and study tools

Made with ❤️ by Soyeb

Refund Policy: Due to the digital nature of these components, all sales are final, and once delivered they cannot be returned or refunded. Please review product details and demos before purchasing, and feel free to reach out if anything is unclear.

If you have any questions, need a custom Framer component, want clarification, or run into any issues, you can always reach me out at creator.nitso@gmail.com. I’m here to help.