<!-- Markdown twin of https://pixelvault.dev/prompts/react-image-paste -->

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 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**
    
    Swap `pv_pub_REPLACE_ME` for a free key. Done.
    

Prompt for your coding agent Copy prompt

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 →](/signup)

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](/prompts/vue-image-paste), a [plain-HTML / script-tag prompt](/prompts/html-image-paste), and the full [options reference in the docs](/docs#paste).

## 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`](/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.