> ## Documentation Index
> Fetch the complete documentation index at: https://www.seam.co/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Compatible Apps

> Show the apps that work with your devices through Seam on your own website with the seam-compatible-apps web component or the CompatibleApps React component.

## \<seam-compatible-apps /> [(preview)](https://react.seam.co/?path=/docs/ecosystem-compatibleapps--docs)

Compatible Apps shows the apps that work with a device category through Seam. Narrow it to a manufacturer, a provider, or a capability to show the apps that support exactly that. A lock manufacturer can put it on a product page to answer "Which apps can I use with this lock?" without maintaining the list by hand.

Each app appears as a card with its logo, name, and industries, and links to the app's website. Featured apps come first, then the rest in alphabetical order. Visitors can search by app name, industry, or solution, and a **Show more** button reveals apps beyond the first 24.

An app appears only where Seam or the app's maker has declared support for that device category, manufacturer, provider, or capability. When you set `provider` or `capability`, each card also shows the app's note about that support, if it has one.

<Note>
  Compatible Apps requires an embed key. See [Before You Begin](/docs/ui-components/overview/ecosystem-components/index#before-you-begin) for how to get one and register your origins.
</Note>

## Add Compatible Apps to Your Page

<CodeGroup>
  ```html Plain HTML theme={"dark"}
  <script
    type="module"
    src="https://react.seam.co/v/5.1.0/dist/ecosystem.js"
  ></script>

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

  ```jsx React theme={"dark"}
  import { CompatibleApps, EcosystemProvider } from '@seamapi/react'

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

For Vue, Angular, and other frameworks, see [Add the Components to Your Site](/docs/ui-components/overview/ecosystem-components/index#add-the-components-to-your-site).

## Attributes

| Attribute | Type | Default | Description |
| - | - | - | - |
| `device-type` | string | — | **Required.** The device category, for example `smartlock`, `thermostat`, `sensor`, or `intercom`. |
| `manufacturer` | string | — | A manufacturer slug, for example `schlage`. Lists the apps that support this manufacturer's devices. |
| `provider` | string | — | A provider slug, the cloud or system the devices connect through, for example `salto-ks`. Shows each app's support note. |
| `capability` | string | — | A [device capability](/docs/capability-guides/device-and-system-capabilities), for example `can_provision_mobile_keys`. Shows each app's support note. |
| `industry` | string | — | An industry slug, for example `short-term-rental`. Lists only apps in this industry. |
| `max-visible` | number | `24` | How many apps to show before the **Show more** button. |
| `hide-search` | boolean | `false` | Hides the search field. |
| `hide-title` | boolean | `false` | Hides the "Works with these apps" title. |
| `theme` | string | `light` | `light`, `dark`, or `auto`. See [Dark Mode](#dark-mode). |

In React, pass the same options as camel-cased props on `CompatibleApps`, for example `deviceType`, `maxVisible`, and `hideSearch`.

Compatible Apps also accepts the [shared attributes](/docs/ui-components/overview/ecosystem-components/index#shared-attributes): `embed-key`, `class-name`, `disable-css-injection`, `disable-font-injection`, and `ecosystem-endpoint`.

## Examples

### List all apps for a device category

```html theme={"dark"}
<seam-compatible-apps
  embed-key="eco_live_your_embed_key"
  device-type="thermostat"
></seam-compatible-apps>
```

### Show the apps for one manufacturer

Use this on a manufacturer's product or integrations page.

```html theme={"dark"}
<seam-compatible-apps
  embed-key="eco_live_your_embed_key"
  device-type="smartlock"
  manufacturer="yale"
></seam-compatible-apps>
```

### Show the apps that support a capability through a provider

Set `provider` and `capability` together to list the apps that support, for example, mobile keys on Salto KS. Each card shows the app's note about that support.

```html theme={"dark"}
<seam-compatible-apps
  embed-key="eco_live_your_embed_key"
  device-type="smartlock"
  provider="salto-ks"
  capability="can_provision_mobile_keys"
></seam-compatible-apps>
```

### Show apps for one industry

```html theme={"dark"}
<seam-compatible-apps
  embed-key="eco_live_your_embed_key"
  device-type="thermostat"
  industry="short-term-rental"
></seam-compatible-apps>
```

### Build a compact list

Hide the title and search field, and show six apps before the **Show more** button. Use this when your page already has its own heading.

```html theme={"dark"}
<seam-compatible-apps
  embed-key="eco_live_your_embed_key"
  device-type="smartlock"
  manufacturer="schlage"
  hide-title
  hide-search
  max-visible="6"
></seam-compatible-apps>
```

## Dark Mode

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

```html theme={"dark"}
<seam-compatible-apps
  embed-key="eco_live_your_embed_key"
  device-type="smartlock"
  theme="auto"
></seam-compatible-apps>
```

## Empty States

| Message | Meaning |
| - | - |
| Set a device type to list compatible apps. | `device-type` is missing or empty. |
| No apps are listed for this selection yet. | No app has declared support for this combination of attributes. Check the slugs, or remove `provider`, `capability`, or `industry` to widen the list. |
| No apps found for "…". | The visitor's search matched no apps. The component offers a **Clear search** button. |

For embed key and loading errors, see [Troubleshooting](/docs/ui-components/overview/ecosystem-components/index#troubleshooting).

## Next Steps

* Show the devices that work with Seam with [Supported Devices](/docs/ui-components/overview/ecosystem-components/supported-devices).
* Set up your embed key, framework, and Content Security Policy in [Ecosystem Components](/docs/ui-components/overview/ecosystem-components/index).
* Try the component with sample data in the [interactive component library](https://react.seam.co/?path=/docs/ecosystem-compatibleapps--docs).

If you have questions or want to report an issue, email [support@getseam.com](mailto:support@getseam.com).


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.