Files
supabase/apps/docs/features/docs/MdxBase.shared.tsx
T
3057faa4e2 feat: MCP URL builder (#36867)
* feat: MCP URL builder

- Creates an MCP URL builder component that allows a user to choose options via a UI, then automatically builds the URL and config needed for various MCP clients
- Adds this component to studio Config modal and docs MCP page

* fix(mcp url builder): mcp-remote options

mcp-remote handles OAuth, so no need to pass personal access token

* fix(docs): mcp

We are pushing the remote MCP server rather than the local one, so removing
references to the local server from documentation.

* fix(mcp url builder): ui messages

- Clarify read-only mode
- Storage is not enabled in the defautl configuration

* fix: mcp url builder

- Refactor unnecessary hook into a utility function
- Fix background color in dark mode

* feat: update remote MCP base URL

* docs: update MCP getting started

- Restores relevant content from prod
- Adds callout about authentication
- Adds next steps to remote MCP installation section

* Update apps/docs/content/guides/getting-started/mcp.mdx

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

* feat: click selected project to unselect

This follows the unselect pattern from shadcn combobox example

https://ui.shadcn.com/docs/components/combobox

* Update apps/docs/content/guides/getting-started/mcp.mdx

Co-authored-by: Greg Richardson <greg.nmr@gmail.com>

* Update apps/docs/content/guides/getting-started/mcp.mdx

Co-authored-by: Greg Richardson <greg.nmr@gmail.com>

* Update apps/docs/content/guides/getting-started/mcp.mdx

Co-authored-by: Greg Richardson <greg.nmr@gmail.com>

* fix: light mode connection icons

* chore: format `mcp.mdx`

* fix: VS Code URL handler "name"

Based on docs the field is "name" instead of "id":

- https://code.visualstudio.com/docs/copilot/customization/mcp-servers#_commandline-configuration
- https://code.visualstudio.com/docs/copilot/customization/mcp-servers#_url-handler

* refactor: `NEXT_PUBLIC_MCP_URL` environment variable

* feat: move client selector below options

* feat: "Add to" buttons left aligned about config file

* feat: actionable login hint

* refactor: remote claude desktop client option

---------

Co-authored-by: Matt Rossman <22670878+mattrossman@users.noreply.github.com>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: Greg Richardson <greg.nmr@gmail.com>
Co-authored-by: Danny White <3104761+dnywh@users.noreply.github.com>
2025-10-01 10:45:34 -04:00

90 lines
2.8 KiB
TypeScript

import { ArrowDown, Check, X } from 'lucide-react'
import Link from 'next/link'
import { Button, Image } from 'ui'
import { Heading } from 'ui/src/components/CustomHTMLElements'
import { Admonition } from 'ui-patterns/admonition'
import { GlassPanel } from 'ui-patterns/GlassPanel'
import { IconPanel } from 'ui-patterns/IconPanel'
import SqlToRest from 'ui-patterns/SqlToRest'
import { AiPromptsIndex } from '~/app/guides/getting-started/ai-prompts/[slug]/AiPromptsIndex'
import { AppleSecretGenerator } from '~/components/AppleSecretGenerator'
import AuthProviders from '~/components/AuthProviders'
import { AuthSmsProviderConfig } from '~/components/AuthSmsProviderConfig'
import { CostWarning } from '~/components/AuthSmsProviderConfig/AuthSmsProviderConfig.Warnings'
import ButtonCard from '~/components/ButtonCard'
import { Extensions } from '~/components/Extensions'
import { JwtGenerator } from '~/components/JwtGenerator'
import { NavData } from '~/components/NavData'
import { Price } from '~/components/Price'
import { ProjectConfigVariables } from '~/components/ProjectConfigVariables'
import { RealtimeLimitsEstimator } from '~/components/RealtimeLimitsEstimator'
import { RegionsList } from '~/components/RegionsList'
import { SharedData } from '~/components/SharedData'
import StepHikeCompact from '~/components/StepHikeCompact'
import { CodeSampleDummy, CodeSampleWrapper } from '~/features/directives/CodeSample.client'
import { NamedCodeBlock } from '~/features/directives/CodeTabs.components'
import { Accordion, AccordionItem } from '~/features/ui/Accordion'
import { CodeBlock } from '~/features/ui/CodeBlock/CodeBlock'
import InfoTooltip from '~/features/ui/InfoTooltip'
import { ShowUntil } from '~/features/ui/ShowUntil'
import { TabPanel, Tabs } from '~/features/ui/Tabs'
import { ErrorCodes } from '../ui/ErrorCodes'
import { McpConfigPanel } from '../ui/McpConfigPanel'
const components = {
Accordion,
AccordionItem,
Admonition,
AiPromptsIndex,
AuthSmsProviderConfig,
AppleSecretGenerator,
AuthProviders,
Button,
ButtonCard,
CodeSampleDummy,
CodeSampleWrapper,
CostWarning,
ErrorCodes,
Extensions,
GlassPanel,
IconArrowDown: ArrowDown,
IconCheck: Check,
IconPanel,
IconX: X,
Image: (props: any) => <Image fill alt="" className="object-contain" {...props} />,
JwtGenerator,
Link,
McpConfigPanel,
NamedCodeBlock,
NavData,
ProjectConfigVariables,
RealtimeLimitsEstimator,
RegionsList,
SharedData,
ShowUntil,
SqlToRest,
StepHikeCompact,
Tabs,
TabPanel,
InfoTooltip,
h2: (props: any) => (
<Heading tag="h2" {...props}>
{props.children}
</Heading>
),
h3: (props: any) => (
<Heading tag="h3" {...props}>
{props.children}
</Heading>
),
h4: (props: any) => (
<Heading tag="h4" {...props}>
{props.children}
</Heading>
),
pre: CodeBlock,
Price,
}
export { components }