Skip to main content

TypeScript Client

The TypeScript client client-ts provides libraries for interacting with Nillion blind compute networks. This client is structured as a monorepo containing multiple packages to support different use cases and environments.

Quick Start​

The fastest way to get started with Nillion is using the create-nillion-app cli tool, which spins up a working Next.js app

npx create-nillion-app@latest
Nillion Quickstart DemoNillion Quickstart Demo

For more detailed information on building with create-nillion-app, check out our Quickstart Guide.

Manual Installation​

Install Nillion SDK​

If you have not already, in your shell/terminal run the following command to install the Nillion SDK.

curl https://nilup.nilogy.xyz/install.sh | bash

Then ensure that you can run the nillion-devnet command in a separate terminal. Please refer to the Installation guide for further information.

Install the JavaScript Client​

Install the following packages in your browser application (i.e. React / Nextjs). The Nillion client is composed of three main packages:

  • @nillion/client-wasm: Collection of utility functions exported from Rust to WebAssembly, providing core functionality for the Nillion ecosystem.
  • @nillion/client-vms: Primary gRPC client that combines payments and network operations into a simple API. This package supports both web browsers and Node.js environments.
  • @nillion/client-react-hooks: React hooks built on top of @nillion/client-vms and integrated with @tanstack/react-query for seamless React application development.
npm install @nillion/client-wasm @nillion/client-vms @nillion/client-react-hooks

Usage​

This is the barebones initialization needed to start the NillionProvider. You must be running nillion-devnet in another terminal to be able to interact with this.

The approach we take is to:

  1. Import NillionProvider + createClient
  2. Set the client when mounted with UseEffect
  3. Initialized!

Please note this is based on Next.js so can differ.

// page.tsx

"use client";

import { NillionProvider, createClient } from "@nillion/client-react-hooks";
import type { VmClient } from "@nillion/client-vms";
import { useEffect, useState } from "react";

export default function Home() {
  const [client, setClient] = useState<VmClient>();

  useEffect(() => {
    const init = async () => {
      const client = await createClient("devnet");
      setClient(client);
    };
    void init();
  }, []);

  if (!client) {
    return <div>Loading...</div>;
  }

  return (
    <NillionProvider client={client}>
      ...
    </NillionProvider>
  );
}

Updating our next.config.ts​

We also want to update our next.config.ts to be able to interact with the Nillion WASM client, hence the overrides. So replace your empty config with the following settings.

examples-nextjs/next.config.mjs
loading...

Next Steps​

Now you can interact with the Nillion devnet and use the React hooks to do various storage and compute actions with the network.