MCPNEW

McpConsentDialog

OAuth consent UI: scope list, approve/deny.

Available inreact

Preview

Live previewreal component

Install

TerminalBash

$ npx @mcp-elements/cli add mcp-consent-dialog

Usage

mcp-consent-dialog-example.tsxTSX

import { McpConsentDialog } from '@mcp-elements/react'
import { useState } from 'react'

export function Example() {
  const [open, setOpen] = useState(true)
  return (
    <McpConsentDialog
      open={open}
      serverName="GitHub MCP"
      scopes={['repo:read', 'user.email:read']}
      onApprove={() => setOpen(false)}
      onDeny={() => setOpen(false)}
    />
  )
}

Props

Prop	Type	Default	Description
`open *`	`boolean`	—	Whether the dialog is visible
`serverName *`	`string`	—	Name of the MCP server requesting access
`serverIcon`	`string`	—	URL of the server icon image
`scopes *`	`string[]`	—	Array of OAuth scope strings to display
`onApprove *`	`() => void`	—	Called when user clicks Allow
`onDeny *`	`() => void`	—	Called when user clicks Deny or closes the dialog