Example Integrations
Copy-paste these examples to integrate OP Protocol into your Node CLI, React app, or Express server.
Node CLI
Verify a file from the command line. Pipe results to stdout as JSON.
verify-cli.ts
#!/usr/bin/env npx tsx
import { createClient } from '@op-protocol/sdk';
import { readFileSync } from 'fs';
const [,, filePath, apiKey] = process.argv;
if (!filePath) {
console.error('Usage: verify-cli <file> [api-key]');
process.exit(1);
}
const op = createClient({
baseUrl: 'https://originalpictures.cc',
apiKey
});
const buffer = readFileSync(filePath);
const ext = filePath.split('.').pop() || 'jpg';
const mime = { jpg: 'image/jpeg', jpeg: 'image/jpeg', png: 'image/png', webp: 'image/webp' }[ext] || 'application/octet-stream';
const blob = new Blob([buffer], { type: mime });
const result = await op.verifyMedia(blob);
console.log(JSON.stringify({
file: filePath,
tier: result.trust.tier,
confidence: result.trust.confidence,
label: result.trust.label,
verifyId: result.verifyId
}, null, 2));React Upload + Verify
A drop-in React component for uploading and verifying images with a trust badge.
VerifyUpload.tsx
import { useState } from 'react';
import { createClient } from '@op-protocol/sdk';
const op = createClient({ baseUrl: 'https://originalpictures.cc' });
export function VerifyUpload() {
const [result, setResult] = useState<any>(null);
const [loading, setLoading] = useState(false);
const handleFile = async (e: React.ChangeEvent<HTMLInputElement>) => {
const file = e.target.files?.[0];
if (!file) return;
setLoading(true);
try {
const res = await op.verifyMedia(file);
setResult(res);
} catch (err) {
console.error(err);
}
setLoading(false);
};
return (
<div style={{ padding: 24, maxWidth: 400, fontFamily: 'system-ui' }}>
<h2>Verify Image Authenticity</h2>
<input type="file" accept="image/*" onChange={handleFile} />
{loading && <p>Verifying...</p>}
{result && (
<div style={{ marginTop: 16, padding: 16, border: '1px solid #ddd', borderRadius: 8 }}>
<p><strong>Trust:</strong> {result.trust.label}</p>
<p><strong>Tier:</strong> {result.trust.tier}</p>
<p><strong>Confidence:</strong> {result.trust.confidence}</p>
<img
src={op.getBadgeUrl(result.verifyId, { format: 'svg', theme: 'light' })}
alt="Trust Badge"
style={{ marginTop: 8 }}
/>
</div>
)}
</div>
);
}Express Middleware
Automatically verify uploaded images server-side before accepting them.
verify-middleware.ts
import express from 'express';
import multer from 'multer';
import { createClient, OpError } from '@op-protocol/sdk';
const app = express();
const upload = multer({ limits: { fileSize: 50 * 1024 * 1024 } });
const op = createClient({
baseUrl: 'https://originalpictures.cc',
apiKey: process.env.OP_API_KEY
});
function requireVerified(minTier = 'signed') {
const tierOrder = ['broken', 'unsigned', 'unknown', 'recovered', 'signed', 'verified'];
return async (req: express.Request, res: express.Response, next: express.NextFunction) => {
if (!req.file) return res.status(400).json({ error: 'No file uploaded' });
try {
const blob = new Blob([req.file.buffer], { type: req.file.mimetype });
const result = await op.verifyMedia(blob);
const fileTier = tierOrder.indexOf(result.trust.tier);
const required = tierOrder.indexOf(minTier);
if (fileTier < required) {
return res.status(422).json({
error: 'Insufficient provenance',
trust: result.trust
});
}
(req as any).verification = result;
next();
} catch (err) {
if (err instanceof OpError) {
return res.status(err.statusCode).json({ error: err.message });
}
return res.status(500).json({ error: 'Verification failed' });
}
};
}
app.post('/upload', upload.single('image'), requireVerified('signed'), (req, res) => {
const verification = (req as any).verification;
res.json({
message: 'Image accepted',
trust: verification.trust,
verifyId: verification.verifyId
});
});
app.listen(3001, () => console.log('Server on :3001'));