### Vue JS: Full Implementation Example with Rollout Integration

Source: https://guides.rollout.com/documentation/getting-started/show-the-authentication-ui/vue-js

Provides a complete Vue.js component example integrating Rollout. It combines the component structure, token fetching, dynamic script loading, and credential event handling into a single, runnable component. Includes optional cleanup logic in `beforeDestroy`.

```vue
<template>
  <div>
    <h1>Your Application</h1>
    <div ref="rolloutContainer"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      rolloutRoot: null
    };
  },

  methods: {
    handleCredentialAdded({ id, appKey }) {
      console.log(`New credential added - ID: ${id}, App: ${appKey}`);
      // Implement your custom logic here
    }
  },

  mounted() {
    fetch("/rollout-token")
      .then((resp) => resp.json())
      .then((data) => data.token)
      .then((token) => {
        const styleLink = document.createElement("link");
        styleLink.rel = "stylesheet";
        styleLink.href = "https://esm.sh/@rollout/link-react@latest/dist/style.css";
        document.body.appendChild(styleLink);

        import(/* webpackIgnore: true */ "https://esm.sh/@rollout/link-react@latest?bundle=all").then(
          ({ RolloutLinkProvider, CredentialsManager, createElement, createRoot }) => {
            this.rolloutRoot = createRoot(this.$refs.rolloutContainer);
            this.rolloutRoot.render(
              createElement(
                RolloutLinkProvider,
                { token },
                createElement(CredentialsManager, {
                  onCredentialAdded: this.handleCredentialAdded
                })
              )
            );
          }
        );
      });
  },

  beforeDestroy() {
    // Optional cleanup
    if (this.rolloutRoot) {
      this.rolloutRoot.unmount();
    }
  }
};
</script>
```

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

### Install Rollout Link React Library

Source: https://guides.rollout.com/documentation/getting-started/show-the-authentication-ui/react-17-and-newer

Install the official Rollout Link React library using npm. This is the first step to integrate Rollout.io into your React application.

```bash
npm install @rollout/link-react
```

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

### POST /auth/otp/{otpChallengeId} Request Example (Shell)

Source: https://guides.rollout.com/rollout-api-reference

Example of how to make a POST request to the /auth/otp/{otpChallengeId} endpoint using cURL. This includes setting the Content-Type header and providing the request body.

```shell
curl 'https://universal.rollout.com/api/auth/otp/{otpChallengeId}' \
  --request POST \
  --header 'Content-Type: application/json' \
  --data '{
  "otp": ""
}'
```

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

### Get Users Request Example (Shell Curl)

Source: https://guides.rollout.com/los-reference

This snippet demonstrates how to make a GET request to the /users endpoint using Shell Curl. It shows the basic structure of the request, including query parameters for pagination and filtering. The response schema indicates the structure of the returned user data.

```shell
curl 'https://los.universal.rollout.com/api/users?next=&offset=0&limit=1'
```

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

### GET Request Example for /people (Shell Curl)

Source: https://guides.rollout.com/tms-reference

This snippet shows how to send a GET request to the /people endpoint using curl to retrieve a list of people. It specifies the base URL for the universal.rollout.com API. Additional query parameters like 'next', 'offset', and 'limit' can be appended for pagination.

```shell
curl https://tms.universal.rollout.com/api/people
```

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

### Create User Request Example (Shell Curl)

Source: https://guides.rollout.com/los-reference

This snippet provides an example of how to create a new user via the /users endpoint using Shell Curl. It includes the necessary headers and a JSON payload with all required user attributes. The response schema outlines the structure of the newly created user object.

```shell
curl https://los.universal.rollout.com/api/users \
  --request POST \
  --header 'Content-Type: application/json' \
  --data '{
  "email": "",
  "firstName": "",
  "lastName": "",
  "phone": "",
  "role": "",
  "status": "",
  "timezone": "",
  "username": "",
  "type": "",
  "address": {
    "type": "",
    "street": "",
    "city": "",
    "state": "",
    "code": "",
    "country": ""
  },
  "participatingOfficeIds": [
    ""
  ],
  "password": ""
}'
```

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

### Get People Endpoint Request Example (Shell Curl)

Source: https://guides.rollout.com/tms-reference

Example of how to make a GET request to the /people endpoint using Shell Curl. This demonstrates the URL structure and query parameters such as offset and limit.

```shell
curl 'https://tms.universal.rollout.com/api/people?next=&offset=0&limit=1'
```

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

### React: Set Up Class Component for Rollout Integration

Source: https://guides.rollout.com/documentation/getting-started/show-the-authentication-ui/react-16-and-older

Demonstrates creating a React class component with a ref for mounting Rollout components. This sets the basic structure needed for integrating third-party libraries like Rollout.

```javascript
import React, { createRef, PureComponent } from "react";

class App extends PureComponent {
  rolloutContainer = createRef();

  state = {};

  componentDidMount() {
    // Initialization code will go here
  }

  render() {
    return (
      <div>
        <h1>Your Application</h1>
        <div ref={this.rolloutContainer} />
      </div>
    );
  }
}

export default App;
```

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

### React: Initialize Rollout Components with Token and Styles

Source: https://guides.rollout.com/documentation/getting-started/show-the-authentication-ui/react-16-and-older

Shows how to initialize Rollout components within the `componentDidMount` lifecycle method. It includes fetching a token, adding necessary CSS styles, and dynamically importing and rendering the Rollout components using `createRoot`.

