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)

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

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>
      <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