Provider
MPCKitProvider config, the worker factory, and bundler shapes.
"use client";
import { MPCKitProvider } from "@mpckit/react";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
const queryClient = new QueryClient();
export function Providers({ children }: { children: React.ReactNode }) {
return (
<QueryClientProvider client={queryClient}>
<MPCKitProvider
options={{
baseUrl: "https://api.mpckit.xyz",
apiKey: process.env.NEXT_PUBLIC_MPCKIT_API_KEY!,
network: "testnet",
}}
useWorker
workerFactory={() =>
new Worker(
new URL("@mpckit/sdk/worker-impl", import.meta.url),
{ type: "module" },
)
}
>
{children}
</MPCKitProvider>
</QueryClientProvider>
);
}MPCKitProviderProps
Prop
Type
Worker factory by bundler
The workerFactory shape varies by bundler.
workerFactory={() =>
new Worker(
new URL("@mpckit/sdk/worker-impl", import.meta.url),
{ type: "module" },
)
}workerFactory={() =>
new Worker(
new URL("@mpckit/sdk/worker-impl", import.meta.url),
{ type: "module" },
)
}Wrap any code that calls new Worker(...) in a "use client"
component. Next.js needs the worker URL resolution to happen on the
client.
workerFactory={() =>
new Worker(new URL("@mpckit/sdk/worker-impl", import.meta.url))
}When to skip the worker
Server-rendered or build-time signing (e.g. backend route handlers,
build scripts) doesn't need a worker. Drop useWorker and
workerFactory; the inline engine runs on the calling thread.
<MPCKitProvider options={{ baseUrl, apiKey, network: "testnet" }}>
{children}
</MPCKitProvider>For client-only apps doing real-time signing, the worker keeps the UI thread responsive while DKG (a few seconds of WASM math) runs.