```javascript
componentDidMount() {
  // Fetch token from your backend
  fetch("/rollout-token")
    .then((resp) => resp.json())
    .then((data) => data.token)
    .then((token) => {
      // Add required styles
      const styleLink = document.createElement("link");
      styleLink.rel = "stylesheet";
      styleLink.href = "https://esm.sh/@rollout/link-react@latest/dist/style.css";
      document.body.appendChild(styleLink);

      // Dynamically load Rollout bundle
      import(/* webpackIgnore: true */ "https://esm.sh/@rollout/link-react@latest?bundle=all").then(
        ({ RolloutLinkProvider, CredentialsManager, createElement, createRoot }) => {
          const root = createRoot(this.rolloutContainer.current);
          root.render(
            createElement(
              RolloutLinkProvider,
              { token },
              createElement(CredentialsManager)
            )
          );
        }
      );
    });
}
```

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

### Implement Laravel Controller for Rollout

Source: https://guides.rollout.com/documentation/getting-started/show-the-authentication-ui/php-with-laravel

Provides the backend logic for the Rollout integration. It includes methods to generate JWT tokens for client authentication and to handle incoming webhook requests, such as when new credentials are added.

```php
// app/Http/Controllers/RolloutController.php
namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Firebase\JWT\JWT;

class RolloutController extends Controller
{
    public function generateToken(Request $request)
    {
        $now = time();

        $payload = [
            'iss' => getenv('ROLLOUT_CLIENT_ID'),
            'sub' => $userId,
            'iat' => $now,
            'exp' => $now + 900 // 15 minutes
        ];

        $token = JWT::encode(
            $payload,
            config('services.rollout.client_secret'),
            'HS512'
        );

        return response()->json(['token' => $token]);
    }

    public function handleWebhook(Request $request)
    {
        $validated = $request->validate([
            'id' => 'required|string',
            'appKey' => 'required|string'
        ]);

        // Store credential logic
        \Log::info('New credential added:', $validated);
        
        return response()->json(['status' => 'success']);
    }
}
```

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

### Initialize Rollout JavaScript in Laravel

Source: https://guides.rollout.com/documentation/getting-started/show-the-authentication-ui/php-with-laravel

Handles the client-side initialization of the Rollout integration. It fetches a token from the backend, dynamically loads Rollout styles and scripts, and then renders the Rollout UI components within the specified container.

```javascript
// resources/js/rollout.js
document.addEventListener('DOMContentLoaded', function() {
    const container = document.getElementById('rollout-container');
    const csrfToken = document.querySelector('meta[name="csrf-token"]').content;

    fetch('/rollout-token', {
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': csrfToken
        }
    })
    .then(response => response.json())
    .then(data => {
        const token = data.token;
        
        // Add required styles
        const styleLink = document.createElement('link');
        styleLink.rel = 'stylesheet';
        styleLink.href = 'https://esm.sh/@rollout/link-react@latest/dist/style.css';
        document.body.appendChild(styleLink);

        // Dynamically load Rollout bundle
        import(/* webpackIgnore: true */ 'https://esm.sh/@rollout/link-react@latest?bundle=all').then(
            ({ RolloutLinkProvider, CredentialsManager, createElement, createRoot }) => {
                const root = createRoot(container);
                
                root.render(
                    createElement(
                        RolloutLinkProvider,
                        { token },
                        createElement(CredentialsManager)
                    )
                );
            }
        );
    });
});
```

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

### Configure Laravel Routes for Rollout

Source: https://guides.rollout.com/documentation/getting-started/show-the-authentication-ui/php-with-laravel

Sets up the necessary routes in Laravel to handle requests for generating Rollout tokens and receiving webhook notifications for credential events. This enables communication between the client-side JavaScript and the Laravel backend.

```php
// routes/web.php
use App\Http\Controllers\RolloutController;

Route::get('/rollout-token', [RolloutController::class, 'generateToken']);
Route::post('/credential-webhook', [RolloutController::class, 'handleWebhook']);
```

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

### Sync Opt-In Entities with React

Source: https://guides.rollout.com/documentation/advanced-guides/controlling-which-records-sync-with-rollout

This React example demonstrates how to sync opt-in entities, specifically 'tasks', by passing the `entitiesToSync` prop to the `CredentialsManager` component. This configuration ensures that only the specified entities are included in the data sync process.

```javascript
<CredentialsManager entitiesToSync={{ tasks: true }} />
```

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

### GET /users

Source: https://guides.rollout.com/los-reference

Retrieves a list of users with optional pagination parameters.

