Developers

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'));