Component specialized guide

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

Quick navigation

• 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

Code display

Enhanced code blocks and external code embedding.

ExternalCode

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):

# OptiTech 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 app.optitech-sverige.se
2. Create your first project
3. Connect using your preferred client

Media components

Components for embedding and displaying multimedia content.

YoutubeIframe

Embedded YouTube video player.

<YoutubeIframe embedId="IcoOpnAcO1Y" />

Live preview:

Video

Native video player component.

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

Live preview:

Specialized shared components

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

Feature Announcements

Status indicators for features in different stages:

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

Live preview:

EarlyAccessProps

Status indicator for early access features with custom feature name.

<EarlyAccessProps feature_name="My Feature" />

Live preview:

SDK components

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

Getting Started

<GetStarted sdkName="Next.js" />

SDK Type Components

<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.

Utility components

Specialized UI components for specific use cases.

RequestForm

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:

Request a new extension

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

Request

ChatOptions

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.

Specialized components

Complex components for specialized functionality and workflows.

AgentSkillsTip

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

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

Live preview:

MCPTools

Model Context Protocol tools integration component.

<MCPTools />

Live preview:

Community components

Components for community engagement and interaction.

CommunityBanner

Community engagement banner for promoting community participation.

<CommunityBanner buttonText="Join Discord" buttonUrl="https://discord.gg/92vNTzKDGp" logo="discord">
  Connect with the OptiTech community!
</CommunityBanner>

Live preview:

Usage guidelines

When to use specialized components

• 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

Best practices

• 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

Component dependencies

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

Component summary

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

Component categories

For commonly used components, see the Component Guide.