::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: white;
}

::-webkit-scrollbar-thumb {
  background-color: #eeee;
  border-radius: 10px;
  border: none;
}

html {
  scrollbar-width: thin;
  scrollbar-color: #eeee white;
  scrollbar-gutter: stable;
}

html.dark {
  scrollbar-width: thin;
  scrollbar-color: #222 #222;
  scrollbar-gutter: stable;
}

html.dark ::-webkit-scrollbar-track {
  background: #222;
}

html.dark ::-webkit-scrollbar-thumb {
  background-color: #222;
}

html.dark ::-webkit-scrollbar-thumb:hover {
  background-color: #333;
}

a:has(> code) {
  border-bottom: none !important;
}

a>code {
  cursor: pointer;
  border-bottom: #0c0c15 1px solid !important;
}

a>code:hover {
  border-bottom: #0c0c15 2px solid !important;
}

#content-area>div.leading-6.mt-14>footer>div.sm\:flex>a {
  display: none;
}

* {
  /* Use system font stack as the default font */
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  /* Disable all font-feature-settings */
  font-feature-settings: normal;
}

/* h1,
h2,
h3,
h4,
h5,
h6, */
code * {
  font-family: monospace;
}

#header h1 {
  font-size: 2.25rem;
}

/* #content-container h2 {
  font-size: 2rem;
}

#content-container h3 {
  font-size: 1.75rem;
}

#content-container h4 {
  font-size: 1.25rem;
} */

.full-width-table table {
  display: table;
}

.full-width-table table th {
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.full-width-table table th:nth-child(3),
.full-width-table table th:nth-child(4),
.full-width-table table th:nth-child(5) {
  text-align: center;
}

@media (max-width: 640px) {

  .full-width-table table th:nth-child(2),
  .full-width-table table td:nth-child(2) {
    display: none;
  }
}



:not(.dark) .prose :where(a):not(:where([class~=not-prose], [class~=not-prose] *)):not(h1, h1 *, h2, h2 *, h3, h3 *, h4, h4 *, h5, h5 *, h6, h6 *) {
  border-bottom: #666666 1px solid;
}


/* img {
  border-radius: 0.5rem;
} */

.max-pill {
  background-color: white;
  color: #0c0c15;
  padding: 1px 4px;
  border-radius: 8px;
  font-size: 0.6rem;
  font-weight: 500;
  display: inline-block;
  margin-left: 2px;
  margin-right: 4px;
  line-height: 1.2;
  border: 1px solid #0c0c15;
}

.dark .max-pill {
  background-color: #0c0c15;
  color: white;
  border-color: white;
}

.footnotes-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-flow: row;
  margin-top: -14px;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgb(var(--gray-800)/.5);
  line-height: 1.6;
}

@media (max-width: 640px) {
  .footnotes-container {
    grid-template-columns: 1fr;
  }
}


.footnotes-container p {
  font-size: 0.8rem;
  opacity: 0.9;
  margin: 0 0 0 0.35em;
}

.dark .footnotes-container {
  border-bottom-color: rgb(var(--gray-800)/.5);
}

.no-wrap {
  white-space: nowrap;
}

.flowchart {
  margin: 0 auto;
}

#mcp-servers {
  max-width: 52rem;
  padding: 1rem;
  margin: 0 auto;
}

#mcp-servers .card h2 {
  font-size: 1.25rem;
}

#mcp-servers .card>div {
  height: 100%;
  display: flex;
  flex-direction: column;
}

#mcp-servers .card>div>div:last-child {
  flex: 1;
  display: flex;
  flex-direction: column;
}

#mcp-servers .card>div>div>div {
  flex: 1;
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  flex-direction: column;
  justify-content: space-between;
}

.mcp-install-examples img {
  margin: 0;
}

html.dark .server-icon [fill="white"] {
  fill: black;
}

