Local Docs

PreviousNext

Set up Plate's documentation locally for version-controlled, AI-enhanced development.

Host Plate's documentation locally to integrate it directly with your project. This setup ensures your team works with documentation that matches your Plate version while enabling AI tools to better understand and assist with your codebase.

Why Host Documentation Locally?

Local documentation provides distinct advantages over external sites:

  • Version Lock-In: Keep documentation synchronized with your project's Plate version. Avoid confusion from features or APIs in newer, unadopted Plate releases.
  • AI-Ready Development:
    • Better than llms.txt: While dumping docs into a single text file is common for LLM context, this breaks down with large documentation (exceeding typical 100k token limits). Our structured, local setup lets AI tools access exactly what they need.
    • Direct Access for AI Tools: Your AI-assisted IDE gets direct access to version-specific documentation, enabling accurate code generation and contextual help with your Plate setup.
    • Structured for AI Tasks: AI tools can help with tasks like translating docs, creating summaries, or updating documentation between Plate versions.
  • Customization & Control: Modify documentation appearance and structure to match your project needs.
  • Easy Updates: Treat documentation like code - review, update, and version control it with your codebase.
  • Fast Access: Get reliable, quick access to documentation.
  • Central Hub: Keep Plate docs alongside documentation for other libraries in one place.

Setup Guide

There are two ways to set up local documentation:

Option 1: Docs App

This option sets up a complete documentation site using Fumadocs, providing a searchable, navigable interface.

Create Fumadocs App

Set up a Fumadocs app which provides the Next.js-based framework for your documentation site:

pnpm create fumadocs-app

During setup:

  • Name: Enter docs when prompted
  • Choose your preferred options (defaults work well)
  • The wizard will create a docs directory with all necessary files

Navigate to your newly created docs directory:

cd docs

For detailed Fumadocs setup, see the Fumadocs UI documentation.

Create components.json

In your docs directory, create a components.json file. You have two options:

Option A: Command line

echo '{\n  "$schema": "https://ui.shadcn.com/schema.json",\n  "style": "new-york",\n  "rsc": true,\n  "tsx": true,\n  "tailwind": {\n    "config": "",\n    "css": "app/global.css",\n    "baseColor": "neutral",\n    "cssVariables": true,\n    "prefix": ""\n  },\n  "aliases": {\n    "components": "@/components",\n    "utils": "@/lib/utils",\n    "ui": "@/components/ui",\n    "lib": "@/lib",\n    "hooks": "@/hooks"\n  },\n  "iconLibrary": "lucide"\n}' > components.json

Option B: Copy and paste

Create a new file called components.json in your docs directory with this content:

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "new-york",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "config": "",
    "css": "app/global.css",
    "baseColor": "neutral",
    "cssVariables": true,
    "prefix": ""
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
    "ui": "@/components/ui",
    "lib": "@/lib",
    "hooks": "@/hooks"
  },
  "iconLibrary": "lucide"
}

Add Plate Documentation

Now, fetch the Plate documentation files and necessary MDX components.

pnpm dlx shadcn@latest add @plate/fumadocs

Version-Specific Documentation

The command above installs the latest Plate documentation. For projects on older Plate versions (minimum v48.0.0), specify your version:

  1. Go to Plate's public registry on GitHub.
  2. Use the tag switcher to select your Plate version.
  3. Copy the versioned URL (e.g., v48).
  4. Replace https://platejs.org/r/ in the shadcn command with this URL.

Run Fumadocs App

Start the development server:

pnpm run dev

Your documentation site will be available at:

  • Plate docs: http://localhost:3000/docs/plate

Customize

Enhance your docs with Fumadocs features.

Option 2: MDX Files Only

If you just want the documentation files without setting up a full site, you can add them directly to your existing project:

# Run from your project root (wherever you want the docs)
npx shadcn@latest add @plate/docs

This will:

  • Install MDX documentation files in your project (typically in a docs/ or similar directory)
  • Skip the Fumadocs setup entirely
  • Give you raw MDX files to use however you need

Use cases:

  • Reference documentation directly in your codebase
  • Integrate with your existing documentation setup
  • Make docs available to AI tools for better context

Advanced Integration

MCP Integration

Enable AI tools to work with your local documentation by adding the Plate server to your .cursor/mcp.json (or equivalent).

{
  "mcpServers": {
    "shadcn": {
      "description": "Shadcn and Plate MCP",
      "command": "npx",
      "args": [
        "shadcn@latest",
        "mcp"
      ]
    }
  }
}

Your AI tools can then:

  • Access documentation context for better code assistance
  • Help manage and update documentation
  • Generate code with proper imports and configurations
  • Assist with editor setup and feature integration

See the MCP Guide for more details.

Once configured, try asking your AI:

"Help me understand how the Plate AI plugin works"
"How to create a custom plugin?"
"What's new in the latest Plate version?"

Centralizing Multiple Documentations

Your content/docs/ directory can host documentation for multiple libraries. Replicate the process for Plate to add docs for other internal or external tools:

content/
└── docs/
    ├── plate/         # Plate documentation
    │   └── ...
    ├── other-library/ # Documentation for another library
    │   └── ...
    └── index.mdx      # Main landing page for all docs

This creates a unified, version-controlled knowledge base for your project stack.

Node.jsMCP