Installation & Setup

npm install @spicenet-io/spiceflow-ui

yarn add @spicenet-io/spiceflow-ui

pnpm add @spicenet-io/spiceflow-ui

npm install react react-dom viem wagmi @tanstack/react-query

npm install @privy-io/react-auth

npm install @spicenet-io/spiceflow-ui @spicenet-io/spiceflow-core @privy-io/react-auth react react-dom viem wagmi @tanstack/react-query

<WagmiProvider config={wagmiConfig}>
  <QueryClientProvider client={queryClient}>
    <PrivyProvider appId={PRIVY_APP_ID} config={privyConfig}>
      <SpiceFlowProvider provider="privy" network="mainnet" nativeChainId={8453}>
        {/* Your app components */}
      </SpiceFlowProvider>
    </PrivyProvider>
  </QueryClientProvider>
</WagmiProvider>

import { ProviderLogin } from "@spicenet-io/spiceflow-ui";

function Header() {
  return (
    <div>
      <ProviderLogin />
    </div>
  );
}

import { SpiceAccount } from "@spicenet-io/spiceflow-ui";

export function AccountMenu() {
  return <SpiceAccount />;
}

"use client"; // Add this directive at the top

import { SpiceFlowProvider } from "@spicenet-io/spiceflow-ui";

if (typeof window === 'undefined') {
  return <div>Loading...</div>;
}

NEXT_PUBLIC_PRIVY_APP_ID=your_privy_app_id

<PrivyProvider appId={process.env.NEXT_PUBLIC_PRIVY_APP_ID}>