.mint-fixed {
    position: fixed
}
.mint-inset-0 {
    inset: 0px
}
.mint-z-50 {
    z-index: 50
}
.mint--m-1 {
    margin: -0.25rem
}
.mint-m-0 {
    margin: 0px
}
.mint-mx-4 {
    margin-left: 1rem;
    margin-right: 1rem
}
.mint-mx-auto {
    margin-left: auto;
    margin-right: auto
}
.mint-mb-16 {
    margin-bottom: 4rem
}
.mint-mb-2 {
    margin-bottom: 0.5rem
}
.mint-mb-3 {
    margin-bottom: 0.75rem
}
.mint-mb-4 {
    margin-bottom: 1rem
}
.mint-mt-12 {
    margin-top: 3rem
}
.mint-mt-4 {
    margin-top: 1rem
}
.mint-inline {
    display: inline
}
.mint-flex {
    display: flex
}
.mint-inline-flex {
    display: inline-flex
}
.mint-grid {
    display: grid
}
.mint-aspect-square {
    aspect-ratio: 1 / 1
}
.mint-size-7 {
    width: 1.75rem;
    height: 1.75rem
}
.mint-w-full {
    width: 100%
}
.mint-max-w-\[52rem\] {
    max-width: 52rem
}
.mint-max-w-md {
    max-width: 28rem
}
.mint-transform {
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.mint-flex-col {
    flex-direction: column
}
.mint-items-start {
    align-items: flex-start
}
.mint-items-center {
    align-items: center
}
.mint-items-baseline {
    align-items: baseline
}
.mint-justify-end {
    justify-content: flex-end
}
.mint-justify-center {
    justify-content: center
}
.mint-gap-2 {
    gap: 0.5rem
}
.mint-gap-3 {
    gap: 0.75rem
}
.mint-gap-4 {
    gap: 1rem
}
.mint-rounded-lg {
    border-radius: 0.5rem
}
.mint-rounded-md {
    border-radius: 0.375rem
}
.mint-border {
    border-width: 1px
}
.mint-border-neutral-200 {
    --tw-border-opacity: 1;
    border-color: rgb(229 229 229 / var(--tw-border-opacity))
}
.mint-bg-black {
    --tw-bg-opacity: 1;
    background-color: rgb(0 0 0 / var(--tw-bg-opacity))
}
.mint-bg-white {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity))
}
.mint-bg-opacity-50 {
    --tw-bg-opacity: 0.5
}
.mint-p-6 {
    padding: 1.5rem
}
.mint-px-3 {
    padding-left: 0.75rem;
    padding-right: 0.75rem
}
.mint-px-4 {
    padding-left: 1rem;
    padding-right: 1rem
}
.mint-py-1 {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem
}
.mint-py-1\.5 {
    padding-top: 0.375rem;
    padding-bottom: 0.375rem
}
.mint-py-2 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem
}
.mint-text-left {
    text-align: left
}
.mint-text-3xl {
    font-size: 1.875rem;
    line-height: 2.25rem
}
.mint-text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem
}
.mint-text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem
}
.mint-text-xs {
    font-size: 0.75rem;
    line-height: 1rem
}
.mint-font-bold {
    font-weight: 700
}
.mint-font-medium {
    font-weight: 500
}
.mint-font-semibold {
    font-weight: 600
}
.mint-text-black {
    --tw-text-opacity: 1;
    color: rgb(0 0 0 / var(--tw-text-opacity))
}
.mint-text-gray-700 {
    --tw-text-opacity: 1;
    color: rgb(55 65 81 / var(--tw-text-opacity))
}
.mint-text-neutral-600 {
    --tw-text-opacity: 1;
    color: rgb(82 82 82 / var(--tw-text-opacity))
}
.mint-text-neutral-900 {
    --tw-text-opacity: 1;
    color: rgb(23 23 23 / var(--tw-text-opacity))
}
.mint-text-white {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity))
}
.mint-underline {
    text-decoration-line: underline
}
.mint-no-underline {
    text-decoration-line: none
}
.mint-decoration-neutral-200 {
    text-decoration-color: #e5e5e5
}
.mint-underline-offset-4 {
    text-underline-offset: 4px
}
.mint-transition-all {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms
}
.mint-transition-colors {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms
}
.mint-transition-opacity {
    transition-property: opacity;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms
}
.mint-duration-200 {
    transition-duration: 200ms
}
.hover\:mint-bg-neutral-100:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(245 245 245 / var(--tw-bg-opacity))
}
.hover\:mint-bg-neutral-800:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(38 38 38 / var(--tw-bg-opacity))
}
.hover\:mint-text-black:hover {
    --tw-text-opacity: 1;
    color: rgb(0 0 0 / var(--tw-text-opacity))
}
.hover\:mint-decoration-neutral-400:hover {
    text-decoration-color: #a3a3a3
}
.dark\:mint-border-neutral-700:is(.dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(64 64 64 / var(--tw-border-opacity))
}
.dark\:mint-bg-black:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(0 0 0 / var(--tw-bg-opacity))
}
.dark\:mint-bg-neutral-900:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(23 23 23 / var(--tw-bg-opacity))
}
.dark\:mint-bg-white:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity))
}
.dark\:mint-text-black:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(0 0 0 / var(--tw-text-opacity))
}
.dark\:mint-text-gray-300:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(209 213 219 / var(--tw-text-opacity))
}
.dark\:mint-text-neutral-400:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(163 163 163 / var(--tw-text-opacity))
}
.dark\:mint-text-white:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity))
}
.dark\:hover\:mint-bg-neutral-200:hover:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(229 229 229 / var(--tw-bg-opacity))
}
.dark\:hover\:mint-bg-neutral-800:hover:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(38 38 38 / var(--tw-bg-opacity))
}
.dark\:hover\:mint-text-white:hover:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity))
}
@media (min-width: 768px) {
    .md\:mint-grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }
}
@media (min-width: 1024px) {
    .lg\:mint-grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }
}

