import { destroy, index as mcpIndex, rotate, store, } from '@/actions/App/Http/Controllers/Settings/McpTokenController'; import HeadingSmall from '@/components/heading-small'; import { ProBadge } from '@/components/pro-badge'; import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'; import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, } from '@/components/ui/alert-dialog'; import { Badge } from '@/components/ui/badge'; import { Button } from '@/components/ui/button'; import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from '@/components/ui/card'; import { Input } from '@/components/ui/input'; import { Label } from '@/components/ui/label'; import { useClipboard } from '@/hooks/use-clipboard'; import AppLayout from '@/layouts/app-layout'; import SettingsLayout from '@/layouts/settings/layout'; import { type BreadcrumbItem, type SharedData } from '@/types'; import { __ } from '@/utils/i18n'; import { Head, Link, router, useForm, usePage } from '@inertiajs/react'; import { Copy, KeyRound, RefreshCw, ShieldAlert, Trash2 } from 'lucide-react'; import { toast } from 'sonner'; interface TokenRow { id: number; name: string; scope: 'read' | 'read_write'; created_at: string | null; last_used_at: string | null; } interface McpPageProps { tokens: TokenRow[]; serverUrl: string; subscribeUrl: string; newToken: string | null; } const breadcrumbs: BreadcrumbItem[] = [ { title: 'AI Connector', href: mcpIndex().url }, ]; function formatDate(value: string | null): string { return value ? new Date(value).toLocaleString() : __('Never'); } export default function Mcp() { const { tokens, serverUrl, subscribeUrl, newToken, auth } = usePage< SharedData & McpPageProps >().props; const [, copy] = useClipboard(); const form = useForm({ name: '' }); function createToken(event: React.FormEvent) { event.preventDefault(); form.post(store().url, { preserveScroll: true, onSuccess: () => form.setData('name', ''), }); } function copyValue(value: string) { copy(value).then((ok) => { if (ok) { toast.success(__('Copied to clipboard')); } }); } return (
{!auth.hasProPlan && ( {__('This is a Pro feature')} {__( 'You can create a token now, but it only works on a paid plan.', )}{' '} {__('Upgrade your account')} )} {__('Your data leaves Whisper Money')} {__( 'Anything you ask about is sent to the AI app you connect, and we cannot control what it does with your data. Connect one only if you are comfortable with that. You can revoke a token any time to cut off access.', )} {newToken && ( {__('Copy your new token now')}

{__( 'This is the only time you will see it, so copy it somewhere safe now.', )}

{newToken}
)} {/* Create token */} {__('Create a token')} {__( 'Tokens can read and analyse your data, but never change it.', )}
form.setData('name', e.target.value) } placeholder={__('e.g. Claude Desktop')} required />
{form.errors.name && (

{form.errors.name}

)} {/* Token list */} {__('Your tokens')} {__( 'Rotate a token if it leaks, or revoke it to cut off access.', )} {tokens.length === 0 ? (

{__('You have no tokens yet.')}

) : (
    {tokens.map((token) => (
  • {token.name} {token.scope === 'read_write' ? __('Read & write') : __('Read only')}

    {__('Created')}:{' '} {formatDate( token.created_at, )}{' '} ยท {__('Last used')}:{' '} {formatDate( token.last_used_at, )}

    {__( 'Rotate this token?', )} {__( 'Rotating gives you a new secret and cancels the old one. Anything using the current token stops working until you reconnect it with the new secret.', )} {__('Cancel')} router.post( rotate( token.id, ).url, {}, { preserveScroll: true, }, ) } > {__('Rotate')} {__( 'Revoke this token?', )} {__( 'Anything using this token loses access right away, and you cannot undo it.', )} {__('Cancel')} router.delete( destroy( token.id, ).url, { preserveScroll: true, }, ) } > {__('Revoke')}
    • ))}
)} {/* Connection instructions */} {__('How to connect')} {__( 'Here is your connection URL. Use it with a token you created above.', )}
{serverUrl}

{__('Claude Code')}

{__( 'Run this, using one of your tokens in place of .', )}

{`claude mcp add --transport http whisper-money ${serverUrl} --header "Authorization: Bearer "`}

{__('Claude Desktop & ChatGPT')}

{__( 'Coming soon. These apps sign in with OAuth, which we are still building, so a token will not work with them yet. Use Claude Code for now.', )}

); }