Guides

Integrate with an AI Agent

Use the streamlayer-docs MCP and your platform's integration skill to have an AI coding agent integrate any StreamLayer SDK with small, reviewable diffs.

Integrate with an AI Agent

You can use an AI coding agent to integrate any StreamLayer SDK — Web, iOS, Android, TV, or Roku — into your app. The workflow is the same on every platform: give the agent live access to the StreamLayer docs through the streamlayer-docs MCP, add your platform's integration skill, then prompt it directly. This keeps the agent grounded in current documentation and produces a small, reviewable diff instead of a black-box rewrite.

The streamlayer-docs MCP covers every StreamLayer SDK. Integration skills are per platform — StreamLayer publishes one for each SDK. The Web/TV React, iOS, tvOS, Android, Android TV, and React Native skills are available today; the skill for Roku is being added.

Recommended Workflow

  1. Connect the streamlayer-docs MCP to your agent (see Connect ReadMe MCP).
  2. Add your platform's integration skill, if one is published (see Use an Integration Skill).
  3. Prompt the agent directly, naming the docs MCP and the skill.
  4. Review the diff before accepting it.
  5. Run the app and check that StreamLayer loads without build, console, or runtime errors.

The direct prompt shape:

integrate <feature/package> from StreamLayer to my project —
use the streamlayer-docs skill and MCP, also use the StreamLayer integration skill for my platform

Working examples (Web/TV, using the streamlayer-web-integration skill):

integrate @streamlayer/web-os to my project —
use the streamlayer-docs skill and MCP, also use the streamlayer-web-integration skill
integrate Exposed Pause Ad from @streamlayer/react to my project —
use the streamlayer-docs skill and MCP, also use the streamlayer-web-integration skill

Working examples (iOS and tvOS):

integrate the StreamLayer iOS SDK into my UIKit app —
use the streamlayer-docs skill and MCP, also use the streamlayer-ios-integration skill
integrate the StreamLayer tvOS SDK into my Apple TV app —
use the streamlayer-docs skill and MCP, also use the streamlayer-tvos-integration skill

Working examples (Android and Android TV):

integrate the StreamLayer Android SDK into my Android app —
use the streamlayer-docs skill and MCP, also use the streamlayer-android-integration skill
integrate the StreamLayer SDK into my Android TV app —
use the streamlayer-docs skill and MCP, also use the streamlayer-androidtv-integration skill

Working examples (React Native and Expo):

integrate the StreamLayer React Native SDK into my React Native app —
use the streamlayer-docs skill and MCP, also use the streamlayer-react-native-integration skill
integrate the StreamLayer SDK into my Expo app —
use the streamlayer-docs skill and MCP, also use the streamlayer-react-native-integration skill

Give the Agent Documentation Context

Before the agent writes code, make sure it can read the StreamLayer docs. This helps prevent invented APIs, wrong imports, outdated setup steps, and unnecessary rewrites.

You can use one of these options:

  • ReadMe MCP — Recommended. Connect your agent to the streamlayer-docs MCP so it can search and read documentation on demand while it works. This is what the direct prompt above relies on, and it works for every StreamLayer SDK.
  • Integration skill — Platform-specific conventions that keep the agent's diff small and correct. Use the one for your platform if it's published (Web/TV is available now). See Use an Integration Skill.
  • llms.txt — The docs publish a machine-readable index at https://docs.streamlayer.io/llms.txt. Give this URL to agents that can fetch documentation from the web but do not support MCP.
  • Open in agent buttons — Use Copy page, Open in ChatGPT, or Open in Claude at the top of a docs page to pass the page contents directly to an agent.
  • Ask AI in the docs — Get quick grounded answers to integration questions you can hand to your agent. See Get Quick Answers with Ask AI.

Connect ReadMe MCP

The MCP endpoint is:

https://docs.streamlayer.io/mcp

Claude Code CLI:

claude mcp add --transport http streamlayer-docs https://docs.streamlayer.io/mcp

Cursor, Claude Desktop, and other MCP clients:

{
  "mcpServers": {
    "streamlayer-docs": {
      "url": "https://docs.streamlayer.io/mcp"
    }
  }
}

If your client only supports stdio servers, bridge to the remote endpoint with mcp-remote:

{
  "mcpServers": {
    "streamlayer-docs": {
      "command": "npx",
      "args": ["-y", "mcp-remote", "https://docs.streamlayer.io/mcp"]
    }
  }
}

After connecting docs access, test it with a simple question:

Search the StreamLayer docs and list the setup steps for the SDK platform used in this project.

If the agent cannot answer from the docs, use Ask AI or copy the relevant docs page manually.

Use an Integration Skill