```APIDOC
## GET /users

### Description
Retrieves a list of users. Supports pagination using `next`, `offset`, and `limit` query parameters.

### Method
GET

### Endpoint
/users

### Parameters
#### Query Parameters
- **next** (string) - Optional - Used for cursor-based pagination.
- **offset** (string) - Optional - The number of results to skip. Defaults to '0'.
- **limit** (number) - Optional - The maximum number of results to return.

### Request Example
```bash
curl 'https://los.universal.rollout.com/api/users?next=&offset=0&limit=1'
```

### Response
#### Success Response (200)
- **users** (array) - An array of user objects.
  - **id** (string) - User's unique identifier.
  - **firstName** (string) - User's first name.
  - **lastName** (string) - User's last name.
  - **email** (string) - User's email address.
  - **phone** (string) - User's phone number.
  - **role** (string) - User's role.
  - **status** (string) - User's status.
  - **timezone** (string) - User's timezone.
  - **created** (string) - Timestamp of user creation.
  - **updated** (string) - Timestamp of last user update.
  - **rolloutUpdated** (string) - Timestamp of last update in Rollout.
  - **originalIds** (object) - Original IDs mapping.
  - **original** (object) - Original data.
  - **teamId** (string) - The ID of the team the user belongs to.
  - **address** (object) - User's address details.
    - **type** (string) - Type of address.
    - **street** (string) - Street name.
    - **city** (string) - City name.
    - **state** (string) - State or province.
    - **code** (string) - Postal code.
    - **country** (string) - Country name.
  - **username** (string) - User's username.
  - **type** (string) - Type of user.
  - **offices** (array) - List of offices the user is associated with.
    - **id** (string) - Office ID.

#### Response Example
```json
{
  "users": [
    {
      "id": "string",
      "firstName": "string",
      "lastName": "string",
      "email": "string",
      "phone": "string",
      "role": "string",
      "status": "string",
      "timezone": "string",
      "created": "string",
      "updated": "string",
      "rolloutUpdated": "string",
      "originalIds": {
        "^(.*)$": 1
      },
      "original": {
        "^(.*)$": {
          "^(.*)$": null
        }
      },
      "teamId": "string",
      "address": {
        "type": "string",
        "street": "string",
        "city": "string",
        "state": "string",
        "code": "string",
        "country": "string"
      },
      "username": "string",
      "type": "string",
      "offices": [
        {
          "id": "string"
        }
      ]
    }
  ]
}
```
```

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

### Sync Opt-In Entities with Vue

Source: https://guides.rollout.com/documentation/advanced-guides/controlling-which-records-sync-with-rollout

This Vue example shows how to dynamically set up Rollout synchronization, including opt-in entities like 'tasks'. It fetches a Rollout token and then uses `RolloutLinkProvider` and `CredentialsManager` to configure the sync, specifying `entitiesToSync: { tasks: true }`.

```javascript
mounted() {
  fetch("/rollout-token")
    .then((resp) => resp.json())
    .then((data) => data.token)
    .then((token) => {
      // ... setup code ... //
      import(/* webpackIgnore: true */ "https://esm.sh/@rollout/link-react@latest?bundle=all").then(
        ({ RolloutLinkProvider, CredentialsManager, createElement, createRoot }) => {
          this.rolloutRoot = createRoot(this.$refs.rolloutContainer);
          this.rolloutRoot.render(
            createElement(
              RolloutLinkProvider,
              { token },
              createElement(CredentialsManager, {
                entitiesToSync: { tasks: true }
              })
            )
          );
        }
      );
    });
}
```

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

### CredentialForm Component Usage Example

Source: https://guides.rollout.com/documentation/advanced-guides/use-your-own-integration-ui-with-the-credentialform-component

This example demonstrates how to use the CredentialForm component within a React application. It requires the 'appKey' prop to specify the connector for which credentials will be collected. This component is ideal for scenarios where you need to manage the surrounding UI and styling.

```javascript
function Rollout() {
  return (
    <CredentialForm appKey="lofty" />
  );
}
```

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

### Initialize Rollout.io with JavaScript

Source: https://guides.rollout.com/documentation/getting-started/show-the-authentication-ui/java-with-spring-boot

This JavaScript code snippet initializes the Rollout.io integration by fetching a token from the backend, dynamically loading necessary styles, and then rendering the Rollout component within the specified container. It relies on the CSRF tokens provided in the HTML meta tags.

```javascript
document.addEventListener('DOMContentLoaded', function() {
    const container = document.getElementById('rollout-container');
    const csrfToken = document.querySelector('meta[name="_csrf"]').content;
    const csrfHeader = document.querySelector('meta[name="_csrf_header"]').content;

    fetch('/rollout-token', {
        headers: {
            'Content-Type': 'application/json',
            [csrfHeader]: csrfToken
        }
    })
    .then(response => response.json())
    .then(data => {
        const token = data.token;
        
        // Add required styles
        const styleLink = document.createElement('link');
        styleLink.rel = 'stylesheet';
        styleLink.href = 'https://esm.sh/@rollout/link-react@latest/dist/style.css';
        document.body.appendChild(styleLink);

        // Dynamically load Rollout bundle
        import(/* webpackIgnore: true */ 'https://esm.sh/@rollout/link-react@latest?bundle=all').then(
            ({ RolloutLinkProvider, CredentialsManager, createElement, createRoot }) => {
                const root = createRoot(container);
                
                root.render(
                    createElement(
                        RolloutLinkProvider,
                        { token },
                        createElement(CredentialsManager)
                    )
                );
            }
        );
    });
});
```

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

### Configure Rollout Service in Laravel

Source: https://guides.rollout.com/documentation/getting-started/show-the-authentication-ui/php-with-laravel

Adds the necessary configuration for the Rollout service within Laravel's `config/services.php` file. This typically includes storing sensitive information like the client secret.

```php
'rollout' => [
    'client_secret' => env('ROLLOUT_CLIENT_SECRET'),
],
```

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

### Create Laravel Blade View for Rollout

Source: https://guides.rollout.com/documentation/getting-started/show-the-authentication-ui/php-with-laravel

