para-sdk-setup

by @getpara in Web & API

# Install this skill:

npx skills add getpara/ai-tooling --skill "para-sdk-setup"

Install specific skill from multi-skill repository

# Description

Set up Para SDK in a web or server application

# SKILL.md

name: para-sdk-setup
description: Set up Para SDK in a web or server application

Para SDK Setup

Set up Para SDK in a web or server application. This skill handles framework detection, package installation, provider/client configuration, and diagnostic checks.

Framework Detection

Identify the project type to determine the correct SDK package and setup:

Signal	Framework	SDK Package
`next.config.*` exists	Next.js	`@getpara/react-sdk`
`package.json` has `react` + `vite`	React + Vite	`@getpara/react-sdk`
`package.json` has `vue`	Vue	`@getpara/web-sdk`
`package.json` has `svelte`	Svelte	`@getpara/web-sdk`
`package.json` has `express` or `fastify` (no `react`)	Node.js server	`@getpara/server-sdk`
`app.json` or `expo` in `package.json`	Expo / React Native	`@getpara/react-native-wallet`
None of the above	Vanilla JS	`@getpara/web-sdk`

Wagmi/RainbowKit/Graz Detection

If the project already uses a connector ecosystem, use the lighter SDK:

Signal	Use Instead
`wagmi` in dependencies	`@getpara/react-sdk-lite` + `@getpara/wagmi-v2-integration`
`@rainbow-me/rainbowkit` in dependencies	`@getpara/react-sdk-lite` + `@getpara/rainbowkit-wallet`
`graz` in dependencies	`@getpara/react-sdk-lite` + `@getpara/graz-integration`

Package Installation

React / Next.js

npm install @getpara/react-sdk @tanstack/react-query

With a signing library (pick one):

# Viem
npm install @getpara/viem-v2-integration viem

# Ethers v6
npm install @getpara/ethers-v6-integration ethers

# Solana
npm install @getpara/solana-web3.js-v1-integration @solana/web3.js

# CosmJS
npm install @getpara/cosmjs-v0-integration @cosmjs/stargate @cosmjs/proto-signing

Next.js Post-Install

Add to package.json:

{
  "scripts": {
    "postinstall": "npx setup-para"
  }
}

Then run npm install again. This configures webpack for Para's WASM and worker files.

Vue / Svelte (Vite)

npm install @getpara/web-sdk
npm install -D vite-plugin-node-polyfills

Node.js / Bun / Deno Server

npm install @getpara/server-sdk

React Native / Expo

npx expo install @getpara/react-native-wallet \
  @craftzdog/react-native-buffer \
  @peculiar/webcrypto \
  @react-native-async-storage/async-storage \
  react-native-keychain \
  react-native-modpow \
  react-native-passkey \
  react-native-quick-base64 \
  react-native-quick-crypto \
  react-native-worklets \
  readable-stream

Wagmi Connector

npm install @getpara/react-sdk-lite @getpara/wagmi-v2-integration wagmi viem @tanstack/react-query

RainbowKit

npm install @getpara/react-sdk-lite @getpara/rainbowkit-wallet @rainbow-me/rainbowkit wagmi viem @tanstack/react-query

Provider / Client Setup

React / Next.js -- ParaProvider

Create src/components/ParaProvider.tsx:

"use client";

import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { Environment, ParaProvider as ParaSDKProvider } from "@getpara/react-sdk";
import "@getpara/react-sdk/styles.css";

const API_KEY = process.env.NEXT_PUBLIC_PARA_API_KEY ?? "";
const ENVIRONMENT = (process.env.NEXT_PUBLIC_PARA_ENVIRONMENT as Environment) || Environment.BETA;

if (!API_KEY) {
  throw new Error("API key is not defined. Please set NEXT_PUBLIC_PARA_API_KEY in your environment variables.");
}

const queryClient = new QueryClient();

