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