mirror of
https://github.com/supabase/supabase.git
synced 2026-10-09 19:35:06 +03:00
Saxon FletcherandClaude Opus 5.5
a9c594a820
Renames the `mcp-server` Library block to `mcp`. Installing it now creates `supabase/functions/mcp`, so the server is served at `/functions/v1/mcp`. - Block, Edge Function folder, and docs page renamed (`/docs/headless/mcp`) - Headless App block now installs its tools into `supabase/functions/mcp` and configures `[functions.mcp]` - Links in the BYO MCP and MCP authentication guides updated - Permanent redirects keep `/r/mcp-server.json` and `/docs/headless/mcp-server` working - `public/r` rebuilt <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Updates** * The MCP Server block is now named `mcp` across its documentation, installation links, and setup instructions. * Updated function endpoints and deployment commands to use `/mcp`. * Added permanent redirects from the previous `mcp-server` documentation and install URLs to their new locations. <!-- end of auto-generated comment: release notes by coderabbit.ai --> Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com>
87 lines
2.6 KiB
TypeScript
87 lines
2.6 KiB
TypeScript
'use client'
|
|
|
|
import { useState } from 'react'
|
|
|
|
import { ConnectedAgentsView } from '@/registry/default/blocks/headless-app-tanstack/components/connected-agents'
|
|
import type { OAuthGrant } from '@/registry/default/blocks/headless-app-tanstack/hooks/use-oauth-grants'
|
|
import { OAuthConsentCard } from '@/registry/default/blocks/oauth-consent/components/oauth-consent'
|
|
import { LoginForm } from '@/registry/default/blocks/password-based-auth-nextjs/components/login-form'
|
|
|
|
const PRODUCT_NAME = 'Acme'
|
|
const MCP_SERVER_URL = 'https://your-project.supabase.co/functions/v1/mcp'
|
|
|
|
const grants: OAuthGrant[] = [
|
|
{
|
|
client: { id: 'claude-code', name: 'Claude Code', uri: '', logo_uri: '' },
|
|
scopes: ['openid', 'profile'],
|
|
granted_at: '2026-08-20T09:12:00Z',
|
|
},
|
|
{
|
|
client: { id: 'codex', name: 'Codex', uri: '', logo_uri: '' },
|
|
scopes: ['openid'],
|
|
granted_at: '2026-08-24T16:40:00Z',
|
|
},
|
|
]
|
|
|
|
const screens = {
|
|
'sign-in': <LoginForm className="mx-auto w-full max-w-sm" />,
|
|
consent: (
|
|
<OAuthConsentCard
|
|
className="mx-auto w-full max-w-lg"
|
|
clientName="Claude Code"
|
|
productName={PRODUCT_NAME}
|
|
redirectUri="http://localhost:3000/callback"
|
|
email="alex@example.com"
|
|
scopes={['openid', 'profile']}
|
|
/>
|
|
),
|
|
connect: (
|
|
<ConnectedAgentsView
|
|
className="mx-auto w-full max-w-lg"
|
|
mcpServerUrl={MCP_SERVER_URL}
|
|
productName={PRODUCT_NAME}
|
|
grants={[]}
|
|
/>
|
|
),
|
|
connected: (
|
|
<ConnectedAgentsView
|
|
className="mx-auto w-full max-w-lg"
|
|
mcpServerUrl={MCP_SERVER_URL}
|
|
productName={PRODUCT_NAME}
|
|
grants={grants}
|
|
/>
|
|
),
|
|
}
|
|
|
|
const labels: Record<keyof typeof screens, string> = {
|
|
'sign-in': 'Sign in',
|
|
consent: 'Consent',
|
|
connect: 'Connect',
|
|
connected: 'Connected',
|
|
}
|
|
|
|
export default function HeadlessAppDemo() {
|
|
const [screen, setScreen] = useState<keyof typeof screens>('sign-in')
|
|
|
|
return (
|
|
<div className="flex flex-col gap-8">
|
|
<div className="mx-auto flex rounded-lg bg-secondary p-1" role="group" aria-label="Screen">
|
|
{(Object.keys(screens) as (keyof typeof screens)[]).map((key) => (
|
|
<button
|
|
key={key}
|
|
type="button"
|
|
tabIndex={0}
|
|
aria-pressed={screen === key}
|
|
data-active={screen === key}
|
|
className="rounded-md px-3 py-1.5 text-xs text-muted-foreground transition-colors data-[active=true]:bg-background data-[active=true]:text-foreground"
|
|
onClick={() => setScreen(key)}
|
|
>
|
|
{labels[key]}
|
|
</button>
|
|
))}
|
|
</div>
|
|
{screens[screen]}
|
|
</div>
|
|
)
|
|
}
|