### Install Flowboard SDK for Expo

Source: https://docs.flow-board.co/quick-start

Install the Flowboard React SDK for Expo and configure native dependencies. Ensure you have Expo installed in your project.

```bash
npx expo install flowboard-react

# Install and configure native dependencies
npx --package flowboard-react flowboard-setup --yes
```

--------------------------------

### Install Flowboard SDK for React Native

Source: https://docs.flow-board.co/quick-start

Install the Flowboard React SDK for React Native and configure peer dependencies. Ensure you have npm or yarn installed.

```bash
npm install flowboard-react

# Install and configure peer dependencies
npx --package flowboard-react flowboard-setup --yes
```

--------------------------------

### Install Amplitude and Adjust SDKs

Source: https://docs.flow-board.co/custom-tracking

Install the necessary packages for Amplitude and Adjust tracking in your React Native or Expo project.

```bash
npm install @amplitude/analytics-react-native react-native-adjust
```

--------------------------------

### Launch Tracked Flow in iOS (Swift)

Source: https://docs.flow-board.co/custom-tracking

This example demonstrates launching a Flowboard onboarding flow on iOS and sending custom tracking events for flow completion and step changes using `myTracking.track`.

```swift
import FlowboardSwiftCore
import FlowboardSwiftUIKit
import UIKit

func launchTrackedFlow(from host: UIViewController) {
  Task {
    do {
      try await Flowboard.launchOnboarding(
        from: host,
        options: .init(
          onOnboardEnd: { formData in
            print("Flow finished:", formData)
            myTracking.track(
              "flow_completed",
              properties: [
                "plan": formData.string("plan") ?? "",
                "acceptedTerms": formData.bool("accept_terms") ?? false
              ]
            )
          },
          onStepChange: { stepId, pageStep, formData in
            print("User moved to step:", stepId ?? "", pageStep, formData)
            myTracking.track(
              "flow_step_viewed",
              properties: [
                "stepId": stepId ?? "",
                "pageStep": pageStep,
                "plan": formData.string("plan") ?? ""
              ]
            )
          }
        )
      )
    } catch {
      print("Failed to launch Flowboard:", error)
    }
  }
}
```

--------------------------------

### Launch Tracked Flow in Flutter

Source: https://docs.flow-board.co/custom-tracking

This example shows how to launch a Flowboard onboarding flow in Flutter and send custom tracking events for flow completion and step changes using `myTracking.track`.

```dart
import 'package:flutter/foundation.dart';
import 'package:flutter/widgets.dart';
import 'package:flowboard_flutter/flowboard_flutter.dart';

Future<void> launchTrackedFlow(BuildContext context) async {
  await Flowboard.launchOnboarding(
    context,
    onOnboardEnd: (formData) {
      debugPrint('Flow finished: $formData');
      myTracking.track('flow_completed', {
        'plan': formData['plan'],
        'acceptedTerms': formData['accept_terms'] == true,
      });
    },
    onStepChange: (stepId, pageStep, formData) {
      debugPrint('User moved to step: $stepId $pageStep $formData');
      myTracking.track('flow_step_viewed', {
        'stepId': stepId,
        'pageStep': pageStep,
        'plan': formData['plan'],
      });
    },
  );
}
```

--------------------------------

### Install Flowboard SDK for Flutter

Source: https://docs.flow-board.co/quick-start

Add the flowboard_flutter package to your Flutter project's dependencies. Ensure you have Flutter installed and configured.

```bash
flutter pub add flowboard_flutter
```

--------------------------------

### Launch Tracked Flow in React Native / Expo

Source: https://docs.flow-board.co/custom-tracking

This example demonstrates how to launch a Flowboard onboarding flow and send custom tracking events for flow completion and step changes using `myTracking.track`.

```tsx
import { Flowboard } from 'flowboard-react';

export async function launchTrackedFlow() {
  await Flowboard.launchOnboarding({
    onOnboardEnd: (formData) => {
      console.log('Flow finished:', formData);
      myTracking.track('flow_completed', {
        plan: typeof formData.plan === 'string' ? formData.plan : undefined,
        acceptedTerms: Boolean(formData.accept_terms),
      });
    },
    onStepChange: (stepId, pageStep, formData) => {
      console.log('User moved to step:', stepId, pageStep, formData);
      myTracking.track('flow_step_viewed', {
        stepId,
        pageStep,
        plan: typeof formData.plan === 'string' ? formData.plan : undefined,
      });
    },
  });
}
```