export function ParaProvider({ children }: { children: React.ReactNode }) {
  return (
    <QueryClientProvider client={queryClient}>
      <ParaSDKProvider
        paraClientConfig={{ apiKey: API_KEY, env: ENVIRONMENT }}
        config={{ appName: "My App" }}
        paraModalConfig={{
          disableEmailLogin: false,
          disablePhoneLogin: false,
          authLayout: ["AUTH:FULL", "EXTERNAL:FULL"],
          oAuthMethods: ["GOOGLE", "APPLE"],
        }}>
        {children}
      </ParaSDKProvider>
    </QueryClientProvider>
  );
}

Wrap in app/layout.tsx:

import { ParaProvider } from "@/components/ParaProvider";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <ParaProvider>{children}</ParaProvider>
      </body>
    </html>
  );
}

Vue / Svelte -- ParaWeb (imperative)

Create src/lib/para.ts:

import { Environment, ParaWeb } from "@getpara/web-sdk";

const API_KEY = import.meta.env.VITE_PARA_API_KEY;
const ENVIRONMENT = (import.meta.env.VITE_PARA_ENVIRONMENT as Environment) || Environment.BETA;

if (!API_KEY) {
  throw new Error("API key is not defined. Please set VITE_PARA_API_KEY in your environment variables.");
}

export const para = new ParaWeb(ENVIRONMENT, API_KEY);

Add Vite polyfills in vite.config.ts:

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue"; // or svelte()
import { nodePolyfills } from "vite-plugin-node-polyfills";

export default defineConfig({
  plugins: [vue(), nodePolyfills()],
});

Server -- ParaServer

import { Para as ParaServer, Environment } from "@getpara/server-sdk";

const PARA_API_KEY = process.env.PARA_API_KEY;
const PARA_ENVIRONMENT = (process.env.PARA_ENVIRONMENT as Environment) || Environment.BETA;

if (!PARA_API_KEY) {
  throw new Error("PARA_API_KEY environment variable is required.");
}

const para = new ParaServer(PARA_ENVIRONMENT, PARA_API_KEY);

React Native / Expo -- ParaMobile

import ParaMobile, { Environment } from "@getpara/react-native-wallet";

const para = new ParaMobile(
  Environment.BETA,
  process.env.EXPO_PUBLIC_PARA_API_KEY,
  undefined,
  { disableWorkers: true } // Required -- Web Workers are not available in React Native
);

Metro config (metro.config.js):

const { getDefaultConfig } = require("expo/metro-config");
const config = getDefaultConfig(__dirname);

config.resolver.extraNodeModules = {
  crypto: require.resolve("react-native-quick-crypto"),
  buffer: require.resolve("@craftzdog/react-native-buffer"),
};

module.exports = config;

Babel config (babel.config.js):

module.exports = function (api) {
  api.cache(true);
  return {
    presets: [["babel-preset-expo", { jsxImportSource: "nativewind" }], "nativewind/babel"],
    plugins: ["react-native-worklets/plugin"],
  };
};

Environment Variable Patterns

Required Variables

# Pick the appropriate prefix for your framework
NEXT_PUBLIC_PARA_API_KEY=your_api_key        # Next.js (client)
NEXT_PUBLIC_PARA_ENVIRONMENT=BETA            # Next.js (client)
VITE_PARA_API_KEY=your_api_key               # Vite (Vue/Svelte)
VITE_PARA_ENVIRONMENT=BETA                   # Vite (Vue/Svelte)
EXPO_PUBLIC_PARA_API_KEY=your_api_key        # Expo
PARA_API_KEY=your_api_key                    # Server-side (Node.js/Bun/Deno)
PARA_ENVIRONMENT=BETA                        # Server-side

Environment Values

Value	Use For
`BETA`	Development and testing (default)
`PRODUCTION`	Live production deployment

Server-Side Pre-Generation Variables

ENCRYPTION_KEY=a_32_byte_string_exactly_this_l   # Must be exactly 32 bytes

CSS Import Requirements

ParaModal requires its stylesheet. Without it, the modal renders with broken layout.

React / Next.js

// In your ParaProvider component or root layout
import "@getpara/react-sdk/styles.css";

Wagmi / RainbowKit (using react-sdk-lite)

The lite package does not require a separate CSS import -- the connector's modal handles its own styles.

