Plate Playground Template: Next.js Editor Starter With MCP Config

What is the Plate Playground Template?

It is a Next.js template that bundles the Plate editor with AI, plugins and components. The README lists Next.js 16, Plate, shadcn/ui and an MCP link to the Plate docs. You can install it with a shadcn command or use it as a GitHub template.

It is not an MCP server of its own. The repository includes a .mcp.json that starts the shadcn CLI's MCP server over stdio. That gives an AI coding agent registry access the moment you open the project.

What changes in your agent's output

• The agent starts from a working editor route, so it edits real code instead of scaffolding one.
• Registry items are searched and installed through the shadcn server rather than written from memory.
• The project already carries agent folders and a lockfile for skills, so the agent has local conventions to follow.
• Editor, AI and upload settings are in the README, so the agent can tell which environment values the project needs.

How the setup works

1. Run the shadcn add command for the AI editor, or create a repository from the template.
2. Install dependencies with bun and copy the example environment file.
3. Start the dev server and open the editor page, then let your agent use the MCP entry in the project.

Who the Plate Playground Template is for

Best for

• Builders who want a running rich-text editor with AI features to modify, not a blank project.
• Teams using the Plate MCP setup who want a project where that config is already in place.
• Agent workflows that rely on the shadcn MCP server for installing components.

Not for

• Anyone wanting a standalone MCP server to plug into another project. Use the Plate MCP setup for that.
• Production use without review. The README says to replace the upload development check with real session and permission checks and add per-user limits.
• Non-React stacks, since the template is Next.js.

Use it with UiChemy

The template produces a React editor for an app you host. For a WordPress site, UiChemy builds there: AI to WordPress imports an existing AI build, and Composer edits it inside Elementor or Gutenberg. Click Get Started on uichemy.com.

Connect Plate Playground Template: Next.js Editor Starter With MCP Config to your AI client

npx shadcn@latest add @plate/editor-ai

1. Pick an install route

   Run npx shadcn@latest add @plate/editor-ai, or use the repository as a GitHub template and run bun install. Node.js 20 or newer and bun are required.

2. Set the environment

   Copy .env.example to .env.local and set UPLOADTHING_TOKEN. AI works when you enter your own AI Gateway key in the editor settings.

3. Start the app

   Run bun dev and open http://localhost:3000/editor.

4. Use the MCP file

   The .mcp.json in the repository runs npx -y shadcn@latest mcp over stdio. Most clients pick up a project-level file, or copy the entry into your client config. Claude reads a project .mcp.json directly.

Client configuration

{
  "mcpServers": {
    "plate": {
      "command": "npx",
      "args": ["-y", "shadcn@latest", "mcp"],
      "type": "stdio"
    }
  }
}

Endpoints and ports

What you can do with it

• Next.js 16 starterA working app with the Plate editor, plugins and components, ready to run on a dev server.
• AI in the editorThe template installs the AI editor through the shadcn registry. You supply your own AI Gateway key in the editor settings.
• MCP file includedA project .mcp.json points the agent at the shadcn CLI server, the same one the Plate docs use.
• Agent folders presentThe repository includes agent configuration folders and a skills lockfile alongside the app code.
• Upload setupUploadThing handles file uploads, and the README warns to replace the dev-only check before production.
• Two install routesUse the shadcn CLI command or generate a repository from the template.

Tools it exposes

Frequently asked questions