--------------------------------

### Handle Custom Actions in iOS

Source: https://docs.flow-board.co/custom-screen

Implement a workaround for custom screens in iOS by handling custom actions. This example shows how to trigger a native `PaywallViewController` from a Flowboard flow.

```swift
import FlowboardSwiftCore
import FlowboardSwiftUIKit
import UIKit

func startFlow(from host: UIViewController) {
  Task {
    do {
      try await Flowboard.launchOnboarding(
        from: host,
        options: .init(
          onCustomAction: { ctx in
            let actionName = ctx.action.payload.string("name") ?? ""
            guard actionName == "open_native_paywall" else {
              return .performDefault
            }

            let plan = ctx.values.string("plan") ?? "free"
            let controller = PaywallViewController(plan: plan)
            host.present(controller, animated: true)
            return .handled
          }
        )
      )
    } catch {
      print("Failed to launch Flowboard:", error)
    }
  }
}
```

--------------------------------

### Launch Flow with Step Change Callback (iOS)

Source: https://docs.flow-board.co/retrieve-flow-data

Utilize the `onStepChange` callback within the `Flowboard.launchOnboarding` options to track flow progression. This example shows how to send analytics data when a step changes.

```swift
import FlowboardSwiftCore
import FlowboardSwiftUIKit

func startFlow() {
  Task {
    do {
      try await Flowboard.launchOnboarding(
        from: self,
        options: .init(
          onStepChange: { pageId, pageStep, formData in
            analytics.track(
              "flow_step_viewed",
              properties: [
                "pageId": pageId ?? "",
                "pageStep": pageStep,
                "selectedPlan": formData.string("plan") ?? ""
              ]
            )
          }
        )
      )
    } catch {
      print("Failed to launch Flowboard:", error)
    }
  }
}

```

--------------------------------

### Troubleshoot Expo Project Build Failures

Source: https://docs.flow-board.co/quick-start

If your Expo project fails after installing the SDK, clean the native project and reinstall dependencies. Ensure you rebuild the project afterwards.

```bash
rm -rf ios/build
rm -rf node_modules
npm install
npx expo prebuild --clean
npx expo run:ios
```

--------------------------------

### Custom Action Handler for iOS

Source: https://docs.flow-board.co/custom-actions

Implement a custom action handler for the 'open_checkout' action on iOS. This example shows how to present a checkout screen and handle the action result.

```swift
import FlowboardSwiftCore
import FlowboardSwiftUIKit
import UIKit

func startFlow(from host: UIViewController) {
  Task {
    do {
      try await Flowboard.launchOnboarding(
        from: host,
        options: .init(
          onCustomAction: { ctx in
            let actionName = ctx.action.payload.string("name") ?? ""
            guard actionName == "open_checkout" else {
              return .performDefault
            }

            let plan = ctx.action.payload.string("plan") ?? "free"
            billing.presentCheckout(
              plan: plan,
              customerEmail: ctx.values.string("email")
            )
            return .handled
          }
        )
      )
    } catch {
      print("Failed to launch Flowboard:", error)
    }
  }
}
```

--------------------------------

### Launch Flow with onOnboardEnd Callback

Source: https://docs.flow-board.co/retrieve-flow-data

Use `onOnboardEnd` to get the final form data when the user completes the onboarding. Ensure your input IDs are stable as they become the keys in the `formData` object.

```tsx
import { Flowboard } from 'flowboard-react';

export async function startFlow() {
  await Flowboard.launchOnboarding({
    onOnboardEnd: (formData) => {
      const email =
        typeof formData.email === 'string' ? formData.email.trim() : '';
      const selectedPlan =
        typeof formData.plan === 'string' ? formData.plan : 'free';

      console.log('Flow completed', {
        email,
        selectedPlan,
      });
    },
  });
}
```

```tsx
import { Flowboard } from 'flowboard-react';

export async function startFlow() {
  await Flowboard.launchOnboarding({
    onOnboardEnd: (formData) => {
      const email =
        typeof formData.email === 'string' ? formData.email.trim() : '';
      const selectedPlan =
        typeof formData.plan === 'string' ? formData.plan : 'free';

      console.log('Flow completed', {
        email,
        selectedPlan,
      });
    },
  });
}
```

