Next.js Integration

npm install @truthmark/sdk

import { TruthMarkClient } from '@truthmark/sdk';
import { NextRequest } from 'next/server';

const client = new TruthMarkClient({
  baseUrl: process.env.TRUTHMARK_API_URL || 'http://localhost:8000'
});

export async function POST(request: NextRequest) {
  try {
    const formData = await request.formData();
    const file = formData.get('file') as File;
    const message = formData.get('message') as string;

    if (!file || !message) {
      return Response.json(
        { error: 'Missing file or message' },
        { status: 400 }
      );
    }

    const result = await client.encode(file, message);
    return Response.json(result);
  } catch (error) {
    return Response.json(
      { error: 'Failed to watermark image' },
      { status: 500 }
    );
  }
}

'use client';

import { useState } from 'react';

export default function WatermarkUploader() {
  const [file, setFile] = useState<File | null>(null);
  const [message, setMessage] = useState('');
  const [loading, setLoading] = useState(false);
  const [result, setResult] = useState<any>(null);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!file) return;

    setLoading(true);
    const formData = new FormData();
    formData.append('file', file);
    formData.append('message', message);

    try {
      const response = await fetch('/api/watermark', {
        method: 'POST',
        body: formData,
      });
      const data = await response.json();
      setResult(data);
    } catch (error) {
      console.error('Error:', error);
    } finally {
      setLoading(false);
    }
  };

  return (
    <form onSubmit={handleSubmit} className="space-y-4">
      <input
        type="file"
        accept="image/*"
        onChange={(e) => setFile(e.target.files?.[0] || null)}
        className="block w-full"
      />
      <input
        type="text"
        value={message}
        onChange={(e) => setMessage(e.target.value)}
        placeholder="Enter watermark message"
        className="block w-full p-2 rounded"
      />
      <button
        type="submit"
        disabled={loading || !file}
        className="bg-purple-600 text-white px-6 py-2 rounded"
      >
        {loading ? 'Processing...' : 'Watermark Image'}
      </button>
      
      {result && (
        <a
          href={result.download_url}
          target="_blank"
          className="block text-purple-400"
        >
          Download Watermarked Image
        </a>
      )}
    </form>
  );
}

import WatermarkUploader from '@/components/WatermarkUploader';

export default function Page() {
  return (
    <div>
      <h1>Watermark Your Images</h1>
      <WatermarkUploader />
    </div>
  );
}

TRUTHMARK_API_URL=https://api.truthmark.com
TRUTHMARK_API_KEY=your_api_key_here  # Optional for paid plans