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: Copy and paste the component into your Framer project 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. Choose between Split Button or Dropdown Only mode in the Button Mode control Customize dropdown menu items by reordering or adding dividers in the Menu Items control Configure copy behavior (exclude frames, and even you can remove headers/footers) in Copy Settings Set up AI prompts and your GitHub URL(optional) in their respective settings Style the button, dropdown, and menu items using the comprehensive styling controls Preview the dropdown styling on canvas using the Canvas Preview toggle 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 Copy Page for LLM Framer Controllers 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 heysoyebali@gmail.com . I’m here to help.

Share pages with AI in one click