```dart
import 'package:flutter/material.dart';
import 'package:flowboard_flutter/flowboard_flutter.dart';

Future<void> startFlow(BuildContext context) async {
  await Flowboard.launchOnboarding(
    context,
    onOnboardEnd: (formData) {
      final email = (formData['email'] as String? ?? '').trim();
      final selectedPlan = formData['plan'] as String? ?? 'free';

      debugPrint('Flow completed: email=$email, plan=$selectedPlan');
    },
  );
}
```

```swift
import FlowboardSwiftCore
import FlowboardSwiftUIKit

func startFlow() {
  Task {
    do {
      try await Flowboard.launchOnboarding(
        from: self,
        options: .init(
          onOnboardEnd: { formData in
            let email =
              formData.string("email")?
              .trimmingCharacters(in: .whitespacesAndNewlines) ?? ""
            let selectedPlan = formData.string("plan") ?? "free"

            print("Flow completed: email=\(email), plan=\(selectedPlan)")
          }
        )
      )
    } catch {
      print("Failed to launch Flowboard:", error)
    }
  }
}
```

--------------------------------

### Launch Flow with Step Change and Custom Screens (React Native)

Source: https://docs.flow-board.co/retrieve-flow-data

Use `onStepChange` to track flow progress and `customScreenBuilder` to render custom UI components within the flow. This example demonstrates tracking step views and conditionally displaying a profile summary card.

```tsx
await Flowboard.launchOnboarding({
    onStepChange: (pageId, pageStep, formData) => {
      analytics.track('flow_step_viewed', {
        pageId,
        pageStep,
        selectedPlan:
          typeof formData.plan === 'string' ? formData.plan : undefined,
      });
    },
    customScreenBuilder: (ctx) => {
      if (ctx.screenData.id !== 'profile_summary') {
        return null;
      }

      return (
        <ProfileSummaryCard
          name={typeof ctx.formData.fullname === 'string' ? ctx.formData.fullname : ''}
          email={typeof ctx.formData.email === 'string' ? ctx.formData.email : ''}
          onContinue={ctx.onNext}
        />
      );
    },
  });
  
```

--------------------------------

### Launch Flow with Step Change and Custom Screens (Flutter)

Source: https://docs.flow-board.co/retrieve-flow-data

Implement `onStepChange` for analytics and `customScreenBuilder` for custom UI elements in Flutter flows. This example tracks step views and shows a `ProfileSummaryCard` when the 'profile_summary' screen is active.

```dart
await Flowboard.launchOnboarding(
    context,
    onStepChange: (pageId, pageStep, formData) => {
      analytics.track('flow_step_viewed', {
        'pageId': pageId,
        'pageStep': pageStep,
        'selectedPlan': formData['plan'],
      });
    },
    customScreenBuilder: (ctx) => {
      if (ctx.screenData['id'] != 'profile_summary') {
        return const SizedBox.shrink();
      }

      return ProfileSummaryCard(
        name: ctx.formData['fullname'] as String? ?? '',
        email: ctx.formData['email'] as String? ?? '',
        onContinue: ctx.onNext,
      );
    },
  );
  
```

--------------------------------

### Launch Flowboard Onboarding

Source: https://docs.flow-board.co/quick-start

Use this to launch the default onboarding flow. The `onOnboardEnd` callback receives form data upon completion.

```tsx
import { Button } from 'react-native';
import { Flowboard } from 'flowboard-react';

const startFlow = async () => {
  try {
    await Flowboard.launchOnboarding({
      onOnboardEnd: (formData) => {
        console.log('Flow finished:', formData);
      },
    });
  } catch (error) {
    console.error('Failed to launch Flowboard:', error);
  }
};

export function LaunchFlowButton() {
  return <Button title="Start flow" onPress={startFlow} />;
}
```

```dart
import 'package:flutter/material.dart';
import 'package:flowboard_flutter/flowboard_flutter.dart';

class LaunchFlowButton extends StatelessWidget {
  const LaunchFlowButton({super.key});

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: () async {
        await Flowboard.launchOnboarding(
          context,
          onOnboardEnd: (formData) {
            debugPrint('Flow finished: $formData');
          },
        );
      },
      child: const Text('Start flow'),
    );
  }
}
```