Defines the basic HTML structure for the Rollout integration within a Laravel Blade view. It includes a container element for the Rollout UI and links to the necessary JavaScript file.

```php
<!-- resources/views/rollout.blade.php -->
@extends('layouts.app')

@section('content')
    <h1>Your Application</h1>
    <div id="rollout-container"></div>
@endsection

@section('scripts')
    <script src="{{ mix('js/rollout.js') }}"></script>
@endsection
```

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

### Create View Template for Rollout Container (ERB)

Source: https://guides.rollout.com/documentation/getting-started/show-the-authentication-ui/ruby-on-rails

This snippet demonstrates adding a container element in an ERB view template where the Rollout interface will be mounted. It's a simple HTML div with a specific ID.

```erb
<!-- app/views/your_controller/index.html.erb -->
<h1>Your Application</h1>
<div id="rollout-container"></div>
```

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

### POST Request Example for /people (Shell Curl)

Source: https://guides.rollout.com/tms-reference

This snippet demonstrates how to send a POST request to the /people endpoint using curl. It includes the necessary headers and a JSON payload for creating a new person record. The request targets the universal.rollout.com API.

```shell
curl https://tms.universal.rollout.com/api/people \
  --request POST \
  --header 'Content-Type: application/json' \
  --data '{
  "firstName": "",
  "lastName": "",
  "stage": "",
  "stageId": "",
  "assignedUserId": "",
  "assignedPondId": "",
  "officeId": "",
  "timeframeId": "",
  "emails": [
    {
      "value": "",
      "type": "",
      "status": "",
      "isPrimary": true
    }
  ],
  "phones": [
    {
      "value": "",
      "type": "",
      "status": "",
      "isPrimary": true
    }
  ],
  "addresses": [
    {
      "type": "",
      "street": "",
      "city": "",
      "state": "",
      "code": "",
      "country": ""
    }
  ],
  "tags": [
    ""
  ],
  "source": "",
  "systemSource": "",
  "averageBeds": 1,
  "averagePrice": 1,
  "birthday": "",
  "rating": 1,
  "lastActivity": "",
  "lastActivityType": "",
  "contactTypes": [
    ""
  ],
  "jobTitle": "",
  "companyName": "",
  "communicationsConsent": {
    "email": true,
    "call": true,
    "text": true,
    "massEmail": true,
    "postalMail": true,
    "visit": true
  },
  "sourceId": ""
}'
```

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

### React: Handle Credential Events in Rollout Integration

Source: https://guides.rollout.com/documentation/getting-started/show-the-authentication-ui/react-16-and-older

Illustrates how to handle credential-related events, such as `onCredentialAdded`, within a React component. This involves defining an event handler method and passing it as a prop to the `CredentialsManager` component.

```javascript
class App extends PureComponent {
  // Add event handler method
  handleCredentialAdded = ({ id, appKey }) => {
    console.log(`New credential added - ID: ${id}, App: ${appKey}`);
    // Add your custom logic here
  };

  componentDidMount() {
    fetch("/rollout-token")
      .then((resp) => resp.json())
      .then((data) => data.token)
      .then((token) => {
        // ... existing setup code ...
        
        import(/* webpackIgnore: true */ "https://esm.sh/@rollout/link-react@latest?bundle=all").then(
          ({ RolloutLinkProvider, CredentialsManager, createElement, createRoot }) => {
            const root = createRoot(this.rolloutContainer.current);
            root.render(
              createElement(
                RolloutLinkProvider,
                { token },
                createElement(CredentialsManager, {
                  onCredentialAdded: this.handleCredentialAdded
                })
              )
            );
          }
        );
      });
  }
}
```

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

### Create Thymeleaf Template for Rollout Integration

Source: https://guides.rollout.com/documentation/getting-started/show-the-authentication-ui/java-with-spring-boot

This snippet shows how to add a container element and necessary meta tags to your Thymeleaf template (index.html) for integrating Rollout.io. It includes placeholders for CSRF tokens and links to the JavaScript file.

```html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="_csrf" th:content="${_csrf.token}"/>
    <meta name="_csrf_header" th:content="${_csrf.headerName}"/>
    <title>Spring Rollout Integration</title>
</head>
<body>
    <h1>Your Application</h1>
    <div id="rollout-container"></div>
    <script src="/js/rollout.js"></script>
</body>
</html>
```

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

### Create and Configure Rollout MCP Client (JavaScript)

Source: https://guides.rollout.com/documentation/model-context-protocol-mcp

This function initializes and configures the Rollout MCP client. It sets up an authenticated fetch instance with a Bearer token for authorization and customizes the SSE client transport. The client is named and versioned before connecting to the transport.

```javascript
async function createRolloutMcpClient(rolloutAuthJwt) {
  // Include an Authorization header on each request
  const rolloutRequestInit = {
    headers: { Authorization: `Bearer ${rolloutAuthJwt}` },
  };

  // Modify fetch to use the Rollout fetch init. MCP SDK for Typescript will only
  // pass headers to `POST` request and not the initial
  const rolloutFetch = (...args) => {
    const [input, init] = args;
    const modifiedInit = init
      ? { ...init, ...rolloutRequestInit }
      : rolloutRequestInit;
    return fetch(input, modifiedInit);
  };

  const transport = new SSEClientTransport(ROLLOUT_SSE_URL, {
    eventSourceInit: { fetch: rolloutFetch },
    // Use the Rollout request init on subsequent SSE requests
    requestInit: rolloutRequestInit,
  });

  const client = new Client({
    name: "rollout-client",
    version: "0.0.1",
  });

  await client.connect(transport);

  return client;
}
```

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

