components
1 week ago
BrandingPage.js
3 months ago
ContributePage.js
3 months ago
CustomCssPage.js
3 months ago
LicensePage.js
3 months ago
McpPage.js
1 week ago
MediaHubPage.js
3 months ago
PresetsPage.js
3 months ago
UninstallPage.js
3 months ago
ViewingAnalyticsPage.js
3 months ago
McpPage.js
164 lines
| 1 | import { __ } from '@wordpress/i18n'; |
| 2 | import { Container, Switch, Text, Tooltip } from '@bsf/force-ui'; |
| 3 | import { Info } from 'lucide-react'; |
| 4 | import SettingsPageShell from '../shared/SettingsPageShell'; |
| 5 | import SectionCard from '../shared/SectionCard'; |
| 6 | import useSimpleSettingsPage from '../../../hooks/useSimpleSettingsPage'; |
| 7 | import useMcpAdapterInstall from '../../../hooks/useMcpAdapterInstall'; |
| 8 | import { OPTION_KEYS } from '../config'; |
| 9 | import ConnectWizard from './components/ConnectWizard'; |
| 10 | import McpAdapterRequiredNote from './components/McpAdapterRequiredNote'; |
| 11 | import AbilitiesList from './components/AbilitiesList'; |
| 12 | |
| 13 | const DEFAULTS = { |
| 14 | enabled: false, |
| 15 | allow_changes: false, |
| 16 | }; |
| 17 | |
| 18 | const buildEndpointUrl = ( ctx ) => { |
| 19 | const root = ctx.root || ( ctx.siteUrl ? `${ ctx.siteUrl }/wp-json/` : '' ); |
| 20 | if ( ! /^https?:\/\//i.test( root ) ) { |
| 21 | return ''; |
| 22 | } |
| 23 | return root.replace( /\/$/, '' ) + '/presto-player/v1/mcp'; |
| 24 | }; |
| 25 | |
| 26 | const McpPage = ( { registerActivePage } ) => { |
| 27 | const { data, savedData, update, handleSave, isDirty, isSaving, isLoading } = |
| 28 | useSimpleSettingsPage( OPTION_KEYS.mcp, DEFAULTS, registerActivePage ); |
| 29 | |
| 30 | const ctx = window.prestoPlayer || {}; |
| 31 | const abilitiesSupported = ctx.abilitiesSupported !== false; |
| 32 | |
| 33 | const masterOn = !! data.enabled && abilitiesSupported; |
| 34 | const allowChanges = masterOn && !! data.allow_changes; |
| 35 | |
| 36 | // The switches follow the draft so they feel responsive, but the connector |
| 37 | // and the abilities list have to follow what's actually persisted — the |
| 38 | // server reads the saved option, so showing the endpoint before Save meant |
| 39 | // you could paste it into Claude and get a 404. |
| 40 | const savedOn = !! savedData.enabled && abilitiesSupported; |
| 41 | const savedAllowChanges = savedOn && !! savedData.allow_changes; |
| 42 | |
| 43 | const adapter = useMcpAdapterInstall( ctx.mcpAdapterStatus ); |
| 44 | const isAdapterActive = adapter.status === 'active'; |
| 45 | const endpointUrl = buildEndpointUrl( ctx ); |
| 46 | const username = ctx.currentUser?.user_login || '<your_username>'; |
| 47 | const siteUrl = ctx.siteUrl || ''; |
| 48 | const appPasswordsUrl = `${ siteUrl }/wp-admin/profile.php#application-passwords-section`; |
| 49 | const adapterDownloadUrl = |
| 50 | ctx.mcpAdapterDownloadUrl || |
| 51 | 'https://github.com/WordPress/mcp-adapter/releases/download/v0.5.0/mcp-adapter.zip'; |
| 52 | |
| 53 | const connectorTooltip = ( |
| 54 | <Tooltip |
| 55 | content={ __( |
| 56 | 'MCP (Model Context Protocol) is the open standard that lets AI assistants like Claude, ChatGPT and Cursor securely connect to your site. Add this connector in your AI tool to give it access to your videos and analytics.', |
| 57 | 'presto-player' |
| 58 | ) } |
| 59 | arrow |
| 60 | placement="right" |
| 61 | > |
| 62 | <Info className="size-4 text-icon-secondary cursor-help shrink-0" /> |
| 63 | </Tooltip> |
| 64 | ); |
| 65 | |
| 66 | return ( |
| 67 | <SettingsPageShell |
| 68 | title={ __( 'AI Abilities & MCP', 'presto-player' ) } |
| 69 | isDirty={ isDirty } |
| 70 | isSaving={ isSaving } |
| 71 | isLoading={ isLoading } |
| 72 | onSave={ handleSave } |
| 73 | > |
| 74 | <SectionCard> |
| 75 | <Container direction="column" className="gap-4"> |
| 76 | <Switch |
| 77 | size="md" |
| 78 | disabled={ ! abilitiesSupported } |
| 79 | value={ masterOn } |
| 80 | onChange={ ( val ) => |
| 81 | update( { |
| 82 | enabled: val, |
| 83 | ...( ! val && { allow_changes: false } ), |
| 84 | } ) |
| 85 | } |
| 86 | label={ { |
| 87 | heading: __( 'Enable AI access', 'presto-player' ), |
| 88 | description: __( |
| 89 | 'Let AI assistants like Claude, ChatGPT and Cursor connect to your site and read your videos and analytics. When off, no AI tool can see or do anything.', |
| 90 | 'presto-player' |
| 91 | ), |
| 92 | } } |
| 93 | /> |
| 94 | { ! abilitiesSupported && ( |
| 95 | <Text size="sm" className="text-text-secondary"> |
| 96 | { __( |
| 97 | 'AI access requires WordPress 6.9 or later. Please update WordPress to enable this feature.', |
| 98 | 'presto-player' |
| 99 | ) } |
| 100 | </Text> |
| 101 | ) } |
| 102 | <Switch |
| 103 | size="md" |
| 104 | disabled={ ! masterOn } |
| 105 | value={ allowChanges } |
| 106 | onChange={ ( val ) => update( { allow_changes: val } ) } |
| 107 | label={ { |
| 108 | heading: __( 'Allow AI to make changes', 'presto-player' ), |
| 109 | description: __( |
| 110 | 'Let connected assistants create, update and delete videos and settings. When off, AI access is read-only.', |
| 111 | 'presto-player' |
| 112 | ), |
| 113 | } } |
| 114 | /> |
| 115 | { savedOn && ! isAdapterActive && ( |
| 116 | <McpAdapterRequiredNote |
| 117 | adapter={ adapter } |
| 118 | downloadUrl={ adapterDownloadUrl } |
| 119 | /> |
| 120 | ) } |
| 121 | </Container> |
| 122 | </SectionCard> |
| 123 | |
| 124 | { savedOn && isAdapterActive && ! endpointUrl && ( |
| 125 | <SectionCard |
| 126 | title={ __( 'MCP / Connector', 'presto-player' ) } |
| 127 | titleAddon={ connectorTooltip } |
| 128 | > |
| 129 | <Text size="sm" className="text-text-secondary"> |
| 130 | { __( |
| 131 | 'We could not determine your site’s REST API URL, so the connection details are unavailable. Please reload the page or check your site address settings.', |
| 132 | 'presto-player' |
| 133 | ) } |
| 134 | </Text> |
| 135 | </SectionCard> |
| 136 | ) } |
| 137 | |
| 138 | { savedOn && isAdapterActive && endpointUrl && ( |
| 139 | <SectionCard |
| 140 | title={ __( 'MCP / Connector', 'presto-player' ) } |
| 141 | titleAddon={ connectorTooltip } |
| 142 | > |
| 143 | <ConnectWizard |
| 144 | endpointUrl={ endpointUrl } |
| 145 | username={ username } |
| 146 | appPasswordsUrl={ appPasswordsUrl } |
| 147 | /> |
| 148 | </SectionCard> |
| 149 | ) } |
| 150 | |
| 151 | { savedOn && ( |
| 152 | <SectionCard> |
| 153 | <AbilitiesList |
| 154 | enabled={ savedOn } |
| 155 | allowChanges={ savedAllowChanges } |
| 156 | /> |
| 157 | </SectionCard> |
| 158 | ) } |
| 159 | </SettingsPageShell> |
| 160 | ); |
| 161 | }; |
| 162 | |
| 163 | export default McpPage; |
| 164 |