# Copy Markdown Button for AI Workflow

> One-click copy markdown button for AI workflow integration. Streamline ChatGPT, Claude usage and note-taking.

- URL: https://dantech.academy/en/blog/copy-markdown-button-ai-workflow-nextjs
- Published: 2026-04-05
- Reading time: 1 min
- Tags: nextjs, react, typescript, ai-tools

## Why We Built This

Copying blog content to ChatGPT 10x times a day? There's a better way.

Developers use AI tools daily. Note-taking apps need raw markdown. We needed one-click solution.

## The Solution

```typescript
'use client'

export function CopyRawContent({ rawContent }: { rawContent: string }) {
  const [copied, setCopied] = useState(false)

  const handleCopy = async () => {
    await navigator.clipboard.writeText(rawContent)
    setCopied(true)
    setTimeout(() => setCopied(false), 2000)
  }

  return <button onClick={handleCopy}>{copied ? 'Copied!' : 'Copy Page MD'}</button>
}
```

**Key features:** Visual feedback, Clipboard API, timer cleanup, accessible.

## Use Cases

1. **Code Review** → Copy → ChatGPT → "Review this"
2. **Learning** → Copy → Claude → "Explain simpler"
3. **Knowledge Base** → Copy → Obsidian/Notion

## Try It

Scroll to top, click "Copy Page MD", paste to your AI tool!

---