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 CodeCursorWindsurfCopilot

1
Copy the prompt
The one big button below.
2
Paste it into your agent
In your project — Claude Code, Cursor, etc.
3
Drop in your key
Set NEXT_PUBLIC_PIXELVAULT_KEY in .env.local. Done.

Prompt for your coding agent

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 <textarea> (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 →

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, a Vue prompt, and the full options reference.

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 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.