An integration skill is a set of conventions for one platform's SDK — where to initialize the SDK, where to place the StreamLayer Element, what to memoize or manage across the lifecycle, and how to keep the change minimal. It captures the platform's rules for a clean integration, separate from the API reference in the docs, so the agent's diff stays small and correct.

StreamLayer publishes an integration skill per platform. Available now:

  • Web/TV React (streamlayer-web-integration) — conventions for @streamlayer/react (browser) and @streamlayer/web-os (TV). See the Web/TV Integration Skill page.
  • iOS (streamlayer-ios-integration) — conventions for the StreamLayer iOS SDK (import StreamLayerSDK) in a UIKit app. See the iOS Integration Skill page.
  • tvOS (streamlayer-tvos-integration) — conventions for the StreamLayer tvOS SDK (import StreamLayerSDKTVOS) in an Apple TV app. See the tvOS Integration Skill page.
  • Android (streamlayer-android-integration) — conventions for the StreamLayer Android SDK (io.streamlayer:androidsdk) in an existing Android app. See the Android Integration Skill page.
  • Android TV (streamlayer-androidtv-integration) — conventions for the StreamLayer GoogleTV/AndroidTV SDK in an existing TV app. See the Android TV Integration Skill page.
  • React Native (streamlayer-react-native-integration) — conventions for the StreamLayer React Native SDK (react-native-sl-sdk, New Architecture) in an existing React Native or Expo app. See the React Native Integration Skill page.

The skill for the remaining platform (Roku) is being added. If your platform's skill isn't published yet, the streamlayer-docs MCP alone still grounds the agent in the correct docs — just drop the skill reference from the prompt.

Make a skill available to your agent in one of two ways:

  • Reference it in the prompt — Name it in your prompt as shown above. When the docs MCP is connected, the agent can read the skill from the docs.
  • Add it to your repo — If your agent supports repo-level skills or rules, drop the skill into your project so it applies to every StreamLayer prompt.

Get Quick Answers with Ask AI

Ask AI in the docs is a helper, not the main integration path. Use it to get quick, grounded answers to specific integration questions — then hand those answers to your agent. It answers many common questions, but the skill + MCP flow above is what reproduces the tested integration.

Examples:

How do I authenticate users with the StreamLayer SDK?
What are the required configuration values for a StreamLayer SDK integration?
How do I render StreamLayer interactive elements with my existing playback experience?
How do I add StreamLayer advertising units to my app?

For a fuller answer you can paste into your agent, include your platform and app details:

I have a [Web / iOS / Android / React Native] app with an existing player and a logged-in user session. How should I integrate StreamLayer, forward authentication, and render the interactive element on this platform?

Protect Secrets

Do not paste production secrets, private API keys, user tokens, or credentials into an AI agent.

Use placeholders such as:

SL_SDK_KEY_HERE
SL_EVENT_ID_HERE
USER_AUTH_TOKEN_HERE

If a value must be configured at runtime, ask the agent to read it from your existing configuration system or environment variables instead of hardcoding it.

Review the Agent's Output

Before accepting the diff, check that the agent:

  • Followed the correct platform-specific StreamLayer docs.
  • Made a small, reviewable change.
  • Used the official StreamLayer package, component, module, or SDK names from the docs.
  • Added only the setup code required by the docs.
  • Preserved your existing player, playback screen, and app architecture.
  • Used placeholders or existing configuration for keys, event IDs, and auth values.
  • Did not invent APIs, global objects, adapters, or configuration fields.
  • Did not add unrelated libraries or large refactors.

If the change is too large, reject it and ask the agent to retry with a smaller diff.

Common Mistakes

AI agents can make confident but incorrect SDK changes. Watch for these issues:

  • Invented APIs. If the agent creates StreamLayer methods, options, modules, or global objects that are not in the docs, make it re-read the relevant page.
  • Wrong platform. Make sure the agent follows the docs for your actual SDK platform, not a different platform.
  • Missing required setup. Agents often skip imports, initialization steps, permissions, configuration values, or authentication setup.
  • Wrong authentication flow. If your app has logged-in users, the agent should follow the documented auth-forwarding flow. If your app has no auth system, it should follow the documented anonymous or guest flow, if available for your platform.
  • Multiple SDK roots. If the docs require a single provider, manager, or SDK root, make sure the agent does not initialize multiple independent instances by mistake.
  • Ignoring platform conventions. Each SDK has its own rules — for example, memoizing every prop on Web/TV, or correct lifecycle placement on mobile. Follow your platform's integration skill; skipping these causes flicker, refetch loops, or leaks.
  • Hidden or unmounted UI. Avoid hiding required SDK UI or root components with CSS or platform-specific layout tricks unless the docs explicitly support that approach.
  • Unnecessary rewrites. A StreamLayer integration should usually fit around your existing playback experience and app structure. It should not replace major parts of your app unless you asked for that.

Related

Updated 15 days ago