Supported Devices

<seam-supported-devices /> (preview)

Supported Devices shows the device models that work with Seam, grouped by manufacturer. A manufacturer can put it on a product page to show which of its models work with Seam, and an app can put it on an integrations page to show which devices its customers can connect. Each manufacturer section shows the manufacturer’s logo and its device models. Each model shows:

A compact row with a device image, model name, and supported capabilities.
Green checks for capabilities with no additional requirements listed, and amber information icons for capabilities that require additional setup.
Pills summarizing accessory, subscription, legal, or other requirements.

Expand a row to see model numbers, hardware details, color photos, and available providers. Each provider has a capability table that separates support from requirements. Specific compatible bridges and keypads appear below the requirement explanations, with photos and links to their device pages. Providers without a live Seam integration appear last with a Not supported label and a Request Integration link. Visitors can search by model name, model number, manufacturer, device type, or provider. Capability filters use checkboxes: a device must support every selected capability to remain in the list. Manufacturer and device type filters appear when there is more than one option and you have not fixed the value with an attribute. When the list spans several manufacturers, each section shows five models with a button to show the rest.

Add Supported Devices to Your Page

<script
  type="module"
  src="https://react.seam.co/v/5.3.2/dist/ecosystem.js"
></script>

<seam-supported-devices
  embed-key="eco_live_your_embed_key"
  manufacturer="schlage"
></seam-supported-devices>

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

export function SupportedSchlageDevices() {
  return (
    <EcosystemProvider embedKey='eco_live_your_embed_key'>
      <SupportedDevices manufacturer='schlage' />
    </EcosystemProvider>
  )
}

See Before You Begin for how to get an embed key, and Add the Components to Your Site for Vue, Angular, and other frameworks.

Pre-render Supported Devices

With @seamapi/react 5.4.0 or newer, you can include the populated device catalog in your page’s HTML. Crawlers and visitors without JavaScript can read device names, model numbers, capabilities, provider requirements, and accessory links. Search, filters, and galleries become interactive when React hydrates the page. The prefetchSupportedDevices loader has no Next.js dependency. Run it on your server or during a static build, then pass its result to EcosystemProvider as dehydratedState when rendering the native React component. Load @seamapi/react/index.css in the page so the initial HTML is styled before JavaScript runs.

Pre-render Supported Devices in Next.js

Import the stylesheet in your App Router layout, then call prefetchSupportedDevices in a Server Component. Pass its result to EcosystemProvider as dehydratedState:

import '@seamapi/react/index.css'

export default function Layout({ children }) {
  return (
    <html lang='en'>
      <body>{children}</body>
    </html>
  )
}

import {
  EcosystemProvider,
  SupportedDevices,
} from '@seamapi/react/ecosystem-react.js'
import { prefetchSupportedDevices } from '@seamapi/react/server.js'

export const revalidate = 3600

export default async function Page() {
  const embedKey = process.env.NEXT_PUBLIC_ECOSYSTEM_EMBED_KEY
  const filters = {
    manufacturer: 'august',
    provider: 'august-access',
    deviceType: 'smartlock',
  }
  const dehydratedState = await prefetchSupportedDevices({
    ...filters,
    embedKey,
    origin: 'https://your-site.example',
    fetch: async (input, init) => await fetch(input, {
      ...init,
      next: { revalidate: 3600 },
    }),
  })

  return (
    <EcosystemProvider
      embedKey={embedKey}
      dehydratedState={dehydratedState}
      disableCssInjection
      disableFontInjection
    >
      <SupportedDevices {...filters} />
    </EcosystemProvider>
  )
}

Replace https://your-site.example with your page origin and include that origin in your embed key’s allowed origins. The server loader sends the origin to Ecosystem for validation. Keep the embed key, endpoint, and filters identical between the loader and the rendered component. An embed key is public browser configuration; use the same Ecosystem embed key you would supply to a client-rendered component. The loader fetches the records needed for the complete initial view and applies the embed key’s exclusions before serializing the data. Each call uses its own cache. Failed requests or incomplete pagination throw an error so your application can handle the failure instead of generating an empty catalog. This example revalidates the page and server fetches hourly. Adjust the interval to your catalog’s freshness needs. Next.js applications using Cache Components should use their corresponding cache APIs. If you cache complete loader results yourself, include the endpoint, embed key, page origin, and filters in the cache identity, and choose a lifetime that accounts for changes to key permissions and exclusions. Hydrated browser queries become eligible for background refresh one minute after their fetch time. To verify the result, inspect the page’s HTML response and reload with JavaScript disabled. Device names and requirement text should be HTML elements, and native device disclosures and links should still work. An unscoped list retains the five-model preview per manufacturer; its Show all button requires JavaScript. See the working Next.js example for setup and production-build verification. This approach renders the React component directly in your Next.js page. An iframe keeps its contents in a separate document and does not add device content to the parent page’s HTML.

Other Web Frameworks

You can use the same loader and native React component with other rendering setups:

Rendering setup	How to include the catalog in the initial HTML
React Router or Remix	Call the loader in a server route loader and render `EcosystemProvider` with the returned state. Enable server rendering, or use build-time pre-rendering where your framework supports it.
Astro with its React integration	Fetch the state in the Astro page and pass it to a React island that wraps both `EcosystemProvider` and `SupportedDevices`. Use a hydration directive such as `client:load` so the island renders HTML first and becomes interactive in the browser. `client:only` skips server rendering.
A custom React server or static build	Fetch the state before rendering the React tree to HTML. Pass the same state to the browser for hydration. A static catalog updates when you rebuild; a server-rendered catalog follows your server’s cache policy.

The Next.js recipe above is the complete framework integration we have verified. The loader and native component also have direct React server-rendering tests; the other framework setups describe integration approaches rather than tested examples. Nuxt/Vue, SvelteKit, and Angular also support server rendering, but the native component uses React. To put the catalog directly in those pages’ HTML, you need a React rendering adapter or your own server-rendered template using Ecosystem API data. Our browser web component and iframe do not automatically gain server rendering from the host framework. A browser-only React app also needs a server or build-time rendering step to produce populated HTML.

How Your Embed Key Changes the List

With a manufacturer key, Supported Devices defaults to your brand. You can omit manufacturer entirely, and the title reads “Supported Brand devices”:

<seam-supported-devices
  embed-key="eco_live_your_manufacturer_embed_key"
></seam-supported-devices>

An explicit manufacturer attribute always wins over the key’s default. To read the same device models from your servers, use the Manufacturer API. With an app (partner) key, Supported Devices hides what you have told Seam you do not support: excluded manufacturers and device types, and providers you do not support. When you also set capability, it hides the combinations you have excluded for that capability. To change what is excluded, email support@getseam.com.

Attributes

Attribute	Type	Default	Description
`manufacturer`	string	Your manufacturer key’s brand	A manufacturer slug, for example `schlage`. Shows only this manufacturer’s devices and hides the manufacturer filter.
`provider`	string	—	A provider slug, for example `august-access` or `salto-ks`. Scopes the list and collapsed capability summaries to that provider. Expanded rows show the other available providers and their own requirements.
`device-type`	string	—	A device type slug, for example `smartlock`, `thermostat`, or `intercom`. Shows only this type and hides the device type filter.
`capability`	string	—	A capability, for example `can_program_online_access_codes`. Shows only devices that support it and hides the capability filter.
`hide-search`	boolean	`false`	Hides the search field.
`hide-filters`	boolean	`false`	Hides the manufacturer, device type, and capability filters.
`hide-title`	boolean	`false`	Hides the title.
`theme`	string	`light`	`light`, `dark`, or `auto`. See Dark Mode.

In React, pass the same options as camel-cased props on SupportedDevices, for example deviceType, hideFilters, and hideSearch. Supported Devices also accepts the shared attributes: embed-key, class-name, disable-css-injection, disable-font-injection, and ecosystem-endpoint.

Set manufacturer or device-type whenever you can. The component loads every matching device model, so a narrower list loads faster.

Capabilities

Supported Devices lists these capabilities with a check or an information icon. They are the same capability flags the Seam API reports on a device, so you can also set capability to any of them.

Capability	Label
`can_remotely_unlock`	Remote unlock
`can_remotely_lock`	Remote lock
`can_program_online_access_codes`	Access codes
`can_program_offline_access_codes`	Offline access codes
`can_provision_mobile_keys`	Mobile keys
`can_provision_wallet_keys`	Wallet keys
`can_encode_plastic_cards`	Encode key cards
`can_assign_plastic_cards`	Assign key cards
`can_hvac_heat`	Heat
`can_hvac_cool`	Cool
`can_hvac_auto`	Heat and cool
`can_hvac_fan`	Fan
`can_program_thermostat_weekly_programs`	Weekly programs
`can_monitor`	Monitoring

An information icon means a supported capability has additional requirements. Expand the device row to read those requirements for each provider. In the provider table, a green check means the capability is supported, while a dash in the requirements column means no additional requirement is listed. On mobile, requirement pills stack within their column.

Examples

Show one manufacturer’s devices

<seam-supported-devices
  embed-key="eco_live_your_embed_key"
  manufacturer="yale"
></seam-supported-devices>

Show every supported thermostat

<seam-supported-devices
  embed-key="eco_live_your_embed_key"
  device-type="thermostat"
></seam-supported-devices>

Show devices that support mobile keys

<seam-supported-devices
  embed-key="eco_live_your_embed_key"
  device-type="smartlock"
  capability="can_provision_mobile_keys"
></seam-supported-devices>

Build a compact list

Hide the title and filters but keep the search field. Use this when your page already has its own heading.

<seam-supported-devices
  embed-key="eco_live_your_embed_key"
  manufacturer="schlage"
  hide-title
  hide-filters
></seam-supported-devices>

Dark Mode

Set theme="dark" to always use the dark theme, or theme="auto" to follow the visitor’s color scheme. Manufacturers that provide a logo for dark backgrounds show it in the dark theme.

<seam-supported-devices
  embed-key="eco_live_your_embed_key"
  manufacturer="schlage"
  theme="auto"
></seam-supported-devices>

Empty States

Message	Meaning
No supported devices found.	No device models match the attributes you set. Check the slugs.
No devices match your search or filters.	The visitor’s search or filter choices matched no devices. The component offers a Clear filters button.

For embed key and loading errors, see Troubleshooting.