### Example Webhook Payload Structure (JSON)

Source: https://guides.rollout.com/documentation/advanced-guides/how-to-use-webhooks

Illustrates the structure of a typical webhook payload, including event details, resource identifiers, and a URI for fetching affected records. This format is common across all entity types.

```json
{
  "eventId": "0197cba6-834f-7000-b5ed-1813cd6efcbe",
  "eventCreated": "2025-07-02T15:19:21+00:00",
  "event": "peopleCreated",
  "resourceIds": [
    "0197cbb0-efe2-7000-9cc2-7b029bcf7a1e",
    "0197cbb1-2a8e-7000-b339-674c58902431",
    "0197cbb1-5816-7000-a3a4-90be8a6057c4"
  ],
  "uri": "https://crm.universal.rollout.com/people?ids=0197cbb0-efe2-7000-9cc2-7b029bcf7a1e,0197cbb1-2a8e-7000-b339-674c58902431,0197cbb1-5816-7000-a3a4-90be8a6057c4"
}
```

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

### Define Rails Route for Token Generation (Ruby)

Source: https://guides.rollout.com/documentation/getting-started/show-the-authentication-ui/ruby-on-rails

This Ruby snippet defines a GET route in `config/routes.rb` that maps the `/rollout-token` URL to the `generate_token` action in the `RolloutController`. This route is used by the frontend JavaScript to fetch the necessary authentication token.

```ruby
# config/routes.rb
get '/rollout-token', to: 'rollout#generate_token'
```

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

### JavaScript: Use MCP Client with Anthropic SDK for Tool Interaction

Source: https://guides.rollout.com/documentation/model-context-protocol-mcp

This JavaScript code demonstrates connecting to Rollout's MCP server and fetching tools, then using the Anthropic SDK to integrate these tools with an AI model. It facilitates scenarios where the AI needs to call external services managed by the MCP.

```javascript
import Anthropic from "@anthropic-ai/sdk";
import { Client } from "@modelcontextprotocol/sdk/client/index.js";
import { SSEClientTransport } from "@modelcontextprotocol/sdk/client/sse.js";

const ROLLOUT_SSE_URL = new URL("https://crm.universal.rollout.com/mcp/sse");
const ROLLOUT_AUTH_TOKEN = "<YOUR ROLLOUT AUTH TOKEN HERE>";
const ANTHROPIC_API_KEY = "<YOUR ANTHROPIC API KEY HERE>";

async function sendQueryWithTools(client) {
  const anthropic = new Anthropic({
    apiKey: ANTHROPIC_API_KEY,
  });

  const messages = [
    {
      role: "user",
      content: "Which leads should I reach out to today?",
    },
  ];

  // Get the list of tools available from the MCP server
  const toolsResponse = await client.listTools();
  const availableTools = toolsResponse.tools.map((t) => ({
    name: t.name,
    description: t.description,
    input_schema: t.inputSchema,
  }));

  // Send user message to the model along with provided tools
  let modelResponse = await anthropic.messages.create({
    model: "claude-3-5-sonnet-20241022",
    max_tokens: 1000,
    messages,
    tools: availableTools,
  });

  for (const content of modelResponse.content) {
    if (content.type === "tool_use") {
      // Make call to MCP server on the model's behalf
      const result = await client.callTool({
        name: content.name,
        arguments: content.input,
      });

      // Provide prior conversation context and tool use result back to the model
      messages.push({
        role: "assistant",
        content: [content],
      });

      messages.push({
        role: "user",
        content: [
          {
            type: "tool_result",
            tool_use_id: content.id,
            content: result.content,
          },
        ],
      });

      // Get next response from the model after tool use
      modelResponse = await anthropic.messages.create({
        model: "claude-3-5-sonnet-20241022",

```

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

### Filter Contacts by Phone Number (GET Request)

Source: https://guides.rollout.com/documentation/advanced-guides/how-to-search-for-contacts-people

This snippet shows how to filter contacts by their phone number using a GET request to the Universal CRM API. The phone number is provided as a query parameter.

```http
GET https://crm.universal.rollout.com/api/people?phone=1234567890
```

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

### Python: Use MCP Client with Anthropic SDK for Tool Interaction

Source: https://guides.rollout.com/documentation/model-context-protocol-mcp

This Python code connects to Rollout's MCP server, fetches available tools, and uses the Anthropic SDK to allow an AI model to call these tools. It handles the interaction flow where the model requests a tool, the tool is executed on the MCP server, and the result is fed back to the model.

