Ecosystem Components

Ecosystem Components are two Seam Components that show data from the Seam Ecosystem on your own website: the apps that work with Seam, and the device models that Seam supports. Use them on a manufacturer’s product page to list the apps a lock works with, or on an app’s integrations page to list the devices its customers can connect.

Compatible Apps

<seam-compatible-apps> lists the apps that work with a device category, manufacturer, provider, or capability through Seam.

Supported Devices

<seam-supported-devices> lists device models with capability checks, provider requirements, compatible accessories, search, and filters.

Unlike the other Seam Components, Ecosystem Components do not need a publishable key, a client session token, or a Seam workspace. They read public data only, and they authenticate with an embed key. Both components ship in @seamapi/react 5.1.0 and later. Try them with sample data in the interactive component library.

Before You Begin

To embed the components, you need an embed key. Embed keys start with eco_live_. Create one yourself in Seam Console: go to Organization settings > Partner profile > Keys, then select Create embed key and enter the origins you embed on. Console also shows a ready-to-paste snippet for your key. You can edit the origins later without changing the key. Your Console organization must be linked to the app (partner) or device manufacturer it represents. If it isn’t linked yet, email support@getseam.com. Manufacturer keys are available once Seam has confirmed that your organization represents the manufacturer.

Enter full origins, including the scheme and any non-default port, not bare hostnames. Seam matches them against the browser’s Origin header, so example.com matches nothing while https://example.com matches. Include every environment you embed on:

https://www.example.com
https://staging.example.com
https://*.preview.example.com

Wildcards are supported, so https://*.preview.example.com covers your preview subdomains. Seam adds http://localhost and http://127.0.0.1 on any port to every key, so the components also work on your development server.

How the Embed Key Works

An embed key is not a Seam API key and carries no account access. It identifies your embed, and it only works on the origins registered for it.

A request from a registered origin succeeds.
A request from any other origin fails with 403 origin_not_allowed.
Matching is on the whole origin, scheme included. https://example.com and http://example.com are different origins, and so are https://example.com and https://www.example.com.

Because of this, the key is safe to include in your page’s HTML, where anyone can read it. Someone who copies it cannot use it on their own site. What the key does also depends on who it belongs to:

Manufacturer key: Supported Devices defaults to your brand’s devices, so you can drop it on a product page without any other attributes.
App (partner) key: Supported Devices hides the manufacturers, device types, and providers you have told Seam you do not support.

To add or remove origins later, select Edit on the key in Console’s Keys screen. The key itself doesn’t change, so your pages keep working without an update. The new origins take effect within a minute, and the components stop loading on any origin you remove. Manufacturers can also read the same data from their own servers with a secret key. See the Manufacturer API and Keys and Authentication.

Add the Components to Your Site

Plain HTML
React
Vue
Angular

Load ecosystem.js from the Seam CDN, then place the elements anywhere on the page.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Works with Seam</title>
    <script
      type="module"
      src="https://react.seam.co/v/5.3.2/dist/ecosystem.js"
    ></script>
  </head>
  <body>
    <seam-supported-devices
      embed-key="eco_live_your_embed_key"
      manufacturer="schlage"
    ></seam-supported-devices>

    <seam-compatible-apps
      embed-key="eco_live_your_embed_key"
      device-type="smartlock"
      manufacturer="schlage"
    ></seam-compatible-apps>
  </body>
</html>

ecosystem.js contains only the two Ecosystem Components, without the Seam API client, so it stays small (about 66 kB gzipped). If your page already loads elements.js for other Seam Components, it defines these elements too, so you do not need both.Pin an explicit version in production so a new release cannot change your page unexpectedly. To upgrade, change the version in the URL. See the releases for available versions.Boolean attributes work with or without a value: hide-search and hide-search="true" are equivalent, and hide-search="false" turns the option off.

Install @seamapi/react:

npm install --save @seamapi/react

Wrap the components in an EcosystemProvider and pass your embed key:

