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

Use your AI coding assistant with StreamLayer's current documentation and the integration skill for your platform. Start with the documentation connection, then make a small integration change and validate it in your app.

Recommended Workflow

  1. Connect your AI coding assistant and verify that it can search and fetch StreamLayer docs. The shared setup page covers Cursor, Codex, Claude Code, GitHub Copilot in VS Code, and other MCP clients.
  2. Choose your SDK platform below. Ask the assistant to fetch the platform's integration guide and integration skill before writing code.
  3. Give it your app's platform, framework, existing SDK version (if any), player, and the feature you want to add. Use the starter prompt below or the prompt on your platform's getting-started page.
  4. Review the proposed setup and the resulting diff. Resolve missing or conflicting documentation before accepting invented APIs or changing dependency versions.
  5. Build and run the app, activate test content, and check the result using your platform's test-integration guide. A connected MCP server alone does not prove the integration works.

Start an integration

Replace the bracketed details before sending this prompt:

Integrate [StreamLayer feature] into my existing [platform/framework] app
with [player] and [SDK version, if already installed].
Use the streamlayer-docs MCP to search for and fetch my platform's integration
guide and integration skill. If search misses the skill, read its link from this
guide with your web tools or ask me to copy the page into the session.
Cite the pages and confirm prerequisites first.
Then make the smallest documented change that preserves my player and app structure.
Use placeholders for SDK API Key and event values in examples, and follow the
platform's existing configuration and authentication patterns.
Do not invent APIs or upgrade dependencies to resolve unclear documentation.
If the docs are missing or conflict, explain what needs confirmation.
Finish with the changed files, checks run, and remaining device/runtime tests.

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.
  • Roku (streamlayer-roku-integration) — conventions for the StreamLayer Roku SDK (BrightScript / SceneGraph, the SLSDK module and SLView) in an existing Roku channel. See the Roku Integration Skill page.

Ask the assistant to fetch the skill page and follow its instructions. If MCP search does not return it, use the direct link above with the assistant's web tools or copy the page into the session. Naming a skill does not install it automatically.

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

  • Read it through MCP — Ask the assistant to search for and fetch the skill page before editing code. This works without installing a local skill.
  • Install it for repeated use — Follow your assistant's supported skill or project-rule format. Keep a link to the published skill and review it when upgrading the SDK; copying a page into a repository alone does not guarantee the assistant will load it.

SDK API Key and private credentials

The SDK API Key is a public, client-side value. Follow your platform's documented configuration pattern: an app constant or existing configuration is appropriate where the guide supports it. React Native uses its documented react-native-config / .env mechanism. Do not add a new secrets system just to hold the SDK API Key.

Private backend credentials and user authentication tokens are different. Do not paste real credentials or tokens into prompts or commit them to source. Keep the documented authentication flow and your existing secure handling in place. Use placeholders such as SL_SDK_KEY_HERE, SL_EVENT_ID_HERE, and USER_AUTH_TOKEN_HERE when discussing examples with the assistant. Replace SL_SDK_KEY_HERE and SL_EVENT_ID_HERE with your values when you review the diff. Never replace USER_AUTH_TOKEN_HERE with a literal; the assistant should wire it to your app's existing authentication flow.

For iOS and tvOS, install StreamLayer with Swift Package Manager. Existing CocoaPods projects can add the SPM dependency alongside their pods; StreamLayer is not distributed as a CocoaPods library. Follow the iOS Integration Guide and tvOS Getting Started for the details.

Other ways to read the docs

If your assistant cannot use MCP, give it the relevant guide or the documentation index. You can also use the page's copy or open-in-agent controls where available. Ask it to cite the platform pages it actually read.

Use Ask AI in the docs for focused questions, then pass the answer and its sources to your coding assistant. Include your platform and SDK version. For example: “For my tvOS SDK version, what setup and player callbacks are required for pause ads?” Check the cited guide before changing code.

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.
  • Kept user tokens and other credentials out of source, and handled the SDK API Key as the platform skill documents.
  • 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 7 days ago