```swift
import FlowboardSwiftUIKit

func startFlow() {
  Task {
    do {
      try await Flowboard.launchOnboarding(
        from: self,
        options: .init(
          onOnboardEnd: { formData in
            print("Flow finished:", formData)
          }
        )
      )
    } catch {
      print("Failed to launch Flowboard:", error)
    }
  }
}
```

```kotlin
import androidx.lifecycle.lifecycleScope
import co.flowboard.core.FlowboardLaunchOptions
import co.flowboard.view.Flowboard
import kotlinx.coroutines.launch

fun startFlow() {
  lifecycleScope.launch {
    try {
      val fragment = Flowboard.launchOnboarding(
        activity = this@MainActivity,
        options = FlowboardLaunchOptions(
          onOnboardEnd = { formData ->
            println("Flow finished: $formData")
          }
        )
      )

      // Host-managed cleanup
      supportFragmentManager.beginTransaction().remove(fragment).commit()
    } catch (error: Throwable) {
      error.printStackTrace()
    }
  }
}
```

--------------------------------

### iOS: Build and Launch Signup Flow

Source: https://docs.flow-board.co/retrieve-flow-data

Constructs a signup payload from form data and launches the onboarding flow. Handles step changes and onboarding completion by submitting results and tracking analytics. Uses a Task for asynchronous operations.

```swift
import FlowboardSwiftCore
import FlowboardSwiftUIKit
import UIKit

struct FlowboardSignupPayload: Encodable {
  let email: String
  let fullName: String
  let plan: String
  let acceptedTerms: Bool
}

func readString(_ formData: [String: FlowboardJSONValue], _ key: String) -> String {
  formData.string(key)?
    .trimmingCharacters(in: .whitespacesAndNewlines) ?? ""
}

func readPlan(_ formData: [String: FlowboardJSONValue]) -> String {
  switch formData.string("plan") {
  case "pro", "team":
    return formData.string("plan") ?? "free"
  default:
    return "free"
  }
}

func buildFlowboardSignupPayload(
  from formData: [String: FlowboardJSONValue]
) -> FlowboardSignupPayload {
  FlowboardSignupPayload(
    email: readString(formData, "email"),
    fullName: readString(formData, "fullname"),
    plan: readPlan(formData),
    acceptedTerms: formData.bool("accept_terms") ?? false
  )
}

func submitOnboardingResult(_ payload: FlowboardSignupPayload) async throws {
  try await api.post("/onboarding/complete", body: payload)
}

func launchSignupFlow(from host: UIViewController) {
  Task {
    do {
      try await Flowboard.launchOnboarding(
        from: host,
        options: .init(
          onStepChange: { pageId, pageStep, formData in
            let payload = buildFlowboardSignupPayload(from: formData)

            analytics.track(
              "flow_step_viewed",
              properties: [
                "pageId": pageId ?? "",
                "pageStep": pageStep,
                "plan": payload.plan
              ]
            )
          },
          onOnboardEnd: { formData in
            let payload = buildFlowboardSignupPayload(from: formData)
            Task {
              try? await submitOnboardingResult(payload)
            }
          }
        )
      )
    } catch {
      print("Failed to launch Flowboard:", error)
    }
  }
}

```

--------------------------------

### Example Flowboard Form Data

Source: https://docs.flow-board.co/custom-tracking

This JSON object represents the data collected from a Flowboard form, including email, plan selection, and terms acceptance.

```json
{
  "email": "ada@example.com",
  "plan": "pro",
  "accept_terms": true
}
```

--------------------------------

### Initialize and Launch Onboarding (Flutter)

Source: https://docs.flow-board.co/

Initialize Flowboard with your API token and debug settings. Launch a specific onboarding flow by its ID, including the desired locale.

```dart
import 'package:flowboard/flowboard.dart';

await Flowboard.init(
  apiToken: 'YOUR_BEARER_TOKEN',
  debug: true,
  enableAnalytics: true,
);

await Flowboard.launchOnboardingById(
  onboardingId: 'YOUR_FLOW_ID',
  locale: 'en_US',
);

```

--------------------------------

### Initialize and Launch Onboarding (React Native)

Source: https://docs.flow-board.co/

Initialize Flowboard once with your API token and debug settings. Then, launch a specific onboarding flow by its ID, specifying the locale.