```python
import asyncio

from mcp import ClientSession
from mcp.client.sse import sse_client

from anthropic import Anthropic


ROLLOUT_SSE_URL = "https://api.rollout.dev/mcp/sse"
ROLLOUT_AUTH_TOKEN = "<Your token here>"
ANTHROPIC_API_KEY = "<Your API Key here>"

async def send_query_with_tools (session):
    """Process a query using Claude and Rollout's tools"""
    anthropic = Anthropic()
    messages = [
        {
            "role": "user",
            "content": "Which leads should I reach out to today?"
        }
    ]

    # Get the list of tools available from the MCP server
    tools_response = await session.list_tools()
    available_tools = [{
        "name": tool.name,
        "description": tool.description,
        "input_schema": tool.inputSchema
    } for tool in tools_response.tools]

    # Send user message to the model along with provided tools
    model_response = anthropic.messages.create(
        model="claude-3-5-sonnet-20241022",
        max_tokens=1000,
        messages=messages,
        tools=available_tools
    )

    for content in model_response.content:
        if content.type == "tool_use":
            # Make call to MCP server on the model's behalf
            result = await session.call_tool(content.name, content.input)

            # Provide prior conversation context and tool use result back to the model
            messages.append({
                "role": "assistant",
                "content": [content]
            })
            messages.append({
                "role": "user",
                "content": [
                    {
                        "type": "tool_result",
                        "tool_use_id": content.id,
                        "content": result.content
                    }
                ]
            })

            # Get next response from the model after tool use
            model_response = await anthropic.messages.create(
                model="claude-3-5-sonnet-20241022",
                max_tokens=1000,
                messages=messages,
                tools=available_tools
            )

    # Print the final response text
    print(model_response.content[0].text)

async def main():
    headers = { 
        "Authorization": f"Bearer {ROLLOUT_AUTH_TOKEN}",
    }
    async with sse_client(ROLLOUT_SSE_URL, headers=headers) as (read_stream, write_stream):
        async with ClientSession(
            read_stream,
            write_stream,
            message_handler=message_handler
        ) as session:
            await send_query_with_tools(session)

if __name__ == "__main__":
    asyncio.run(main()) 

```

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

### Combine Filters for Contact Search (GET Request)

Source: https://guides.rollout.com/documentation/advanced-guides/how-to-search-for-contacts-people

This snippet demonstrates how to combine multiple filters, such as email and tags, in a single GET request to search for contacts in Universal CRM. Both email and tag filters are case-sensitive.

```http
GET /api/people?email=test@testmail.com&tags=testTag
```

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

### Manage Rollout MCP Client Connection (JavaScript)

Source: https://guides.rollout.com/documentation/model-context-protocol-mcp

This function provides a robust way to manage the lifecycle of a Rollout MCP client. It ensures the client is properly created with authentication and closed after the provided function `fn` has executed, even if errors occur. This pattern is crucial for resource management.

```javascript
async function withRolloutMcpClient(token, fn) {
  const client = await createRolloutMcpClient(token);
  try {
    await fn(client);
  } finally {
    client.close();
  }
}
```

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

### Filter Contacts by Tags (GET Request)

Source: https://guides.rollout.com/documentation/advanced-guides/how-to-search-for-contacts-people

This snippet illustrates how to filter contacts by tags using a GET request to the Universal CRM API. The tag filter is case-sensitive and accepts a tag name as a query parameter.

```http
GET https://crm.universal.rollout.com/api/people?tags=testTag
```

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

### Execute Rollout MCP Client Workflow (JavaScript)

Source: https://guides.rollout.com/documentation/model-context-protocol-mcp

This snippet demonstrates the execution of a workflow using the Rollout MCP client. It calls `withRolloutMcpClient` to manage the client connection and passes the `sendQueryWithTools` function to handle the actual query process. Requires `ROLLOUT_AUTH_TOKEN` to be defined.

```javascript
withRolloutMcpClient(ROLLOUT_AUTH_TOKEN, sendQueryWithTools);
```

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

### Filter Contacts by Email (GET Request)

Source: https://guides.rollout.com/documentation/advanced-guides/how-to-search-for-contacts-people

This snippet demonstrates how to filter contacts by their email address using a GET request to the Universal CRM API. The email filter is case-sensitive. The request takes the email address as a query parameter.

```http
GET https://crm.universal.rollout.com/api/people?email=test@testmail.com
```

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

### Send Query with Tools using Rollout MCP Client (JavaScript)

Source: https://guides.rollout.com/documentation/model-context-protocol-mcp

This function sends a query to the Rollout MCP client along with available tools. It constructs the request with specific parameters and handles the model's response, logging the final text content. Dependencies include the MCP client and potentially other tool definitions.

```javascript
async function sendQueryWithTools(client) {
      const modelResponse = await client. 
          model.sendMessage({
        max_tokens: 1000,
        messages,
        tools: availableTools,
      });
    }

    // Print the final response text
    console.log(modelResponse.content[0].text);
```

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

### GET /email-threads/{id}

Source: https://guides.rollout.com/email-reference

Retrieves a specific email thread by its ID.

```APIDOC
## GET /email-threads/{id}

### Description
Retrieves a specific email thread by its ID.

### Method
GET

### Endpoint
/email-threads/{id}

### Parameters
#### Path Parameters
- **id** (string) - Required - The unique identifier of the email thread to retrieve.

### Request Example
```bash
curl 'https://email.universal.rollout.com/api/email-threads/{id}'
```

### Response
#### Success Response (200)
- **id** (string) - The unique identifier for the email thread.
- **lastMessageAt** (string) - The timestamp of the last message in the thread.
- **originalIds** (object) - A mapping of original message IDs.
- **original** (object) - Details of the original email message.

#### Response Example
```json
{
  "id": "string",
  "lastMessageAt": "string",
  "originalIds": {
    "^(.*)$": 1
  },
  "original": {
    "^(.*)$": {
      "^(.*)$": null
    }
  }
}
```
```

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

