Installation
How to set up Flows in your React application.
The Flows React SDK is a library that allows you to integrate Flows into React applications. It includes a components package to simplify getting started with Flows in your application.
Using an AI coding assistant? Install the Flows install skill to let your agent set up Flows automatically.
Install the React SDK and components package
You can install the Flows React SDK from npm:
npm i @flows/react @flows/react-componentsAdd the FlowsProvider
The SDK provides a FlowsProvider component that you can use to wrap your app. Initialize it with your organization ID and environment key, which you can find in the Settings > General and Settings > Environments sections of the Flows dashboard.
Check out the React template project for a complete example.
import { FlowsProvider } from "@flows/react";
// Import the Basics V2 components and styles
import * as components from "@flows/react-components";
import * as tourComponents from "@flows/react-components/tour";
import * as surveyComponents from "@flows/react-components/survey";
import "@flows/react-components/index.css";
const App = () => {
return (
<FlowsProvider
organizationId="your-organization-id" // Find this in Settings > General
environment="production" // Default environment
userId="your-user-id" // Identify the user
// Add the Basics V2 components
tourComponents={{
...tourComponents,
}}
components={{
...components,
}}
surveyComponents={{
...surveyComponents,
}}
// Optional: Use your app's Link component for client-side navigation
LinkComponent={Link}
>
{/* Your app code here */}
</FlowsProvider>
);
};For a full list of supported properties, see the FlowsProvider documentation.
Create your first workflow
That's it! You're now ready to create your first workflow. See our quickstart guide for more information.
Last updated on