plate-playground-template

This MCP server hosts the Plate Playground template, a Next.js 16 project that integrates Plate AI, plugins, and components for building rich content editors. The server exposes a development environment where you can start the app with bun dev and access the editor UI at the editor route (http://localhost:3000/editor). The setup includes the Plate editor within a Next.js app, styled with shadcn/ui, and wired to MCP capabilities to enable component collaboration, AI-assisted editing, and plugin-driven workflows. Use the provided environment variables to connect to AI gateway services and UploadThing for media/assets management. Once running, you can customize the editor experience, experiment with Plate’s MCP features, and iterate on plugins and components directly in the template.

Prerequisites:

• Node.js 20+ (or ensure bun is installed and available as bun)
• bun package manager

Installation options:

Option 1: Using CLI (Recommended)

• Run the CLI command to add the Plate editor AI package to a project: npx shadcn@latest add @plate/editor-ai

Option 2: Using the Template

• Use the provided template to create a new project (via GitHub template): Use this template: https://github.com/udecode/plate-playground-template/generate
• Then install dependencies: bun install

After installation, copy the example environment file and configure the needed keys as described in the Development steps (AI_GATEWAY_API_KEY and UPLOADTHING_TOKEN). Then start the development server with bun dev.

To run the server:

• Ensure you are in the project directory
• Run: bun dev

Open http://localhost:3000/editor to view the editor.

Tips and notes:

• Prerequisites mention Node.js 20+ and bun; using bun is common for this template.
• AI_GATEWAY_API_KEY and UPLOADTHING_TOKEN must be supplied in .env.local (as shown in .env.example) to enable AI features and media uploads.
• The editor URL is /editor; you can customize routes or components within the Next.js app to suit your MCP workflow.
• If you encounter port conflicts, check that the dev server is listening on the expected port (default 3000).
• This template emphasizes Plate integration; explore adding or configuring MCP-enabled components and plugins to extend editor capabilities.