> For the complete documentation index, see [llms.txt](/llms.txt).

- Snap

# snap_createInterface

Create the interactive interface for use in the [interactive UI](https://metamask-docs-git-imp-agt-scr-90-100-consensys-ddffed67.vercel.app/snaps/features/custom-ui/interactive-ui/).

## Parameters[​](#parameters "Direct link to Parameters")

object

required

An object containing the parameters for the `snap_createInterface` method.

### ui

JSXElement

required

The [custom UI](https://metamask-docs-git-imp-agt-scr-90-100-consensys-ddffed67.vercel.app/snaps/features/custom-ui/) to create.

### context

Record<string, JSON>

Optional context for the interface, which can be used to provide additional information about the interface to the Snap, without being part of the UI itself.

## Returns[​](#returns "Direct link to Returns")

string

The interface's ID to be used in subsequent calls to custom UI methods such as [snap_updateInterface](https://metamask-docs-git-imp-agt-scr-90-100-consensys-ddffed67.vercel.app/snaps/reference/snaps-api/snap%5Fupdateinterface), or to display the interface using one of the interface display methods such as [snap_dialog](https://metamask-docs-git-imp-agt-scr-90-100-consensys-ddffed67.vercel.app/snaps/reference/snaps-api/snap%5Fdialog).

## Example

```
import { Box, Heading, Text } from '@metamask/snaps-sdk/jsx'

const interfaceId = snap.request({
  method: 'snap_createInterface',
  params: {
    ui: (
      <Box>
        <Heading>Example Interface</Heading>
        <Text>This is an example interface created by "snap_createInterface".</Text>
      </Box>
    ),
  },
})

```