> ## Documentation Index
> Fetch the complete documentation index at: https://docs.mutalabs.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Quickstart

> Get your first flow live in under 5 minutes

# Get Started with Muta

Follow these steps to add beautiful, dynamic flows to your mobile app. Currently, we support React Native and Swift, with more SDKs coming soon.

<Tip>
  Setting up for the first time? Use the **Copy AI Context** button (bottom right) to get comprehensive SDK documentation you can paste into Claude, Cursor, or other AI coding assistants for guided help.
</Tip>

<Tabs>
  <Tab title="React Native">
    ## Installation

    Choose your package manager:

    ```bash theme={null}
    # Using npm
    npm install @mutalabs/react-native-muta react-native-webview
    ```

    ```bash theme={null}
    # Using yarn
    yarn add @mutalabs/react-native-muta react-native-webview
    ```

    For React Native CLI projects, install iOS dependencies:

    ```bash theme={null}
    cd ios && pod install
    ```

    <Note>
      Using Expo?

      * The pod install step is not required
      * You cannot use Expo Go - you must create a fresh development build
      * Follow the official Expo guide to create a development build: [Creating Development Builds](https://docs.expo.dev/develop/development-builds/create-a-build/)
    </Note>

    ## Create Your First Flow

    <Steps>
      <Step title="Design Your Flow" icon="paintbrush">
        <AccordionGroup>
          <Accordion icon="wand-magic-sparkles" title="Create Your First Flow">
            First, log in or sign up at [Muta Dashboard](https://app.mutalabs.com/dashboard). Then choose your path:

            1. Start from scratch:
               * Click the "+" button next to Flows
               * Design your flow using drag & drop
               * Hit "Save" when you're done

            2. Start with a template:
               * Navigate to Templates in the left panel
               * Select a template you like
               * Click "Create Flow" - the template becomes your base flow
               * Edit the flow to match your needs
               * Hit "Save" when you're done
          </Accordion>
        </AccordionGroup>
      </Step>

      <Step title="Create a Placement" icon="square-terminal">
        <AccordionGroup>
          <Accordion icon="plus" title="Create Your First Placement">
            1. Click "Placements" in the left panel
            2. Click the "+" button to create a placement
            3. Give it a memorable name
            4. Choose an ID (e.g., "welcome.flow")
            5. Select the flow you want to display
            6. Click "Create"
          </Accordion>
        </AccordionGroup>
      </Step>

      <Step title="Add to Your App" icon="code">
        1. Add the MutaRoot component to your app:

        ```tsx theme={null}
        import { MutaRoot, Muta } from '@mutalabs/react-native-muta';

        function App() {
          return (
            <>
              <MutaRoot apiKey="your-api-key" />
              {/* Your app content */}
            </>
          );
        }
        ```

        2. Display your flow where needed:

        ```tsx theme={null}
        Muta.displayPlacement({
          placementId: 'your-placement-id',
          bgColor: '#000000', // Match your first screen's background
          presentationType: 'fade' // 'slide' | 'fade' | 'none'
        });
        ```

        <Tip>
          The `bgColor` should match your first screen's background color for a seamless transition.
        </Tip>
      </Step>

      <Step title="Test and Deploy" icon="rocket">
        <AccordionGroup>
          <Accordion icon="mobile" title="Test in Development">
            1. Run your app in development mode
            2. Trigger your flow where implemented
            3. Verify the flow appears and works as expected
          </Accordion>

          <Accordion icon="bolt" title="Make Live Updates">
            1. Return to the Muta Dashboard
            2. Edit your flow
            3. Hit save - changes are ready instantly!
            4. Refresh your app to see the changes

            <Note>
              Updates affect new app downloads - if you switch from Flow A to Flow B, users who download your app after the switch will see Flow B. Users currently in Flow A will complete their existing flow uninterrupted.
            </Note>
          </Accordion>
        </AccordionGroup>
      </Step>
    </Steps>

    ## What's Next?

    <CardGroup cols={2}>
      <Card title="Collect User Input" icon="keyboard" href="/sdk/react-native/user-input">
        Learn how to gather text inputs and multiple choice responses from your users.
      </Card>

      <Card title="Track Analytics" icon="chart-mixed" href="/sdk/react-native/analytics">
        Integrate with your analytics provider to measure flow performance.
      </Card>

      <Card title="Handle Errors" icon="shield-check" href="/sdk/react-native/error-handling">
        Implement proper error handling for a robust user experience.
      </Card>

      <Card title="API Reference" icon="book-bookmark" href="/sdk/react-native/api-reference">
        Explore the complete SDK API documentation.
      </Card>
    </CardGroup>
  </Tab>

  <Tab title="Swift">
    ## Installation

    Add the Muta SDK to your project using Swift Package Manager:

    ```swift theme={null}
    // In your Package.swift
    dependencies: [
        .package(url: "https://github.com/muta-labs/MutaSDK-iOS", from: "1.0.0")
    ]
    ```

    Or in Xcode:

    1. File > Add Package Dependencies
    2. Enter package URL: `https://github.com/muta-labs/MutaSDK-iOS`
    3. Click "Add Package"

    ## Create Your First Flow

    <Steps>
      <Step title="Design Your Flow" icon="paintbrush">
        <AccordionGroup>
          <Accordion icon="wand-magic-sparkles" title="Create Your First Flow">
            First, log in or sign up at [Muta Dashboard](https://app.mutalabs.com/dashboard). Then choose your path:

            1. Start from scratch:
               * Click the "+" button next to Flows
               * Design your flow using drag & drop
               * Hit "Save" when you're done

            2. Start with a template:
               * Navigate to Templates in the left panel
               * Select a template you like
               * Click "Create Flow" - the template becomes your base flow
               * Edit the flow to match your needs
               * Hit "Save" when you're done
          </Accordion>
        </AccordionGroup>
      </Step>

      <Step title="Create a Placement" icon="square-terminal">
        <AccordionGroup>
          <Accordion icon="plus" title="Create Your First Placement">
            1. Click "Placements" in the left panel
            2. Click the "+" button to create a placement
            3. Give it a memorable name
            4. Choose an ID (e.g., "welcome.flow")
            5. Select the flow you want to display
            6. Click "Create"
          </Accordion>
        </AccordionGroup>
      </Step>

      <Step title="Add to Your App" icon="code">
        1. Initialize the SDK in your app:

        ```swift theme={null}
        import MutaSDK

        @main
        struct YourApp: App {
            init() {
                Muta.configure(apiKey: "your-api-key")
            }
            
            var body: some Scene {
                WindowGroup {
                    ContentView()
                }
            }
        }
        ```

        2. Display your flow where needed:

        ```swift theme={null}
        Muta.shared.displayPlacement(
            placementId: "your-placement-id",
            backgroundColor: .white, // Match your first screen's background
            presentationType: .fade // .slide | .fade | .none
        )
        ```

        <Tip>
          The `backgroundColor` should match your first screen's background color for a seamless transition.
        </Tip>
      </Step>

      <Step title="Test and Deploy" icon="rocket">
        <AccordionGroup>
          <Accordion icon="mobile" title="Test in Development">
            1. Run your app in development mode
            2. Trigger your flow where implemented
            3. Verify the flow appears and works as expected
          </Accordion>

          <Accordion icon="bolt" title="Make Live Updates">
            1. Return to the Muta Dashboard
            2. Edit your flow
            3. Hit save - changes are ready instantly!
            4. Refresh your app to see the changes

            <Note>
              Updates affect new app downloads - if you switch from Flow A to Flow B, users who download your app after the switch will see Flow B. Users currently in Flow A will complete their existing flow uninterrupted.
            </Note>
          </Accordion>
        </AccordionGroup>
      </Step>
    </Steps>

    ## What's Next?

    <CardGroup cols={2}>
      <Card title="Collect User Input" icon="keyboard" href="/sdk/swift/user-input">
        Learn how to gather text inputs and multiple choice responses from your users.
      </Card>

      <Card title="Track Analytics" icon="chart-mixed" href="/sdk/swift/analytics">
        Integrate with your analytics provider to measure flow performance.
      </Card>

      <Card title="Handle Errors" icon="shield-check" href="/sdk/swift/error-handling">
        Implement proper error handling for a robust user experience.
      </Card>

      <Card title="API Reference" icon="book-bookmark" href="/sdk/swift/api-reference">
        Explore the complete SDK API documentation.
      </Card>
    </CardGroup>
  </Tab>
</Tabs>

<Note>
  Need help? We offer white glove support for SDK installation and implementation. [Contact us](https://www.mutalabs.com/) anytime!
</Note>