Setup

The Blueprint SDK provides a simple way to generate and verify zero-knowledge proofs from emails.

Installation

To get started with the SDK, the first step is to install it using your preferred package manager:

npm

npm install @zk-email/sdk

pnpm

pnpm add @zk-email/sdk

yarn

yarn add @zk-email/sdk

Usage

Download Sample Email

You can download a sample email file to test the SDK:

Download residency.eml

Generate Proof

Node.js

import zkeSDK from "@zk-email/sdk";
import fs from "fs/promises";

async function main() {
  const sdk = zkeSDK();
  
  // Get blueprint from the registry
  const blueprint = await sdk.getBlueprint("Bisht13/SuccinctZKResidencyInvite@v1");
  const prover = blueprint.createProver();

  // Read email file
  const eml = await fs.readFile("residency.eml", "utf-8");
  
  // Generate proof
  const proof = await prover.generateProof(eml);
  const { proofData, publicData } = proof.getProofData();
  
  console.log("Proof:", proofData);
  console.log("Public data:", publicData);
}

main();

React (Vite)

1. Configure Vite for WASM support:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import wasm from "vite-plugin-wasm"
import topLevelAwait from "vite-plugin-top-level-await"

export default defineConfig({
  plugins: [react(), wasm(), topLevelAwait()],
  server: {
    headers: {
      'Cross-Origin-Opener-Policy': 'same-origin',
      'Cross-Origin-Embedder-Policy': 'require-corp',
    }
  },
  optimizeDeps: {
    exclude: ['@zk-email/sdk']
  },
  build: {
    target: 'esnext'
  }
})

2. Create your component:

import { useState } from 'react'
import zkeSDK from "@zk-email/sdk"

export default function Home() {
  const [proof, setProof] = useState(null)
  const [loading, setLoading] = useState(false)

  const handleFileUpload = async (event) => {
    const file = event.target.files?.[0]
    if (!file) return

    setLoading(true)
    try {
      // Read the file as text
      const eml = await file.text()

      // Initialize the SDK
      const sdk = zkeSDK()

      // Get the blueprint
      const blueprint = await sdk.getBlueprint("Bisht13/SuccinctZKResidencyInvite@v1")

      // Create a prover
      const prover = blueprint.createProver()
      
      // Generate the proof
      const generatedProof = await prover.generateProof(eml)
      const { proofData, publicData } = generatedProof.getProofData()
      setProof({ proofData, publicData })
    } catch (error) {
      console.error("Error generating proof:", error)
    } finally {
      setLoading(false)
    }
  }

  return (
    <main>
      <div>
        <h1>ZK Email Proof Generator</h1>
        
        <input 
          type="file" 
          accept=".eml"
          onChange={handleFileUpload}
          disabled={loading}
        />
        
        {loading && <p>Generating proof...</p>}
        
        {proof && (
          <div>
            <h3>Proof Generated:</h3>
            <pre>
              {JSON.stringify(proof, null, 2)}
            </pre>
          </div>
        )}
      </div>
    </main>
  )
}

Next.js

1. Configure Next.js:

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  webpack: (config) => {
    config.resolve.fallback = {
      ...config.resolve.fallback,
      fs: false,
    };
    return config;
  },
};

export default nextConfig;

2. Create your component:

'use client'

import { useState } from 'react'
import zkeSDK from "@zk-email/sdk"

export default function Home() {
  const [proof, setProof] = useState<any>(null)
  const [loading, setLoading] = useState(false)

  const handleFileUpload = async (event: React.ChangeEvent<HTMLInputElement>) => {
    const file = event.target.files?.[0]
    if (!file) return

    setLoading(true)
    try {
      // Read the file as text
      const eml = await file.text()

      // Initialize the SDK
      const sdk = zkeSDK()

      // Get the blueprint
      const blueprint = await sdk.getBlueprint("Bisht13/SuccinctZKResidencyInvite@v1")

      // Create a prover
      const prover = blueprint.createProver()
      
      // Generate the proof
      const generatedProof = await prover.generateProof(eml)
      const { proofData, publicData } = generatedProof.getProofData()
      setProof({ proofData, publicData })
    } catch (error) {
      console.error("Error generating proof:", error)
    } finally {
      setLoading(false)
    }
  }

  return (
    <main className="min-h-screen p-8">
      <div className="max-w-2xl mx-auto">
        <h1 className="text-3xl font-bold mb-8">ZK Email Proof Generator</h1>
        
        <input 
          type="file" 
          accept=".eml"
          onChange={handleFileUpload}
          disabled={loading}
          className="mb-4"
        />
        
        {loading && <p className="text-gray-600">Generating proof...</p>}
        
        {proof && (
          <div className="mt-4">
            <h3 className="text-xl font-semibold mb-2">Proof Generated:</h3>
            <pre className="bg-gray-100 p-4 rounded overflow-auto">
              {JSON.stringify(proof, null, 2)}
            </pre>
          </div>
        )}
      </div>
    </main>
  )
}

Repository Templates

We have provided a GitHub template that includes working examples from this guide, including Node.js, React and Next.js implementations.

This templates allows you to get started quickly with the Blueprint SDK.

Templates Repository