import {
  CompatibleApps,
  EcosystemProvider,
  SupportedDevices,
} from '@seamapi/react'

export function ProductPage() {
  return (
    <EcosystemProvider embedKey='eco_live_your_embed_key'>
      <SupportedDevices manufacturer='schlage' />
      <CompatibleApps deviceType='smartlock' manufacturer='schlage' />
    </EcosystemProvider>
  )
}

EcosystemProvider does not need a publishable key and does not load the Seam API client. If your app already renders a SeamProvider for other Seam Components, pass embedKey to it instead of adding an EcosystemProvider:

<SeamProvider publishableKey='your_publishable_key' embedKey='eco_live_your_embed_key'>
  <SupportedDevices manufacturer='schlage' />
</SeamProvider>

Seam Components are client components. In the Next.js App Router, add the "use client" directive to the files that render them.

Install @seamapi/react and import the Ecosystem elements in your entry file, for example src/main.js:

npm install --save @seamapi/react

import '@seamapi/react/ecosystem.js'

Tell the Vue compiler that seam- tags are custom elements, not Vue components. With Vite, set isCustomElement in vite.config.js:

import vue from '@vitejs/plugin-vue'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    vue({
      template: {
        compilerOptions: {
          isCustomElement: (tag) => tag.startsWith('seam-'),
        },
      },
    }),
  ],
})

Then use the elements in your templates with kebab-case attributes:

<template>
  <seam-compatible-apps
    :embed-key="embedKey"
    device-type="smartlock"
    manufacturer="schlage"
  ></seam-compatible-apps>
</template>

See Vue and Web Components for other build setups.

Install @seamapi/react and import the Ecosystem elements in src/main.ts:

npm install --save @seamapi/react

import '@seamapi/react/ecosystem.js'

Add CUSTOM_ELEMENTS_SCHEMA to every component (or NgModule) whose template uses a seam- element:

import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'

@Component({
  selector: 'app-product-page',
  standalone: true,
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  template: `
    <seam-supported-devices
      [attr.embed-key]="embedKey"
      manufacturer="schlage"
    ></seam-supported-devices>
  `,
})
export class ProductPageComponent {
  embedKey = 'eco_live_your_embed_key'
}

Use [attr.embed-key] (with the attr. prefix) to bind a value from your component to an attribute.

Shared Attributes

Both components accept these attributes in addition to their own. In React, use the camel-cased prop name on EcosystemProvider (or SeamProvider), except for className, which goes on the component itself.

Attribute	React prop	Description
`embed-key`	`embedKey`	Your embed key (`eco_live_…`).
`theme`	`theme`	`light` (default), `dark`, or `auto`. See Dark Mode. Set on each component.
`class-name`	`className`	A class name added to the component’s container element.
`disable-css-injection`	`disableCssInjection`	Do not load the component stylesheet from the Seam CDN. See Styles and Fonts.
`disable-font-injection`	`disableFontInjection`	Do not load the Source Sans Pro font from Google Fonts.
`ecosystem-endpoint`	`ecosystemEndpoint`	The Seam Ecosystem API endpoint. Defaults to `https://ecosystem.seam.co/v1/`. Only change this if you proxy the API.

Dark Mode

Set theme on each component:

light (default) always renders the light theme.
dark always renders the dark theme.
auto follows the visitor’s operating system or browser color scheme (prefers-color-scheme).

<seam-compatible-apps
  embed-key="eco_live_your_embed_key"
  device-type="smartlock"
  theme="auto"
></seam-compatible-apps>

If your site has its own theme toggle, set theme to light or dark from it instead of using auto. The components use a light-on-dark logo variant in the dark theme when one is available.

Styles and Fonts

By default, each component adds two stylesheets to the page’s <head>: the Seam Components CSS from https://react.seam.co and the Source Sans Pro font from Google Fonts. The components fall back to your system sans-serif font if the font does not load. To host the CSS yourself, set disable-css-injection and either import it with your bundler or link to it, matching the version you load:

