Component specialized guide

A comprehensive reference for specialized and less commonly used MDX components in Neon documentation. This guide covers components used in specific scenarios, specialized workflows, and edge cases.

• How to use specialized MDX components for specific use cases
• When to choose specialized components over common ones
• Technical requirements and dependencies for specialized components
• Best practices for complex component implementations

• Component Guide
• Component Icon Guide
• Component Architecture
• Documentation Contribution Guide

• Code display - Enhanced code blocks and external code
• Media components - Video and multimedia content
• Specialized shared components - Feature status indicators
• SDK components - Auto-generated SDK documentation
• Utility components - Forms and specialized UI elements
• Specialized components - Complex and specialized functionality
• Community components - Community engagement features

Enhanced code blocks and external code embedding.

Embed code from external sources or files.

<ExternalCode url="https://raw.githubusercontent.com/neondatabase/neon/master/README.md" />

Live preview:

[External code loaded from GitHub README.md with syntax highlighting]

Example of external code loading (mocked for showcase):

# Neon Database

Serverless Postgres built for the cloud.

## Key Features

- **Instant provisioning**: Create databases in seconds
- **Autoscaling**: Scale compute up and down automatically
- **Branching**: Create database branches like Git
- **Scale to zero**: Save costs when inactive

## Quick Start

1. Sign up at console.neon.tech
2. Create your first project
3. Connect using your preferred client

Components for embedding and displaying multimedia content.

Embedded YouTube video player.

<YoutubeIframe embedId="IcoOpnAcO1Y" />

Live preview:

https://www.youtube.com/embed/IcoOpnAcO1Y

Native video player component.

<Video
  sources={[{ src: '/videos/pages/doc/neon-mcp.mp4', type: 'video/mp4' }]}
  width={960}
  height={1080}
/>

Live preview:

Status indicators for features in different stages of development and release.

Status indicators for features in different stages:

<PrivatePreview />
<PrivatePreviewEnquire />
<PublicPreview />
<FeatureBeta />
<LRBeta />
<NewPricing />
<LRNotice />
<MigrationAssistant />

Live preview:

Status indicator for early access features with custom feature name.

<EarlyAccessProps feature_name="My Feature" />

Live preview:

Auto-generated components specifically for SDK documentation. These load content from shared templates.

<GetStarted sdkName="Next.js" />

<SdkUser sdkName="React" />
<SdkProject sdkName="Node.js" />
<SdkUseUser sdkName="Vue" />

Note: These SDK components require corresponding files in the content/docs/shared-content/ directory and proper configuration in sharedMdxComponents.

Specialized UI components for specific use cases.

Contact or request submission form.

There are types (extension and regions) defined in src/components/shared/request-form/data.js. To define a new type, define a new config in data.js and register it in DATA there.

<RequestForm type="extension" />

Live preview:

Looking for a specific extension in Neon? Suggest one using this form.

Chat interface options component with a specific use case in the sidebar navigation.

Important: This component is designed for internal navigation use only and should not be used in regular documentation content.

Complex components for specialized functionality and workflows.

Shared tip admonition that links to the Agent Skills page with a customizable topic.

<AgentSkillsTip skill_topic="the Neon Serverless Driver, general connection advice," />

Live preview:

Model Context Protocol tools integration component.

<MCPTools />

Live preview:

Tools are grouped into categories. Use the ?category= URL parameter to restrict which categories are active. You can pass it more than once to enable multiple categories.

Search and navigation tools (search across projects, fetch resource details by ID) are available by default but disabled in project-scoped mode.

Schema tools accept schema-qualified table names, such as crm.contacts. An unqualified name resolves against the database search_path, which defaults to the public schema.

The querying category includes inspect_database, which runs the same 15 read-only checks as neon inspect db: relation and index sizes, unused indexes, sequential scans, active queries and locks, stalled queries running longer than 30 seconds, heavy and frequent statements, cache hit rate and working set, autovacuum and bloat, and replication state. Some checks need pg_stat_statements or the neon extension; the tool asks before suggesting CREATE EXTENSION.

Components for community engagement and interaction.

Community engagement banner for promoting community participation.

<CommunityBanner buttonText="Join Discord" buttonUrl="https://neon.com/discord" logo="discord">
  Connect with the Neon community!
</CommunityBanner>

Live preview:

Join Discord

• ExternalCode: When you need to embed code from external repositories or sources
• Media Components: For video tutorials, demos, or multimedia content
• Specialized Shared Components: For feature announcements and status updates
• SDK Components: For auto-generated SDK documentation
• Utility Components: For specialized forms and navigation elements
• Specialized Components: For AI-powered features and complex workflows
• Community Components: For community engagement and participation

• Use sparingly: These components are specialized and should be used only when appropriate
• Test thoroughly: Specialized components may have specific requirements or dependencies
• Document usage: When using specialized components, document the specific use case
• Consider alternatives: Always consider if a simpler component would work better
• Follow patterns: Use established patterns for similar functionality

Some specialized components have specific dependencies:

• SDK Components: Require shared content files and proper configuration
• RequestForm: Requires specific type configurations in the data files
• Media Components: May require specific video formats or hosting
• Specialized Components: May have AI or external service dependencies

This guide covers specialized MDX components used in specific scenarios. Each component includes:

• MDX syntax: Copy-paste ready code examples
• Live rendering: See exactly how components appear
• Usage guidelines: When and how to use each component
• Dependencies: Requirements and configurations needed

For commonly used components, see the Component Guide.