The video uses a specific AI coding tool to demonstrate the setup, but the configuration works 1:1 with Cursor, Claude Code, or any other tool. Despia is web framework and tooling agnostic, so the only thing that matters is the SDK call and reading .clipboarddata from the result.
getclipboard:// returns the current text contents of the device clipboard. The runtime uses the native Pasteboard API on iOS and the Clipboard Service on Android, so the read goes through the same path as a manual paste, and triggers the same OS-level transparency banner (“MyApp pasted from Notes”) on iOS 14 and later.
iOS shows a small banner at the top of the screen the first time your app reads from the clipboard in a session. This is a system behavior, not configurable from Despia. Only call getclipboard:// in response to a clear user action like a “Paste” button tap, never on app launch or in the background, otherwise the banner will appear unexpectedly and look invasive.
Installation
npm install despia-native
import despia from 'despia-native';
<script src="https://cdn.jsdelivr.net/npm/despia-native/index.min.js"></script>
How it works
getclipboard:// is async. Await the call and read the text from the clipboarddata key on the returned object.
import despia from 'despia-native'
const isDespia = navigator.userAgent.toLowerCase().includes('despia')
async function readClipboard() {
if (!isDespia) return null
const result = await despia('getclipboard://', ['clipboarddata'])
return result.clipboarddata
}
The natural pattern is a “Paste” button next to an input. Tap it, the clipboard content fills the field, the user reviews and submits.
import { useState } from 'react'
import despia from 'despia-native'
const isDespia = navigator.userAgent.toLowerCase().includes('despia')
function CouponInput() {
const [code, setCode] = useState('')
async function pasteFromClipboard() {
if (!isDespia) {
// browser fallback, see below
return
}
const result = await despia('getclipboard://', ['clipboarddata'])
if (result.clipboarddata) {
setCode(result.clipboarddata.trim())
}
}
return (
<div>
<input
value={code}
onChange={e => setCode(e.target.value)}
placeholder="Coupon code"
/>
<button onClick={pasteFromClipboard}>Paste</button>
</div>
)
}
.trim() is worth doing reflexively. People copy text with leading or trailing whitespace constantly (especially from email signatures, code blocks, and chat apps), and most validation regexes do not account for it.
Detect and validate before pasting
For codes with a known shape (referral codes, coupons, OAuth one-time tokens) you can sniff the clipboard on app focus and offer a one-tap paste banner if the contents look right. This is gentler than always reading on launch, since the banner only appears when the clipboard probably contains something the user wanted to paste.
async function checkClipboardForCode() {
if (!isDespia) return null
const result = await despia('getclipboard://', ['clipboarddata'])
const text = (result.clipboarddata || '').trim()
// example shape: 8-character alphanumeric coupon
if (/^[A-Z0-9]{8}$/.test(text)) {
return text
}
return null
}
Browser fallback
In a regular browser the SDK call is a no-op behind the isDespia guard. Fall back to the standard Clipboard API for web users.
async function readClipboardEverywhere() {
if (isDespia) {
const result = await despia('getclipboard://', ['clipboarddata'])
return result.clipboarddata || ''
}
if (navigator.clipboard?.readText) {
try {
return await navigator.clipboard.readText()
} catch {
// user denied permission or browser blocked the read
return ''
}
}
return ''
}
Resources