Diagnostic Checks

These are the checks that para doctor performs. Use them to validate a setup:

API key present: Environment variable is set and non-empty
API key valid: Can reach https://api.beta.getpara.com (or production) with the key
Package versions aligned: All @getpara/* packages are the same version
CSS import present: @getpara/react-sdk/styles.css is imported (React projects)
"use client" directive: ParaProvider file starts with "use client" (Next.js)
Vite polyfills: vite-plugin-node-polyfills is installed (Vite projects)
Post-install script: npx setup-para is in postinstall (Next.js projects)
React Query: @tanstack/react-query is installed (React projects)
Workers disabled: { disableWorkers: true } is passed (React Native projects)

Common Setup Errors and Fixes

"Cannot find module '@getpara/react-sdk'"

The package is not installed. Run:

npm install @getpara/react-sdk @tanstack/react-query

"API key is not defined"

The environment variable is missing or not prefixed correctly for the framework:

Next.js client-side: Must use NEXT_PUBLIC_ prefix
Vite: Must use VITE_ prefix
Expo: Must use EXPO_PUBLIC_ prefix

ParaModal renders as blank/unstyled

Missing CSS import. Add to your root layout or ParaProvider:

import "@getpara/react-sdk/styles.css";

"ReferenceError: Buffer is not defined" (Vite)

Missing Node polyfills. Install and configure:

npm install -D vite-plugin-node-polyfills

// vite.config.ts
import { nodePolyfills } from "vite-plugin-node-polyfills";
export default defineConfig({ plugins: [/* your plugin */, nodePolyfills()] });

"Module not found: Can't resolve 'fs'" (Next.js)

Missing npx setup-para postinstall script. Add to package.json:

{ "scripts": { "postinstall": "npx setup-para" } }

Then run npm install.

Version mismatch errors

All @getpara/* packages must be the same version. Check with:

npm ls | grep @getpara

Update all at once:

npm install @getpara/react-sdk@latest @getpara/viem-v2-integration@latest

"useClient must be used within ParaProvider"

The component using Para hooks is not wrapped by ParaProvider. Ensure your root layout wraps children with the provider.

React Native: "crypto is not defined"

Missing metro polyfill config. Add crypto and buffer to metro.config.js extraNodeModules (see React Native setup section above).

# Supported AI Coding Agents

This skill is compatible with the SKILL.md standard and works with all major AI coding agents:

⚡ Amp 🚀 Antigravity 🤖 Claude Code 🦀 Clawdbot 📝 Codex ▶️ Cursor 🤖 Droid 💎 Gemini CLI 🐙 GitHub Copilot 🪿 Goose 📊 Kilo Code 🔧 Kiro CLI 💻 OpenCode 🦘 Roo Code 🌲 Trae 🏄 Windsurf

Learn more about the SKILL.md standard and how to use these skills with your preferred AI coding agent.

para-sdk-setup

# Description

# SKILL.md

Para SDK Setup

Framework Detection

Wagmi/RainbowKit/Graz Detection

Package Installation

React / Next.js

Next.js Post-Install

Vue / Svelte (Vite)

Node.js / Bun / Deno Server

React Native / Expo

Wagmi Connector

RainbowKit

Provider / Client Setup

React / Next.js -- ParaProvider

Vue / Svelte -- ParaWeb (imperative)

Server -- ParaServer

React Native / Expo -- ParaMobile

Environment Variable Patterns

Required Variables

Environment Values

Server-Side Pre-Generation Variables

CSS Import Requirements

React / Next.js

Wagmi / RainbowKit (using react-sdk-lite)

Diagnostic Checks

Common Setup Errors and Fixes

"Cannot find module '@getpara/react-sdk'"

"API key is not defined"

ParaModal renders as blank/unstyled

"ReferenceError: Buffer is not defined" (Vite)

"Module not found: Can't resolve 'fs'" (Next.js)

Version mismatch errors

"useClient must be used within ParaProvider"

React Native: "crypto is not defined"

# Related Skills

# Supported AI Coding Agents

Confirm

Submit a Skill