Getting Started

Get up and running with ComputeKit in just a few minutes.

Table of contents

Getting Started

Installation

Core Package

npm install @computekit/core

With React Bindings

npm install @computekit/core @computekit/react

With React Query Integration

npm install @computekit/core @computekit/react-query @tanstack/react-query

Basic Usage

Vanilla JavaScript/TypeScript

import { ComputeKit } from '@computekit/core';

// Create an instance
const kit = new ComputeKit();

// Register compute functions
kit.register('fibonacci', (n: number) => {
  if (n <= 1) return n;
  let a = 0,
    b = 1;
  for (let i = 2; i <= n; i++) {
    [a, b] = [b, a + b];
  }
  return b;
});

kit.register('sum', (arr: number[]) => {
  return arr.reduce((a, b) => a + b, 0);
});

// Run computations (non-blocking!)
const fib = await kit.run('fibonacci', 50);
console.log(fib); // 12586269025

const total = await kit.run('sum', [1, 2, 3, 4, 5]);
console.log(total); // 15

React

import { ComputeKitProvider, useComputeKit, useCompute } from '@computekit/react';
import { useEffect } from 'react';

// Wrap your app
function App() {
  return (
    <ComputeKitProvider>
      <MyApp />
    </ComputeKitProvider>
  );
}

// Register functions once
function MyApp() {
  const kit = useComputeKit();

  useEffect(() => {
    kit.register('fibonacci', (n: number) => {
      if (n <= 1) return n;
      let a = 0,
        b = 1;
      for (let i = 2; i <= n; i++) {
        [a, b] = [b, a + b];
      }
      return b;
    });
  }, [kit]);

  return <Calculator />;
}

// Use in components
function Calculator() {
  const { data, loading, error, run } = useCompute<number, number>('fibonacci');

  return (
    <div>
      <button onClick={() => run(50)} disabled={loading}>
        {loading ? 'Computing...' : 'Calculate'}
      </button>
      {data && <p>Result: {data}</p>}
      {error && <p>Error: {error.message}</p>}
    </div>
  );
}

Configuration Options

const kit = new ComputeKit({
  // Maximum number of workers in the pool
  maxWorkers: navigator.hardwareConcurrency || 4,

  // Default timeout for operations (ms)
  timeout: 30000,

  // Enable debug logging
  debug: false,

  // Custom worker script path
  workerPath: '',

  // Use SharedArrayBuffer when available
  useSharedMemory: true,

  // External scripts to load in workers
  remoteDependencies: [
    'https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js',
  ],
});

Vite/Webpack Configuration

For SharedArrayBuffer support, you need to add COOP/COEP headers:

Vite

// vite.config.ts
export default {
  server: {
    headers: {
      'Cross-Origin-Opener-Policy': 'same-origin',
      'Cross-Origin-Embedder-Policy': 'require-corp',
    },
  },
};

Webpack (Next.js)

// next.config.js
module.exports = {
  async headers() {
    return [
      {
        source: '/(.*)',
        headers: [
          { key: 'Cross-Origin-Opener-Policy', value: 'same-origin' },
          { key: 'Cross-Origin-Embedder-Policy', value: 'require-corp' },
        ],
      },
    ];
  },
};

Next Steps

Learn about React Hooks for the full React experience
Read the Debugging Guide for troubleshooting tips
Understand Performance & Data Transfer to optimize payloads
Check the API Reference for all available methods
Explore WASM integration for maximum performance
See Examples for real-world use cases