Skip to main content
sunpeak API

​
Overview

The useDeviceCapabilities hook returns the device input capabilities reported by the host. It is a convenience wrapper around useHostContext.

Wraps onhostcontextchanged

MCP Apps SDK reference

​
Import

import { useDeviceCapabilities } from 'sunpeak';

​
Signature

function useDeviceCapabilities(): DeviceCapabilities

​
Returns

​
return
DeviceCapabilities
Device input capabilities reported by the host:
{
  touch?: boolean;  // Whether the device supports touch input
  hover?: boolean;  // Whether the device supports hover interactions
}
Returns an empty object {} if the host does not report capabilities.

​
Usage

import { useDeviceCapabilities } from 'sunpeak';

function MyResource() {
  const { touch, hover } = useDeviceCapabilities();

  return (
    <button className={touch ? 'p-4 text-lg' : 'p-2'}>
      {hover ? 'Hover me' : 'Tap me'}
    </button>
  );
}
The device capabilities come from McpUiHostContext.deviceCapabilities.
For browser-level detection outside of React or when host context is unavailable, sunpeak also exports isPrimarilyTouchDevice and isHoverAvailable utility functions.