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

bun

bun 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, { Proof } 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@v3");
  const prover = blueprint.createProver();

  // Read email file
  const eml = await fs.readFile("residency.EML", "utf-8");
  
  // Generate the proof
  const proof = await prover.generateProof(eml);
  setProof(proof);

  // Verify the proof on chain
  const verification = await blueprint.verifyProofOnChain(proof);

  // Verify the proof off chain
  const verification = await blueprint.verifyProof(proof);

  console.log("Verification:", verification);
}

main();

React (Vite)

Create your component:

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

export default function Home() {
  const [proof, setProof] = useState<Proof | null>(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@v3")

      // Create a prover
      const prover = blueprint.createProver()
      
      // Generate the proof
      const proof = await prover.generateProof(eml);
      setProof(proof);

      // Verify the proof on chain
      const verification = await blueprint.verifyProofOnChain(proof);

      // Verify the proof off chain
      const verification = await blueprint.verifyProof(proof);

      console.log("Verification:", verification);
    } 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

Create your component:

'use client'

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

export default function Home() {
  const [proof, setProof] = useState<Proof | null>(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@v3")

      // Create a prover
      const prover = blueprint.createProver()
      
      // Generate the proof
      const proof = await prover.generateProof(eml);
      setProof(proof);

      // Verify the proof on chain
      const verification = await blueprint.verifyProofOnChain(proof);

      // Verify the proof off chain
      const verification = await blueprint.verifyProof(proof);

      console.log("Verification:", verification);
    } 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>
  )
}

Repository Templates

We have provided a GitHub repo with working examples from this guide, showcasing different implementations, including Node.js, Next.js, Vite with Vanilla JS, and Deno.

These templates help you get started quickly with the Blueprint SDK.

Templates Repository