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

# Cello + Devin integration

> How to add user referrals to your app using Cello with Devin

Devin can implement Cello user referrals end-to-end if you give it the **right guidance** and force it to create a plan before coding.

## Prerequisites

Before integrating Cello, ensure the following prerequisites are met:

* Signup and authentication flow with a database to store user records is functional
* Stripe or Chargebee subscription flow is functional
* You have a Cello account and API keys at hand.

<Note>
  You can integrate directly on production - your account stays in **pre-launch phase** until you launch, so all events are recorded as test data and nothing is paid out. A sandbox is optional if you prefer a separate environment.
</Note>

## Connect the Cello MCP

Connect the [Cello MCP server](/mcp/introduction) before you start. It gives Devin direct access to Cello's documentation, your integration status, your incoming events, and best-practice recommendations, so Devin can look up the right docs itself, verify your setup as it goes, and follow best practices automatically instead of relying only on the guide link you paste.

Open **My account → MCP Server** in the [Cello Portal](https://app.cello.so/mcp), turn the server on, and use the one-click connect for your tool - or the generic option if it doesn't have its own card yet. There's no token to generate or paste. See [Connect your client](/mcp/connect) for more detail.

<Accordion title="Installing the Cello MCP in Devin">
  * Go to [https://app.devin.ai/customize?browse=true](https://app.devin.ai/customize?browse=true)
  * Find Cello and install it
  * Authenticate via the Cello Portal
</Accordion>

## Cello user referrals integration (Coding-agent flow)

<Steps>
  <Step title="Add Cello Integration Guide Skill">
    * Go to [https://app.devin.ai/customize?tab=skills](https://app.devin.ai/customize?tab=skills)

    * Add the skill from Cello's GitHub
      ```text theme={null}
      https://github.com/getcello/cello-cursor-plugin/blob/main/skills/cello-get-integration-guide/SKILL.md
      ```
  </Step>

  <Step title="Integrate Cello">
    * Use the skill to get a tailored integration guide for Cello
    * Devin will ask you questions that cannot be answered automatically
  </Step>

  <Step title="Confirm executing the plan">
    Review the plan carefully. It should cover:

    * Cello JS SDK initialization and user authentication
    * Referral component placement and configuration
    * Attribution setup for tracking referred signups
    * Webhook integration for conversion tracking

    If it looks correct, tell Devin to proceed and start implementing it.
  </Step>

  <Step title="Verify each component as you go">
    Don't wait until the end. As Devin finishes each part, ask it to check that part before moving on:

    *"Use Cello to check my integration status - is the attribution library connected yet?"*

    The four things the plan covers are the same four the health check reports on, and the same four you'll test later in the [pre-launch testbook](/guides/integration/pre-launch-testbook#test-by-area):

    | What you just built                                 | In the health report | Testbook section                                                                                   |
    | --------------------------------------------------- | -------------------- | -------------------------------------------------------------------------------------------------- |
    | SDK initialization and referral component placement | Referral component   | [Referral component](/guides/integration/pre-launch-testbook#referral-component)                   |
    | Attribution setup                                   | Attribution library  | [Capturing the referral code](/guides/integration/pre-launch-testbook#capturing-the-referral-code) |
    | Signup tracking                                     | Signups tracking     | [Signup tracking](/guides/integration/pre-launch-testbook#signup-tracking)                         |
    | Purchase and conversion tracking                    | Purchases tracking   | [Purchase tracking](/guides/integration/pre-launch-testbook#purchase-tracking)                     |

    Two things to expect, so a partial result doesn't look like a failure:

    * **All four components are reported every time.** The ones you haven't built yet read **Not connected**, which is correct at this stage. Only judge the one you just finished.
    * **Status lags behind your code.** A component turns **Connected** once a successful event reaches Cello within the health window, which can take up to \~10 minutes. Re-check before concluding anything is broken.

    If a component comes back with a warning, ask for the events behind it. The health check tells you *which* component is failing; the events tell you *why*:

    *"Show me my recent Cello events and tell me which fields are failing validation."*
  </Step>

  <Step title="Work through the pre-launch testbook">
    The [Pre-launch Testbook](/guides/integration/pre-launch-testbook) covers the manual, front-end checks no automated tool can see for you: whether the referral component sits well in your UI, whether the new-user banner reads correctly, and whether the discount math is right on both monthly and yearly plans.

    Devin can fetch it and walk you through it, because the testbook is part of the documentation the Cello MCP server searches:

    *"Pull the Cello pre-launch testbook and walk me through the signup tracking section."*

    <CardGroup cols={1}>
      <Card title="Pre-launch Testbook" icon="list-check" horizontal href="/guides/integration/pre-launch-testbook" />
    </CardGroup>
  </Step>

  <Step title="Publish & Test">
    Run your app and test the end-to-end flow. If everything was implemented correctly, you should see events coming in to the [Cello Dashboard](https://app.cello.so/performance/referrer-activity), marked as testing until you launch your program.

    Events reach **Developers → Events** within a few minutes, but dashboards refresh hourly - see [when each surface updates](/guides/integration/pre-launch-testbook#when-each-surface-updates) before assuming something is missing.
  </Step>
</Steps>

## After you're live

If you have the Cello MCP connected, it continues to be useful after the initial integration:

| Prompt                                           | What happens                                                                                            |
| ------------------------------------------------ | ------------------------------------------------------------------------------------------------------- |
| *"Is my Cello integration working?"*             | Checks all four integration components and reports which are connected or broken                        |
| *"Why aren't referral rewards being triggered?"* | Inspects recent events to find missing or malformed fields preventing attribution                       |
| *"How can I improve my referral program?"*       | Returns a prioritized list of recommendations across activation, sharing, and conversion                |
| *"Which recommendations need code changes?"*     | Separates the optional enhancements that need dev work from the ones that are only portal configuration |
| *"How do I set up a custom referral launcher?"*  | Searches the docs for custom launcher implementation guides                                             |

<Note>
  For a step-by-step technical implementation (source of truth + acceptance criteria), follow the detailed guide:

  * [React + Node.js Integration Guide](/resources/react-nodejs-integration)

  The guide uses React + Node.js as an example, but it can be any other combination - the steps stay the same.
</Note>