### GET /users/{id}

Source: https://guides.rollout.com/los-reference

Retrieves detailed information for a specific user by their ID.

```APIDOC
## GET /users/{id}

### Description
Retrieves detailed information for a specific user by their ID.

### Method
GET

### Endpoint
/users/{id}

### Parameters
#### Path Parameters
- **id** (string) - Required - The unique identifier of the user.

### Request Example
```bash
curl 'https://los.universal.rollout.com/api/users/{id}'
```

### Response
#### Success Response (200)
- **id** (string) - The user's unique identifier.
- **firstName** (string) - The user's first name.
- **lastName** (string) - The user's last name.
- **email** (string) - The user's email address.
- **phone** (string) - The user's phone number.
- **role** (string) - The user's role.
- **status** (string) - The user's status.
- **timezone** (string) - The user's timezone.
- **created** (string) - Timestamp of when the user was created.
- **updated** (string) - Timestamp of when the user was last updated.
- **rolloutUpdated** (string) - Timestamp of when the user was last updated in Rollout.
- **originalIds** (object) - Original IDs associated with the user.
- **original** (object) - Original user data.
- **teamId** (string) - The ID of the team the user belongs to.
- **address** (object) - The user's address details.
  - **type** (string) - The type of address.
  - **street** (string) - The street address.
  - **city** (string) - The city.
  - **state** (string) - The state.
  - **code** (string) - The postal code.
  - **country** (string) - The country.
- **username** (string) - The user's username.
- **type** (string) - The type of user.
- **offices** (array of objects) - A list of offices the user is associated with.
  - **id** (string) - The ID of the office.

#### Response Example
```json
{
  "id": "string",
  "firstName": "string",
  "lastName": "string",
  "email": "string",
  "phone": "string",
  "role": "string",
  "status": "string",
  "timezone": "string",
  "created": "string",
  "updated": "string",
  "rolloutUpdated": "string",
  "originalIds": {
    "^(.*)$": 1
  },
  "original": {
    "^(.*)$": {
      "^(.*)$": null
    }
  },
  "teamId": "string",
  "address": {
    "type": "string",
    "street": "string",
    "city": "string",
    "state": "string",
    "code": "string",
    "country": "string"
  },
  "username": "string",
  "type": "string",
  "offices": [
    {
      "id": "string"
    }
  ]
}
```
```

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

### GET /people

Source: https://guides.rollout.com/tms-reference

Retrieves a list of people from the system. Supports pagination and filtering through query parameters.

```APIDOC
## GET /people

### Description
Retrieves a list of people from the system. Supports pagination and filtering through query parameters.

### Method
GET

### Endpoint
/people

### Parameters
#### Query Parameters
- **next** (string) - Optional - A token for fetching the next page of results.
- **offset** (string) - Optional - The number of records to skip.
- **limit** (string) - Optional - The maximum number of records to return.

### Response
#### Success Response (200)
- (Array of person objects) - Returns an array of person objects matching the query.

#### Response Example
```json
[
  {
    "id": "string",
    "name": "string",
    "firstName": "string",
    "lastName": "string",
    "assignedUserId": "string",
    "assignedPondId": "string",
    "officeId": "string",
    "timeframeId": "string",
    "stage": "string",
    "stageId": "string",
    "tags": [
      "string"
    ],
    "originalIds": {
      "^(.*)$": 1
    },
    "original": {
      "^(.*)$": {
        "^(.*)$": null
      }
    },
    "created": "string",
    "updated": "string",
    "rolloutUpdated": "string",
    "addresses": [
      {
        "type": "string",
        "street": "string",
        "city": "string",
        "state": "string",
        "code": "string",
        "country": ""
      }
    ],
    "emails": [
      {
        "value": "string",
        "type": "string",
        "status": "string",
        "isPrimary": true
      }
    ],
    "phones": [
      {
        "value": "string",
        "type": "string",
        "status": "string",
        "isPrimary": true
      }
    ],
    "source": "string",
    "sourceId": "string",
    "systemSource": "string",
    "averageBeds": 1,
    "averagePrice": 1,
    "birthday": "string",
    "lastActivity": "string",
    "lastActivityType": "string",
    "contactTypes": [
      "string"
    ],
    "jobTitle": "string",
    "companyName": "string",
    "communicationsConsent": {
      "email": true,
      "call": true,
      "text": true,
      "massEmail": true,
      "postalMail": true,
      "visit": true
    }
  }
]
```
```

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

### GET /email-threads

Source: https://guides.rollout.com/email-reference

Retrieves a list of email threads. Supports pagination with `next`, `offset`, and `limit` query parameters.

```APIDOC
## GET /email-threads

### Description
Retrieves a list of email threads. Supports pagination with `next`, `offset`, and `limit` query parameters.

### Method
GET

### Endpoint
/email-threads

### Parameters
#### Query Parameters
- **next** (string) - Optional - Used for pagination.
- **offset** (string) - Optional - Numeric offset for pagination. Defaults to '0'.
- **limit** (number) - Optional - The maximum number of results to return.

### Request Example
```bash
curl 'https://email.universal.rollout.com/api/email-threads?next=&offset=0&limit=1'
```

### Response
#### Success Response (200)
- **email-threads** (array) - An array of email thread objects.
  - **id** (string) - The unique identifier for the email thread.
  - **lastMessageAt** (string) - The timestamp of the last message in the thread.
  - **originalIds** (object) - A mapping of original message IDs.
  - **original** (object) - Details of the original email message.

#### Response Example
```json
{
  "email-threads": [
    {
      "id": "string",
      "lastMessageAt": "string",
      "originalIds": {
        "^(.*)$": 1
      },
      "original": {
        "^(.*)$": {
          "^(.*)$": null
        }
      }
    }
  ]
}
```
```

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