#!/usr/bin/env node

import chokidar from 'chokidar';
import { fileURLToPath } from 'url';
import { dirname, join } from 'path';
import { generateOgForFiles } from './generate-og-image.tsx';

const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);

console.log('👀 Watching MDX files for OG image generation...');

// Watch all .mdx files, ignoring node_modules
const watcher = chokidar.watch('**/*.mdx', {
  ignored: ['node_modules/**', '.git/**'],
  persistent: true,
  cwd: join(__dirname, '..')
});

async function generateOgImage(filePath) {
  console.log(`🖼️  Generating OG image for: ${filePath}`);

  try {
    await generateOgForFiles([filePath]);
    console.log(`✅ OG image generated for: ${filePath}`);
  } catch (error) {
    console.error(`❌ Failed to generate OG image for: ${filePath}`, error);
  }
}

watcher.on('change', generateOgImage);
watcher.on('add', generateOgImage);

watcher.on('ready', () => {
  console.log('✅ OG image watcher ready');
});

watcher.on('error', (error) => {
  console.error('❌ OG image watcher error:', error);
}); 

Explore and install MCP servers for Cursor

Cursor – MCP Directory

MCP Directory

Cursor

globe

newspaper

headset

Get started with Cursor and learn core features

Cursor – Welcome to Cursor

Welcome to Cursor

Guide to installing Cursor, configuring initial settings, and migrating from other code editors

Cursor – Installation

Installation

Common questions about language support, models, project limits, and data management in Cursor with troubleshooting help

Cursor – FAQ

Overview of asynchronous remote agents in Cursor

How to use background agents to parallelize your work.

Cursor – Background Agents

Background Agents

Learn how to index your codebase in Cursor for more accurate AI assistance and search results

Cursor – Codebase Indexing

Codebase Indexing

Control how the Agent model behaves with reusable, scoped instructions.

Cursor – Rules

Rules

Use the context menu to quickly access and manage your codebase

Cursor – Managing Context

Managing Context

Control which files Cursor's AI features and indexing can access using .cursorignore and .cursorindexingignore

Cursor – Ignore Files

Ignore Files

Connect external tools and data sources to Cursor using the Model Context Protocol (MCP) plugin system

Cursor – Model Context Protocol

Model Context Protocol

Experience enhanced AI capabilities with Max Mode in Cursor

Cursor – Max Mode

Max Mode

Cursor – BugBot

BugBot

Cursor – Slack

Slack

Available models in Cursor and their pricing

Cursor – Models & Pricing

Models

Guide to Cursor usage tiers, request types, quotas, and billing options for models and team accounts

Cursor – Plans & Usage

Plans

Learn how to manage billing, usage pricing, and team settings in the dashboard for different plans

Cursor – Dashboard

Dashboard

Complete guide to managing Cursor billing: subscriptions, refunds, cycles and access through Stripe portal

Cursor – Billing

Billing

Guide to Cursor's privacy settings, data handling, and code indexing with Privacy Mode option

Cursor – Privacy & Security

Privacy & Security

Configure custom API keys for OpenAI, Anthropic, Google and Azure to use your own LLM provider accounts in Cursor

Cursor – Custom API Keys

Custom API Keys

Learn how to join Cursor's Early Access Program to test experimental features and provide feedback

Cursor – Early Access Program

Early Access Program

Guide to resolving common Cursor issues including networking, resource usage, SSH connections, and general FAQs

Cursor – Common Issues

Common Issues

Guide to troubleshooting common Cursor issues, resetting app data, and submitting detailed bug reports

Cursor – Troubleshooting Guide

Troubleshooting Guide

Learn how to find and share request IDs in Cursor for better technical support and issue reporting

Cursor – Getting a Request ID

Getting a Request ID

Cursor – Working with Context

Working with Context

How to select models based on your task at hand

Cursor – Selecting Models

Selecting Models

Cursor – Web Development

Web Development

Learn to generate architectural diagrams using Mermaid to visualize system structure and data flow

Cursor – Architectural Diagrams

Architectural Diagrams

How to work with large codebases in Cursor

Cursor – Large Codebases

Large Codebases

How to leverage documentation effectively in Cursor through prompting, external sources, and internal context

Cursor – Working with Documentation

Working with Documentation

Guide to migrating VS Code settings, extensions, and profiles to Cursor using one-click import or manual methods

Cursor – VS Code

VS Code

Guide to migrating from JetBrains IDEs to Cursor: setup extensions, themes, shortcuts, and language-specific tools

Cursor – JetBrains

JetBrains