import '@seamapi/react/index.css'

<link
  rel="stylesheet"
  href="https://react.seam.co/v/5.3.2/dist/index.min.css"
/>

The components render in your page’s DOM, not in a shadow root, and their class names start with seam-. Use class-name to add your own class to a component’s container. The seam- class names themselves are not a stable API and may change between releases.

Content Security Policy

If your site sets a Content Security Policy (CSP), allow the following sources:

Directive	Source	Needed for
`script-src`	`https://react.seam.co`	Loading `ecosystem.js` or `elements.js` from the Seam CDN. Not needed if you bundle `@seamapi/react` yourself.
`connect-src`	`https://ecosystem.seam.co`	Fetching apps and device models from the Seam Ecosystem API.
`img-src`	`https://seam-ecosystem-media.fly.storage.tigris.dev`	App logos, manufacturer logos, and device images.
`style-src`	`https://react.seam.co`	The injected component stylesheet. Not needed with `disable-css-injection`.
`style-src`	`https://fonts.googleapis.com`	The injected font stylesheet. Not needed with `disable-font-injection`.
`font-src`	`https://fonts.gstatic.com`	The font files. Not needed with `disable-font-injection`.

For example, with the default settings:

script-src 'self' https://react.seam.co;
connect-src 'self' https://ecosystem.seam.co;
img-src 'self' https://seam-ecosystem-media.fly.storage.tigris.dev;
style-src 'self' https://react.seam.co https://fonts.googleapis.com;
font-src 'self' https://fonts.gstatic.com

Troubleshooting

When a request fails, the component shows a message in place of the list. The Seam Ecosystem API returns an error type that you can see in your browser’s network tab.

An embed key is required to show this list on this website

The API returned 401 embed_key_required. The component has no embed-key, and the page is not on a Seam-owned domain. Add embed-key to the element, or embedKey to the provider in React.

The embed key is invalid or has been revoked

The API returned 401 invalid_embed_key. Check for a truncated or misquoted value, and confirm you are using an eco_live_ embed key rather than a Seam publishable key or API key. If the key was revoked, create a new one in Console.

The embed key is not allowed on this website

The API returned 403 origin_not_allowed. The origin serving the page is not registered for your key. Check the scheme, the www. prefix, and the port. To add an origin, select Edit on the key in Console and add it. The key doesn’t change.

Nothing renders at all

Confirm that the script tag includes type="module" and that the CDN URL loads. Custom elements upgrade once their definition loads, so a blocked or misspelled script URL leaves the element on the page with nothing inside it. If your site sets a CSP, check the browser console for blocked requests and see Content Security Policy.

The component renders without styles

The stylesheet from https://react.seam.co did not load. Allow it in your CSP’s style-src, or set disable-css-injection and load the CSS yourself.

An app or device is missing, or its details look wrong

The components show live data from the Seam Ecosystem. To report a missing app or device, or incorrect details, email support@getseam.com.

Next Steps

Set up Compatible Apps or Supported Devices.
Try both components with sample data in the interactive component library.
Run the plain HTML sample app.

If you have questions or want to report an issue, email support@getseam.com.

Getting Started

Use Cases

Core Concepts

Capability Guides

UI Components

Developer Tools

Industry Guides

Device Manufacturer Guidance

Low-Level APIs

Ecosystem Components

Compatible Apps

Supported Devices

Before You Begin

How the Embed Key Works

Add the Components to Your Site

Shared Attributes

Dark Mode

Styles and Fonts

Content Security Policy

Troubleshooting

Next Steps

Compatible Apps

Supported Devices

​Before You Begin

​How the Embed Key Works

​Add the Components to Your Site

​Shared Attributes

​Dark Mode

​Styles and Fonts

​Content Security Policy

​Troubleshooting

​Next Steps

Before You Begin

How the Embed Key Works

Add the Components to Your Site

Shared Attributes

Dark Mode

Styles and Fonts

Content Security Policy

Troubleshooting

Next Steps