::-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 {
  font-family: unset;
}

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;
}

.equal-table-columns table {
  width: 100%;
  table-layout: fixed;
}

.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;
  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 svg:not(.no-invert) [fill="white"] {
  fill: black;
}

/* Sidebar keyboard shortcuts styling */
.kbd-shortcut {
  margin-left: auto;
  padding: 2px 6px;
  font-size: 0.75rem;
  font-family: monospace;
  background-color: rgba(0, 0, 0, 0.08);
  border-radius: 4px;
  color: #666;
  white-space: nowrap;
  line-height: 1.2;
  font-weight: 500;
  opacity: 0.7;
  transition: opacity 0.2s ease;
}

/* Dark mode styling for shortcuts */
html.dark .kbd-shortcut {
  background-color: rgba(255, 255, 255, 0.1);
  color: #aaa;
}

/* Hover effect */
nav a:hover .kbd-shortcut {
  opacity: 1;
}

/* Ensure proper spacing in sidebar links */
nav a[href] {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px;
}

/* Prevent text wrapping in sidebar links */
nav a[href]>span:first-child {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

p[data-component-part="step-title"] {
  margin-bottom: 0;
}

/* Step component content styling */
div[data-component-part="step-content"] p {
  margin: 0;
}

/* Chat Assistant Sheet - Solid background for better visibility */
#chat-assistant-sheet {
  background-color: white;
}

html.dark #chat-assistant-sheet {
  background-color: #0c0c15;
}

#!/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);
}); 

// Assistant CTA Handler
document.addEventListener('DOMContentLoaded', function () {
  // Get the CTA button
  const ctaButton = document.getElementById('ask-assistant-cta');

  if (ctaButton) {
    // Remove inline onClick and add proper event listener
    ctaButton.removeAttribute('onClick');

    ctaButton.addEventListener('click', function (e) {
      e.preventDefault();

      // Find the assistant entry element
      const assistantEntry = document.getElementById('assistant-entry');

      if (assistantEntry) {
        // Trigger click on assistant entry
        assistantEntry.click();

        // Optional: Scroll to the assistant entry if needed
        setTimeout(() => {
          assistantEntry.scrollIntoView({
            behavior: 'smooth',
            block: 'center'
          });
        }, 100);

        // Optional: Focus on the input field if it exists
        setTimeout(() => {
          const inputField = assistantEntry.querySelector('input, textarea');
          if (inputField) {
            inputField.focus();
          }
        }, 300);
      } else {
        console.warn('Assistant entry element not found');

        // Fallback: Try to find and trigger the chat button
        const chatButton = document.querySelector('[aria-label*="chat"], [aria-label*="assistant"], .chat-trigger');
        if (chatButton) {
          chatButton.click();
        }
      }
    });

    // Add hover effect via JavaScript for better control
    ctaButton.addEventListener('mouseenter', function () {
      this.style.transform = 'translateY(-2px)';
    });

    ctaButton.addEventListener('mouseleave', function () {
      this.style.transform = 'translateY(0)';
    });
  }
});

// Helper function to programmatically open assistant
window.openAssistant = function (prefillText = '') {
  const assistantEntry = document.getElementById('assistant-entry');

  if (assistantEntry) {
    assistantEntry.click();

    // If there's prefill text, try to insert it
    if (prefillText) {
      setTimeout(() => {
        const inputField = assistantEntry.querySelector('input, textarea');
        if (inputField) {
          inputField.value = prefillText;
          inputField.dispatchEvent(new Event('input', { bubbles: true }));
          inputField.focus();
        }
      }, 500);
    }
  }
};


Reference specific code snippets in Cursor using @Code

Cursor – @Code

@Code

Cursor

globe

newspaper

headset

Learn about Cursor and how to get started

Cursor – Welcome

Welcome

Get Cursor installed on your computer in just a few minutes

Cursor – Installation

Installation

Cursor – Quickstart

Quickstart

Learn the key features that make Cursor powerful

Cursor – Concepts

Concepts

Autocompletion with multi-line edits, cross-file suggestions, and context-aware code completions

Cursor – Tab

Cursor – Background Agents

Background Agents

Run coding agents from any device with seamless handoff to desktop

Cursor – Web & Mobile

Web & Mobile

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

Cursor – Rules

Rules

Cursor – Memories

Memories

How Cursor learns your codebase for better understanding

Cursor – Codebase Indexing

Codebase Indexing

Control file access with .cursorignore and .cursorindexingignore

Cursor – Ignore files

Ignore files

Connect external tools and data sources to Cursor using MCP

Cursor – Model Context Protocol (MCP)

Model Context Protocol (MCP)

Cursor – Slack

Slack

Cursor – Models

Models

Cursor – API Keys

API Keys

Keyboard shortcuts and keybindings in Cursor

Cursor – Keyboard Shortcuts

Keyboard Shortcuts

Cursor – Themes

Themes

Cursor – Shell Commands

Shell Commands

Cursor – Models & Pricing

Pricing

Cursor – Pricing

Managing Cursor subscriptions, refunds, and invoices 

Cursor – Billing

Billing

Cursor – Update Access

Update Access

Cursor – Common Issues

Common Issues

Cursor – Getting a Request ID

Getting a Request ID

Cursor – Troubleshooting Guide

Troubleshooting Guide

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

Import VS Code settings and extensions with one click

Cursor – VS Code

VS Code

Migrate from JetBrains IDEs to Cursor with familiar tools

Cursor – JetBrains

JetBrains

Set up Python development with extensions and linting tools

Cursor – Python

Python

JavaScript and TypeScript development with framework support

Cursor – JavaScript & TypeScript

JavaScript & TypeScript

Integrate Cursor with Xcode for Swift development

Cursor – iOS & macOS (Swift)

iOS & macOS (Swift)

Set up Java development with JDK, extensions, and build tools

Cursor – Java

Java

book-open

Explore and install MCP servers for Cursor

Cursor – MCP Servers

MCP Servers

Generate install links for Tools & MCP Servers

Cursor – Developers

Developers

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

Cursor – Welcome to Cursor

Welcome to Cursor

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

Cursor – Introduction

Introduction

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

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

Cursor – FAQ

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

Cursor – Migrate from VS Code

Migrate from VS Code

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

Cursor – Migrate from JetBrains IDEs

Migrate from JetBrains IDEs

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

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

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

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

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

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

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

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

Get Started

Core

Context

Integrations

Models

Configuration

Account

Troubleshooting

@Code