Copy-paste prompt · React

Add image paste to your React app in one prompt

GitHub lets you paste a screenshot into a comment and get a hosted link. Give your React app the same superpower — without building an 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
Swap pv_pub_REPLACE_ME for a free key. Done.

Prompt for your coding agent

Add GitHub-style image paste-and-host to my React 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. In the component that holds my main <textarea> (must be a real <textarea>
   or <input> — NOT a contenteditable / rich-text editor), add a ref and wire
   up usePaste exactly like this:

   import { useRef } from "react";
   import { usePaste } from "@pixelvault-dev/paste-react";

   const ref = useRef<HTMLTextAreaElement>(null);
   const { openFilePicker } = usePaste(ref, {
     publishableKey: "pv_pub_REPLACE_ME",
   });

   // <textarea ref={ref} />
   // optional upload button: <button type="button" onClick={openFilePicker}>Upload image</button>

3. Result I want: when I paste or drag-drop an image into that textarea, it
   uploads to PixelVault and inserts markdown ![name](https://img.pixelvault.dev/…)
   into the field — the same flow as pasting a screenshot into a GitHub comment.

Rules:
- Use my publishable key where I wrote pv_pub_REPLACE_ME (I'll paste my own).
- 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
Add a ref + usePaste hook to your textarea component
No backend changes — uploads go straight to PixelVault with your key
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?

The prompt just automates the documented setup. By hand it's a few lines — install @pixelvault-dev/paste-react and call the hook with a ref:

import { useRef } from "react";
import { usePaste } from "@pixelvault-dev/paste-react";

function Editor() {
  const ref = useRef<HTMLTextAreaElement>(null);
  const { openFilePicker } = usePaste(ref, {
    publishableKey: "pv_pub_xxxxxxxx",
  });

  return (
    <>
      <textarea ref={ref} placeholder="Paste or drop an image…" />
      <button type="button" onClick={openFilePicker}>Upload image</button>
    </>
  );
}

Not on React? There's a Vue prompt, a plain-HTML / script-tag prompt, and the full options reference in the docs.

Why a prompt instead of docs?

Because you probably weren't going to read the docs — you were going to tell your coding agent "add image paste" and hope it guessed our API. It won't guess right. This prompt points the agent at pixelvault.dev/llms.txt and the exact hook signature, so it generates correct, current code the first time instead of inventing endpoints that don't exist. Copy, paste, ship.

FAQ

How do I add image paste to a React textarea?

Copy the prompt above into your AI coding agent. It installs @pixelvault-dev/paste-react and wires the usePaste hook to your textarea so pasted or dropped images upload to PixelVault and insert a hosted markdown URL. Then create a free publishable key and swap it in for pv_pub_REPLACE_ME.

Do I need to build an upload backend?

No. Uploads go straight from the browser to PixelVault using an origin-scoped, upload-only publishable key. There's no server code to write and nothing to host yourself.

Which AI coding agents does this work with?

Any of them — Claude Code, Cursor, Windsurf, GitHub Copilot Chat, and similar. The prompt references pixelvault.dev/llms.txt for the live API, so the agent generates correct, current code regardless of which one you use.

Is the publishable key safe to put in browser code?

Yes — that's what it's designed for. A pv_pub_ key can only upload (never list, read, or delete) and only from the origins you allowlist. Keep your origin allowlist tight, and rotate the key if you ever see abuse.