```javascript
import { Flowboard } from 'flowboard-react';

Flowboard.init({
  apiToken: 'YOUR_BEARER_TOKEN',
  debug: true,
  enableAnalytics: true,
});

await Flowboard.launchOnboardingById('YOUR_FLOW_ID', {
  locale: 'en_US',
});

```

--------------------------------

### Custom Action Builder for Flutter

Source: https://docs.flow-board.co/custom-actions

Implement a custom action handler for the 'open_checkout' action in Flutter. This example shows how to extract data and display a SnackBar.

```dart
import 'package:flutter/material.dart';
import 'package:flowboard_flutter/flowboard_flutter.dart';

Future<void> startFlow(BuildContext context) async {
  await Flowboard.launchOnboarding(
    context,
    customActionBuilder: (action, ctx, data) {
      if (action != 'open_checkout') {
        return;
      }

      final plan = data?['plan'] as String? ?? 'free';

      ScaffoldMessenger.of(ctx.context).showSnackBar(
        SnackBar(content: Text('Open checkout for $plan')),
      );
      ctx.onNext();
    },
  );
}
```

--------------------------------

### Flutter: Build and Launch Signup Flow

Source: https://docs.flow-board.co/retrieve-flow-data

Constructs a signup payload from form data and launches the onboarding flow. Handles step changes and onboarding completion by submitting results and tracking analytics.

```dart
class FlowboardSignupPayload {
    final String email;
    final String fullName;
    final String plan;
    final bool acceptedTerms;

    const FlowboardSignupPayload({
      required this.email,
      required this.fullName,
      required this.plan,
      required this.acceptedTerms,
    });

    Map<String, dynamic> toJson() {
      return {
        'email': email,
        'fullName': fullName,
        'plan': plan,
        'acceptedTerms': acceptedTerms,
      };
    }
  }

  String _readString(Map<String, dynamic> formData, String key) {
    final value = formData[key];
    return value is String ? value.trim() : '';
  }

  String _readPlan(Map<String, dynamic> formData) {
    final value = formData['plan'];
    if (value == 'pro' || value == 'team') {
      return value as String;
    }
    return 'free';
  }

  FlowboardSignupPayload buildFlowboardSignupPayload(
    Map<String, dynamic> formData,
  ) {
    return FlowboardSignupPayload(
      email: _readString(formData, 'email'),
      fullName: _readString(formData, 'fullname'),
      plan: _readPlan(formData),
      acceptedTerms: formData['accept_terms'] == true,
    );
  }

  Future<void> submitOnboardingResult(FlowboardSignupPayload payload) async {
    await api.post('/onboarding/complete', payload.toJson());
  }

  Future<void> launchSignupFlow(BuildContext context) async {
    await Flowboard.launchOnboarding(
      context,
      onStepChange: (pageId, pageStep, formData) {
        final payload = buildFlowboardSignupPayload(formData);

        analytics.track('flow_step_viewed', {
          'pageId': pageId,
          'pageStep': pageStep,
          'plan': payload.plan,
        });
      },
      onOnboardEnd: (formData) {
        final payload = buildFlowboardSignupPayload(formData);
        submitOnboardingResult(payload);
      },
    );
  }

```

--------------------------------

### Custom Action Builder for React Native

Source: https://docs.flow-board.co/custom-actions

Implement a custom action handler for the 'open_checkout' action in React Native. This example shows how to extract data and display an alert.

```tsx
import { Alert } from 'react-native';
import { Flowboard } from 'flowboard-react';

export async function startFlow() {
  await Flowboard.launchOnboarding({
    customActionBuilder: (action, ctx, data) => {
      if (action !== 'open_checkout') {
        return;
      }

      const plan = typeof data?.plan === 'string' ? data.plan : 'free';

      Alert.alert('Checkout', `Open checkout for ${plan}`);
      ctx.onNext();
    },
  });
}
```

--------------------------------

### Build Custom Flutter Screen

Source: https://docs.flow-board.co/custom-screen

Use `customScreenBuilder` to define a Flutter widget that conditionally renders based on screen data. This example shows how to display a paywall with dynamic content.