### Get Credentials API

Source: https://guides.rollout.com/documentation/getting-started/making-api-requests

Retrieves credential IDs for a user from the Rollout API. Requires an Authorization header.

```APIDOC
## GET /api/credentials

### Description
Retrieves credential IDs for a user from the Rollout API.

### Method
GET

### Endpoint
https://universal.rollout.com/api/credentials

### Headers
- **Authorization** (string) - Required - Bearer token for authentication.

### Response
#### Success Response (200)
- **credentials** (array) - List of credential objects, each with an 'id' field.

#### Response Example
```json
[
  {
    "id": "credential_id_1"
  },
  {
    "id": "credential_id_2"
  }
]
```
```

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

### JavaScript Initialization for Rollout

Source: https://guides.rollout.com/documentation/getting-started/show-the-authentication-ui/python-with-django

This JavaScript code initializes Rollout.io components on DOMContentLoaded. It fetches a token from a Django backend, dynamically loads the Rollout bundle, and renders the RolloutLinkProvider with CredentialsManager.

```javascript
document.addEventListener('DOMContentLoaded', function() {
  const container = document.getElementById('rollout-container');
  
  // Get CSRF token for Django
  const csrftoken = document.querySelector('[name=csrfmiddlewaretoken]').value;
  
  fetch('/rollout-token/', {
    headers: {
      'Content-Type': 'application/json',
      'X-CSRFToken': csrftoken
    }
  })
  .then(response => response.json())
  .then(data => {
    const token = data.token;
    
    // Add required styles
    const styleLink = document.createElement('link');
    styleLink.rel = 'stylesheet';
    styleLink.href = 'https://esm.sh/@rollout/link-react@latest/dist/style.css';
    document.body.appendChild(styleLink);

    // Dynamically load Rollout bundle
    import(/* webpackIgnore: true */ 'https://esm.sh/@rollout/link-react@latest?bundle=all').then(
      ({ RolloutLinkProvider, CredentialsManager, createElement, createRoot }) => {
        const root = createRoot(container);
        
        root.render(
          createElement(
            RolloutLinkProvider,
            { token },
            createElement(CredentialsManager)
          )
        );
      }
    );
  });
});
```

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

### Initialize Rollout JavaScript with Token Fetching (JavaScript)

Source: https://guides.rollout.com/documentation/getting-started/show-the-authentication-ui/ruby-on-rails

This JavaScript code initializes the Rollout interface by fetching a token from the Rails backend. It dynamically loads the Rollout bundle from esm.sh, adds necessary styles, and renders the Rollout components within the specified container. It requires the `DOMContentLoaded` event to be fired.

```javascript
// app/javascript/packs/rollout.js
document.addEventListener('DOMContentLoaded', function() {
  const container = document.getElementById('rollout-container');
  
  // Fetch token from Rails backend
  fetch('/rollout-token', {
    headers: {
      'Content-Type': 'application/json',
      'X-CSRF-Token': document.querySelector("[name='csrf-token']").content
    }
  })
  .then(response => response.json())
  .then(data => {
    const token = data.token;
    
    // Add required styles
    const styleLink = document.createElement('link');
    styleLink.rel = 'stylesheet';
    styleLink.href = 'https://esm.sh/@rollout/link-react@latest/dist/style.css';
    document.body.appendChild(styleLink);

    // Dynamically load Rollout bundle
    import(/* webpackIgnore: true */ 'https://esm.sh/@rollout/link-react@latest?bundle=all').then(
      ({ RolloutLinkProvider, CredentialsManager, createElement, createRoot }) => {
        const root = createRoot(container);
        
        root.render(
          createElement(
            RolloutLinkProvider,
            { token },
            createElement(CredentialsManager)
          )
        );
      }
    );
  });
});
```

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

### Search Contacts API

Source: https://guides.rollout.com/documentation/advanced-guides/how-to-search-for-contacts-people

This endpoint allows you to search for contacts by filtering on email, phone number, or tags. Searches are performed using GET requests with query parameters. Filters can be combined.

```APIDOC
## GET /api/people

### Description
Allows searching for contacts (people) by filtering on email, phone number, or tags. Multiple filters can be combined.

### Method
GET

### Endpoint
https://crm.universal.rollout.com/api/people

### Parameters
#### Query Parameters
- **email** (string) - Optional - Filters contacts by email address. This filter is case-sensitive.
- **phone** (string) - Optional - Filters contacts by phone number.
- **tags** (string) - Optional - Filters contacts by tags. This filter is case-sensitive.

### Request Example
```json
{
  "request": "GET /api/people?email=test@testmail.com&tags=testTag"
}
```

### Response
#### Success Response (200)
- **people** (array) - An array of contact objects matching the filter criteria.

#### Response Example
```json
{
  "response": [
    {
      "id": "1",
      "name": "John Doe",
      "email": "test@testmail.com",
      "phone": "1234567890",
      "tags": ["testTag", "customer"]
    }
  ]
}
```
```