Copy-paste prompt · Next.js # Add image paste to your Next.js app in one prompt GitHub lets you paste a screenshot into a comment and get a hosted link. Give your Next.js app the same superpower — no API route, no upload backend. Copy the prompt below, paste it into your AI coding agent, and it wires it up. Works with `Claude Code``Cursor``Windsurf``Copilot` 1. 1 **Copy the prompt** The one big button below. 2. 2 **Paste it into your agent** In your project — Claude Code, Cursor, etc. 3. 3 **Drop in your key** Set `NEXT_PUBLIC_PIXELVAULT_KEY` in `.env.local`. Done. Prompt for your coding agent Copy prompt Add GitHub-style image paste-and-host to my Next.js app using PixelVault. Context — read this first and use only the documented API: - Overview + API: https://pixelvault.dev/llms.txt - Package: @pixelvault-dev/paste-react (exposes the React hook \`usePaste\`) Do this: 1. Install the package: npm install @pixelvault-dev/paste-react 2. usePaste is a browser hook, so it must run in a Client Component. In the component that holds my main (must be a real <textarea> or <input> — NOT a contenteditable / rich-text editor), make sure the file starts with "use client", then add a ref and wire up usePaste: "use client"; import { useRef } from "react"; import { usePaste } from "@pixelvault-dev/paste-react"; const ref = useRef<HTMLTextAreaElement>(null); const { openFilePicker } = usePaste(ref, { publishableKey: process.env.NEXT\_PUBLIC\_PIXELVAULT\_KEY!, }); // <textarea ref={ref} /> // optional upload button: <button type="button" onClick={openFilePicker}>Upload image</button> 3. Put my publishable key in .env.local as NEXT\_PUBLIC\_PIXELVAULT\_KEY (it's a pv\_pub\_ key, safe to expose to the browser). Result: pasting or dropping an image into that textarea uploads it to PixelVault and inserts markdown !\[name\](https://img.pixelvault.dev/…) into the field. Rules: - The component using usePaste MUST be a Client Component ("use client"). - Stick to the documented usePaste(ref, options) API — do NOT invent options, endpoints, or other packages. - If my editor is contenteditable (TipTap, ProseMirror, Lexical, Quill), STOP and tell me — usePaste only attaches to a real textarea/input. - Keep the change minimal and match my existing component's style. ## What the agent will do - Install one package — `@pixelvault-dev/paste-react` - Mark the editor component `"use client"` and add `usePaste` - Read the key from `NEXT_PUBLIC_PIXELVAULT_KEY` — no backend route - Nothing else in your app gets touched ## Grab your free key The one thing the agent can't generate is your **publishable key** (`pv_pub_…`) — it's origin-scoped and upload-only, safe to ship in browser code. Create one, add your app's origin, and paste it in. [Get your free key →](/signup) Free tier: 200 MB storage, 500 uploads/mo, 1 GB bandwidth. No card. ## Prefer to wire it up yourself? `usePaste` is a browser hook, so the editor lives in a Client Component. Add `@pixelvault-dev/paste-react`, mark the file `"use client"`, and call the hook with a ref: ``` "use client"; import { useRef } from "react"; import { usePaste } from "@pixelvault-dev/paste-react"; export default function CommentBox() { const ref = useRef<HTMLTextAreaElement>(null); const { openFilePicker } = usePaste(ref, { publishableKey: process.env.NEXT_PUBLIC_PIXELVAULT_KEY!, }); return ( <> <textarea ref={ref} placeholder="Paste or drop an image…" /> <button type="button" onClick={openFilePicker}>Upload image</button> </> ); } ``` Then add `NEXT_PUBLIC_PIXELVAULT_KEY=pv_pub_xxxx` to `.env.local`. Not on Next.js? There's a [plain React prompt](/prompts/react-image-paste), a [Vue prompt](/prompts/vue-image-paste), and the [full options reference](/docs#paste). ## Why a prompt instead of docs? Because you were going to tell your coding agent "add image paste" and hope it guessed our API. This prompt points the agent at [`pixelvault.dev/llms.txt`](/llms.txt) and the exact hook signature — plus the Next.js `"use client"` gotcha — so it generates correct, current code the first time. Copy, paste, ship. ## FAQ How do I add image paste to a Next.js app? Copy the prompt above into your AI coding agent. It installs `@pixelvault-dev/paste-react` and wires the `usePaste` hook to your textarea inside a Client Component, reading the key from `NEXT_PUBLIC_PIXELVAULT_KEY`. Pasted images upload to PixelVault and insert a hosted markdown URL. Does this need a Next.js API route or server code? No. Uploads go straight from the browser to PixelVault with an origin-scoped, upload-only publishable key. `usePaste` runs in a Client Component; there's no API route to write. Is the NEXT\_PUBLIC\_ publishable key safe to expose? Yes. A `pv_pub_` key can only upload (never list, read, or delete) and only from the origins you allowlist, so it's designed to ship in browser code — exactly what `NEXT_PUBLIC_` variables do.