```dart
import 'package:flutter/material.dart';
import 'package:flowboard_flutter/flowboard_flutter.dart';

Future<void> startFlow(BuildContext context) async {
  await Flowboard.launchOnboarding(
    context,
    customScreenBuilder: (ctx) {
      if (ctx.screenData['id'] != 'paywall') {
        return const SizedBox.shrink();
      }

      final properties =
          ctx.screenData['properties'] as Map<String, dynamic>? ?? {};
      final title = properties['title'] as String? ?? 'Upgrade';
      final firstName = ctx.formData['fullname'] as String? ?? '';

      return Scaffold(
        body: SafeArea(
          child: Padding(
            padding: const EdgeInsets.all(24),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text(
                  title,
                  style: const TextStyle(
                    fontSize: 28,
                    fontWeight: FontWeight.w700,
                  ),
                ),
                const SizedBox(height: 12),
                Text(
                  firstName.isNotEmpty
                      ? 'Welcome back, $firstName.'
                      : 'Welcome.',
                ),
                const SizedBox(height: 24),
                ElevatedButton(
                  onPressed: ctx.onNext,
                  child: const Text('Continue'),
                ),
              ],
            ),
          ),
        ),
      );
    },
  );
}
```

--------------------------------

### Initialize Flowboard on iOS

Source: https://docs.flow-board.co/quick-start

Initialize the Flowboard SDK for iOS applications by calling Flowboard.initialize with your API token.

```swift
import FlowboardSwiftUIKit

Flowboard.initialize(
  apiToken: "YOUR_API_TOKEN",
  debug: true
)
```

--------------------------------

### VS Code IDE MCP Configuration

Source: https://docs.flow-board.co/auto-setup

Set up the Flowboard Docs MCP for VS Code by creating a `.vscode/mcp.json` file in your workspace.

```json
{
  "servers": {
    "flowboardDocs": {
      "type": "http",
      "url": "https://docs.flow-board.co/mcp"
    }
  }
}
```

--------------------------------

### Initialize and Launch Flowboard in Flutter

Source: https://docs.flow-board.co/welcome-to-flowboard

Initialize Flowboard with your API token and debug settings. Subsequently, launch a specific onboarding flow by its ID, including the locale.

```dart
import 'package:flowboard/flowboard.dart';

await Flowboard.init(
  apiToken: 'YOUR_BEARER_TOKEN',
  debug: true,
  enableAnalytics: true,
);

await Flowboard.launchOnboardingById(
  onboardingId: 'YOUR_FLOW_ID',
  locale: 'en_US',
);
```

--------------------------------

### Initialize Flowboard on Android

Source: https://docs.flow-board.co/quick-start

Initialize the Flowboard SDK for Android applications, providing the application context, API token, and debug flag.

```kotlin
import co.flowboard.view.Flowboard

Flowboard.initialize(
  context = applicationContext,
  apiToken = "YOUR_API_TOKEN",
  debug = true
)
```

--------------------------------

### Windsurf IDE MCP Configuration

Source: https://docs.flow-board.co/auto-setup

Add the Flowboard Docs MCP server in Windsurf Settings or edit `~/.codeium/mcp_config.json` for raw configuration.

```json
{
  "mcpServers": {
    "flowboardDocs": {
      "serverUrl": "https://docs.flow-board.co/mcp"
    }
  }
}
```

--------------------------------

### Initialize and Launch Flowboard in React Native

Source: https://docs.flow-board.co/welcome-to-flowboard

Initialize Flowboard once with your API token and debug settings. Then, launch a specific onboarding flow by its ID, specifying the desired locale.

```tsx
import { Flowboard } from 'flowboard-react';

Flowboard.init({
  apiToken: 'YOUR_BEARER_TOKEN',
  debug: true,
  enableAnalytics: true,
});

await Flowboard.launchOnboardingById('YOUR_FLOW_ID', {
  locale: 'en_US',
});
```

--------------------------------

### Initialize and Track Events with Amplitude and Adjust

Source: https://docs.flow-board.co/custom-tracking

Initialize Amplitude and Adjust SDKs and track custom events during a flow. Use a development build or prebuild for Expo with native SDKs.

