Packages

StackNet provides a set of npm packages for integrating authentication, key management, and content storage into your Stack’s frontend.

@stacknet/userutils

npm

Authentication, session management, and billing for StackNet apps. Provides Google, Telegram, X, Discord and Web3 wallet login (Solana, Ethereum), cross-domain SSO via auth bridge, and billing/subscription hooks.

Key exports

Export	Description
`UserUtilsProvider`	React context provider, wrap your app with this
`ConnectWidget`	Drop-in wallet connect UI (Phantom, MetaMask)
`useSession`	Read public session state (userId, address, expiresAt)
`useWeb3Wallet`	Wallet connection state and provider detection
`useStackAuth`	Full auth flow (challenge, sign, verify)
`useAuthBridge`	Cross-domain SSO via postMessage
`usePlans`	List available billing plans
`useSubscription`	Current subscription state
`useUsage`	Token usage summary
`useBillingHistory`	Past billing records
`usePrepaidCheckout`	Credit purchase flow

Quick start


import { UserUtilsProvider, ConnectWidget } from '@stacknet/userutils/components'
import { useSession } from '@stacknet/userutils/hooks'
 
function App() {
  return (
    <UserUtilsProvider config={{
      apiBaseUrl: 'https://stacknet.magma-rpc.com',
      stackId: 'your_stack_id',
      theme: 'dark',
    }}>
      <MyApp />
    </UserUtilsProvider>
  )
}
 
function MyApp() {
  const { session, isAuthenticated } = useSession()
 
  if (!isAuthenticated) return <ConnectWidget config={config} />
  return <p>Connected: {session.address}</p>
}

@stacknet/x402payg

npm

Pay-as-you-go payments: turn a Solana payment into a permissionless API key with token credit to use on StackNet. No account is needed, no signup, or card. Mainnet-only. Supports SOL, USDC, and PAPER.

Key exports

Export	Description
`X402PaygClient`	The client: mint, list, pick, recover, revoke keys
`createKey`	Pay → on-chain proof → derive `pg_` key, in one call
`buildTopup`	Build the payment+proof transaction without sending
`listKeys` / `getActiveKeys` / `pickKey`	Wallet-signed key listing and selection
`deriveApiKeyFor`	Re-derive a lost key by re-signing (deterministic — keys are never stored)
`revokeKey`	Kill switch for a leaked key
`walletFromKeypair`	Wrap a raw `Keypair` for server/CLI use

Quick start


import { X402PaygClient } from '@stacknet/x402payg'
 
const client = new X402PaygClient({ stacknetBaseUrl: 'https://stacknet.magma-rpc.com' })
 
const { apiKey } = await client.createKey(wallet, {
  amount: 5_000_000n,   // 5 USDC → $5 → 5,000,000 tokens
  mint: 'USDC',
  stackId: 'STACK_ID',
})
 
// pg_ key works as a Bearer token on every StackNet endpoint
await fetch('https://stacknet.magma-rpc.com/v1/chat/completions', {
  method: 'POST',
  headers: { authorization: `Bearer ${apiKey}`, 'content-type': 'application/json' },
  body: JSON.stringify({ model: 'magma', messages: [{ role: 'user', content: 'hi' }] }),
})

@stacknet/keyutils

npm

Node Key management, purchase, transfer, and marketplace operations. Handles Solana Pay transactions, device fingerprinting, and peer-to-peer key transfers.

Key exports

Export	Description
`TransferPanel`	UI for peer-to-peer key transfers (gifting)
`useTransferKey`	Hook to initiate key transfers
`SolanaPayButton`	Payment button with dual-transfer pattern

Features

Atomic transfers: peer-to-peer key gifting
Solana Pay: solana based transfers
Device fingerprinting: anti-fraud velocity checks
Marketplace: buy/sell keys on the secondary market

Quick start


import { TransferPanel } from '@stacknet/keyutils'
 
function KeyManager({ keyId }: { keyId: string }) {
  return (
    <TransferPanel
      keyId={keyId}
      onSuccess={(txId) => console.log('Transferred:', txId)}
    />
  )
}

@stacknet/rackutils

npm

React hooks and components for StackNet Racks, the IPFS-backed version control system for skills, tensors, and AI artifacts.

Key exports

Hooks (13):

Hook	Description
`useRackClient`	Core API client (17 methods)
`useRackSession`	API key auth, login/logout, budget tracking
`useRepos`	List repos
`usePaginatedRepos`	Cursor-based infinite scroll
`useRepoTree`	File tree navigation
`useRepoPush`	Push files to a repo
`useRackRegister`	Register skills and tensors
`useSkillStats`	Skill metadata and usage counts
`useTensorStats`	Tensor metadata and size
`useNetworkStats`	Network-wide statistics
`useTrending`	Trending repos
`useStar`	Star/unstar repos

Components (3):

Component	Description
`RackBrowser`	Full repo browser with file tree, skill upload
`Markdown`	Lightweight markdown renderer
`StarButton`	Star/unstar toggle with count

Quick start


import { useRackSession, useRepos } from '@stacknet/rackutils'
 
function RackExplorer() {
  const { session, login } = useRackSession()
  const { repos, loading } = useRepos()
 
  if (!session) return <button onClick={() => login('gk_your_key')}>Connect</button>
 
  return (
    <ul>
      {repos.map(repo => (
        <li key={repo.id}>{repo.name}</li>
      ))}
    </ul>
  )
}

Cost estimation


import { estimateCost } from '@stacknet/rackutils'
 
// Skills: (100 + ceil(bytes/4)) × 1000 tokens
estimateCost('skill', 4096) // → 1,124,000 tokens
 
// Tensors: (100 + ceil(MB)) × 1000 tokens
estimateCost('tensor', 50_000_000) // → 148,000 tokens