onflow/flow-ai-tools/flow-react-sdk

Flow React SDK

Build React apps on Flow with TypeScript-first hooks and components. Built on TanStack Query for automatic caching, retries, and background updates.

Quick Start

npm install @onflow/react-sdk

import { FlowProvider, Connect, useFlowQuery } from '@onflow/react-sdk';
function App() {
  return (
    <FlowProvider config={{ accessNodeUrl: 'https://access-mainnet.onflow.org', flowNetwork: 'mainnet' }}>
      <Connect />
      <MyComponent />
    </FlowProvider>
  );
}

Navigation Map

Companion Skills

• `cadence-lang` — Consult when writing Cadence scripts/transactions used in useFlowQuery and useFlowMutate. The Cadence code passed to hooks must follow all language rules (access control, entitlements, resource handling).
• `flow-project-setup` — Consult for flow.json configuration that FlowProvider loads via flowJson prop. Contract addresses and network config must be aligned.
• `flow-cli` — Use to test scripts and transactions via CLI before integrating them into React hooks.
• `cadence-tokens` — Consult when using useFlowNftMetadata or building NFT/FT frontends for the correct MetadataViews and collection paths.