```tsx
import { Flowboard } from 'flowboard-react';
import { init as amplitudeInit, track as amplitudeTrack } from '@amplitude/analytics-react-native';
import { Adjust, AdjustConfig, AdjustEnvironment, AdjustEvent } from 'react-native-adjust';

const ADJUST_STEP_TOKEN = 'abc123';
const ADJUST_COMPLETE_TOKEN = 'xyz789';

export function initTracking() {
  amplitudeInit('AMPLITUDE_API_KEY');

  const config = new AdjustConfig('ADJUST_APP_TOKEN', AdjustEnvironment.Production);
  Adjust.create(config);
}

function trackAdjustStep(stepId: string, pageStep: number) {
  const event = new AdjustEvent(ADJUST_STEP_TOKEN);
  event.addCallbackParameter('step_id', stepId);
  event.addCallbackParameter('page_step', String(pageStep));
  Adjust.trackEvent(event);
}

function trackAdjustComplete(plan: string | undefined) {
  const event = new AdjustEvent(ADJUST_COMPLETE_TOKEN);
  if (plan) event.addCallbackParameter('plan', plan);
  Adjust.trackEvent(event);
}

export async function launchTrackedFlow() {
  await Flowboard.launchOnboarding({
    onStepChange: (stepId, pageStep, formData) => {
      const plan = typeof formData.plan === 'string' ? formData.plan : undefined;

      amplitudeTrack('flow_step_viewed', {
        step_id: stepId,
        page_step: pageStep,
        plan,
      });

      if (typeof stepId === 'string' && stepId.length > 0) {
        trackAdjustStep(stepId, pageStep);
      }
    },
    onOnboardEnd: (formData) => {
      const plan = typeof formData.plan === 'string' ? formData.plan : undefined;

      amplitudeTrack('flow_completed', {
        plan,
        accepted_terms: formData.accept_terms === true,
      });

      trackAdjustComplete(plan);
    },
  });
}

```

--------------------------------

### VS Code MCP Configuration

Source: https://docs.flow-board.co/use-mcp

Set up VS Code to connect to Flowboard MCP by creating a `.vscode/mcp.json` file in your workspace. Use your Flowboard MCP API key for the Authorization header.

```json
{
  "servers": {
    "flowboard": {
      "type": "http",
      "url": "https://mcp.flow-board.co",
      "headers": {
        "Authorization": "Bearer <your_mcp_key>"
      }
    }
  }
}
```

--------------------------------

### Initialize and Track Flow Events in Flutter

Source: https://docs.flow-board.co/custom-tracking

Initializes Amplitude and Adjust SDKs and provides functions to track specific steps and flow completion. Ensure Amplitude and Adjust SDKs are added via pubspec.yaml.

```bash
flutter pub add amplitude_flutter adjust_sdk
```

```dart
import 'package:amplitude_flutter/amplitude.dart';
import 'package:adjust_sdk/adjust.dart';
import 'package:adjust_sdk/adjust_config.dart';
import 'package:adjust_sdk/adjust_event.dart';
import 'package:flutter/material.dart';
import 'package:flowboard_flutter/flowboard_flutter.dart';

const String adjustStepToken = 'abc123';
const String adjustCompleteToken = 'xyz789';

final Amplitude amplitude = Amplitude.getInstance();

void initTracking() {
    amplitude.init('AMPLITUDE_API_KEY');

    final config = AdjustConfig('ADJUST_APP_TOKEN', AdjustEnvironment.production);
    Adjust.initSdk(config);
}

void trackAdjustStep(String stepId, int pageStep) {
    final event = AdjustEvent(adjustStepToken);
    event.addCallbackParameter('step_id', stepId);
    event.addCallbackParameter('page_step', pageStep.toString());
    Adjust.trackEvent(event);
}

void trackAdjustComplete(String? plan) {
    final event = AdjustEvent(adjustCompleteToken);
    if (plan != null && plan.isNotEmpty) {
      event.addCallbackParameter('plan', plan);
    }
    Adjust.trackEvent(event);
}

Future<void> launchTrackedFlow(BuildContext context) async {
    await Flowboard.launchOnboarding(
      context,
      onStepChange: (stepId, pageStep, formData) {
        final plan = formData['plan'] as String?;

        amplitude.logEvent('flow_step_viewed', eventProperties: {
          'step_id': stepId,
          'page_step': pageStep,
          'plan': plan,
        });

        if (stepId.isNotEmpty) {
          trackAdjustStep(stepId, pageStep);
        }
      },
      onOnboardEnd: (formData) {
        final plan = formData['plan'] as String?;

        amplitude.logEvent('flow_completed', eventProperties: {
          'plan': plan,
          'accepted_terms': formData['accept_terms'] == true,
        });

        trackAdjustComplete(plan);
      },
    );
}

```