Comprehensive guide to setting up Python development in Cursor with essential extensions, linting and tools

Cursor – Python

Python

Complete guide to JavaScript & TypeScript development in Cursor, featuring extensions, AI tools, and framework support

Cursor – JavaScript & TypeScript

JavaScript & TypeScript

Guide to integrating Cursor with Swift development workflows using Xcode, hot reloading, and Sweetpad tools

Cursor – iOS & macOS (Swift)

iOS & macOS (Swift)

Complete guide to setting up Java development in Cursor: JDK setup, extensions, debugging, and Maven/Gradle integration

Cursor – Java

Java

book-open

Get started with Cursor IDE & learn core features: Tab completion, Chat AI pair programming, and Cmd-K editing

Learn about Cursor's core AI features, settings, and customization options for powerful code development.

Cursor – Introduction

Introduction

Cursor – Migrate from VS Code

Migrate from VS Code

Cursor – Migrate from JetBrains IDEs

Migrate from JetBrains IDEs

Learn how Tab uses AI to suggest multi-line edits, code fixes, and context-aware completions directly in the editor

Cursor – Overview

Overview

Compares Cursor's multi-line edits and instruction-based completions to GitHub Copilot's single-line insertions

Cursor – Tab vs GitHub Copilot

Tab vs GitHub Copilot

Learn how Cursor's Tab feature automates module imports in TypeScript and Python projects while you code

Cursor – Auto-import

Auto-import

Learn to navigate code efficiently using Tab in peek views, prediction, and partial accepts

Cursor – Advanced Features

Advanced Features

Natural language interface for exploring, editing, and managing code with contextual AI assistance in Chat mode

Autonomous AI coding agent that independently explores, plans, and executes complex codebase changes with full tools

Cursor – Agent Mode

Agent Mode

Ask mode lets you explore and learn about codebases through AI search and queries without making changes

Cursor – Ask mode

Ask mode

Make precise code changes with explicit file targeting - a focused editing mode with user-controlled tooling

Cursor – Manual Mode

Manual Mode

Create custom Cursor modes with tailored tools and prompts to personalize AI assistance for specific workflows

Cursor – Custom Modes

Custom Modes

A guide to all available tools in Cursor's Chat modes for searching, editing, and interacting with your codebase

Cursor – Tools

Tools

Learn how to apply, accept, or reject code suggestions from chat using Cursor's Apply feature

Cursor – Apply

Apply

Learn how to use Cmd/Ctrl K in Cursor to generate, edit code and ask questions with the Prompt Bar

Use Cmd K in Cursor terminal to generate and run commands through a prompt bar interface

Cursor – Terminal Cmd K

Terminal Cmd K

Learn how to generate contextual Git commit messages automatically using Cursor's sparkle icon or shortcuts

Cursor – AI Commit Message

AI Commit Message

A guide to using Notepads in Cursor for sharing context between Composers and Chat interactions

Cursor – Notepads (Beta)

Notepads (Beta)

Complete reference for all keyboard shortcuts in Cursor, including Chat, Tab, Terminal and code selection commands

Cursor – Keyboard Shortcuts

Keyboard Shortcuts

Guide to using @ symbols in Cursor for referencing code, files, documentation and other context in chats

Learn how to reference files using @ in Cursor's Chat and Cmd K, with preview and chunking features

Cursor – @Files

@Files

Reference folders as context in Chat & Composer for enhanced AI conversations

Cursor – @Folders

@Folders

Learn how to reference code snippets in Cursor using @Code symbol and keyboard shortcuts for adding to Chat

Cursor – @Code

@Code

Learn how to use, add, and manage custom documentation as context in Cursor using @Docs

Cursor – @Docs

@Docs

Reference Git commits, diffs, and PRs as context in Cursor Chat to analyze changes and generate commit messages

Cursor – @Git

@Git

Enables web search to dynamically add recent online information and documentation as context in Cursor commands

Cursor – @Web

@Web

Add nearby code definitions to Cmd K context using the @Definitions symbol

Cursor – @Definitions

@Definitions

Learn how to include and manage web links as context in Cursor's AI features by pasting URLs

Cursor – @Link

@Link

Access and reference linting errors in your codebase

Cursor – @Lint Errors

@Lint Errors

Reference recently modified code as context for AI chat using the @Recent Changes symbol

Cursor – @Recent Changes

@Recent Changes

Reference and apply project-specific rules and guidelines using the @Cursor Rules symbol in chats and prompts

Cursor – @Cursor Rules

@Cursor Rules

Reference and include notepad contexts in Cursor conversations for reusable development workflows

MCP Tools

Notion

Figma

Linear

GitHub

Playwright

Sentry

DuckDB

PostHog

Stripe

PayPal

dbt Labs

Browserbase

Netlify

Shopify

Snyk

Zapier

Heroku