Plate Editor Template
Plate AI template with React 19, Next 16, Tailwind 4, MCP.
What is Plate Editor Template?
Plate Editor Template is a Model Context Protocol (MCP) server that allows AI assistants like Claude, Cursor, and VS Code to plate ai template with react 19, next 16, tailwind 4, mcp.
Plate AI template with React 19, Next 16, Tailwind 4, MCP.
This server falls under the Developer Tools category on MCPgee, the world's largest MCP server directory with 33,000+ servers.
Features
- Plate AI template with React 19, Next 16, Tailwind 4, MCP.
Use Cases
Maintainer
Works with
Installation
Manual Installation
npx plate-playground-templateConfiguration
Configuration Details
claude_desktop_config.json
Performance
Response Metrics
Resource Usage
How to Set Up and Use Plate Editor Template
Plate Playground Template is a Next.js 16 starter template that combines the Plate rich-text editor framework with AI capabilities and an MCP integration layer, built on React 19, Tailwind CSS 4, and shadcn/ui components. It gives developers a fully configured environment to experiment with AI-powered editing features — such as AI-assisted writing and formatting — without having to wire up the Plate components, AI gateway, and MCP server from scratch. The template is the fastest way to prototype or launch a production-ready rich-text editor application that connects to AI models through a standardized MCP interface.
Prerequisites
- Node.js 20 or higher
- bun package manager installed (https://bun.sh)
- An AI Gateway API key from Vercel (https://vercel.com/ai-gateway) for the AI editing features
- An UploadThing account and token for file/image upload support (https://uploadthing.com/dashboard)
- An MCP-compatible client or understanding that the MCP server is embedded in the Next.js app
Create a new project from the template
Use the shadcn CLI to scaffold a new project with the Plate AI editor template. This is the recommended method as it sets up all the required components in one step.
npx shadcn@latest add @plate/editor-aiOr use the GitHub template directly
Alternatively, click 'Use this template' on the GitHub repository page, then clone your new repo and install dependencies with bun.
git clone https://github.com/your-username/your-repo-name.git
cd your-repo-name
bun installConfigure environment variables
Copy the example environment file and fill in your API keys. AI_GATEWAY_API_KEY powers the AI writing features; UPLOADTHING_TOKEN enables file uploads inside the editor.
cp .env.example .env.local
# Edit .env.local:
# AI_GATEWAY_API_KEY=your_vercel_ai_gateway_key
# UPLOADTHING_TOKEN=your_uploadthing_tokenStart the development server
Run the Next.js development server with bun. The editor and MCP endpoint will be available at localhost:3000.
bun devOpen the editor in your browser
Navigate to the editor route to see the Plate AI editor in action. You can test AI writing assistance, rich formatting, and the MCP integration from this page.
# Open in browser:
# http://localhost:3000/editorPlate Editor Template Examples
Client configuration
The MCP server is embedded in the Next.js application and served over HTTP. Connect an external MCP client to the app's MCP endpoint once the dev server is running.
{
"mcpServers": {
"plate-editor": {
"url": "http://localhost:3000/api/mcp"
}
}
}Prompts to try
Things you can do inside the Plate AI editor or via an MCP client connected to the running Next.js app.
- "Continue writing this paragraph in the same tone and style."
- "Rewrite the selected text to be more concise."
- "Format the following list as a proper bulleted list with headings."
- "Insert an image upload block at the current cursor position."
- "Summarize the content of this document in three bullet points."Troubleshooting Plate Editor Template
AI features return errors or do not respond after entering the API key
Verify that AI_GATEWAY_API_KEY is set correctly in .env.local and that the Vercel AI Gateway has your chosen model enabled. The gateway key is different from a raw OpenAI API key — you must create a gateway configuration at vercel.com/ai-gateway first.
File uploads fail with 'Invalid token' or 403 errors
Ensure UPLOADTHING_TOKEN is set to a valid token from your UploadThing dashboard. The token format changed in newer versions of UploadThing — use the full token string, not just the app ID.
bun install fails with peer dependency errors on Node.js 18
The template requires Node.js 20 or higher. Run 'node --version' to check your version and upgrade via nvm ('nvm install 20 && nvm use 20') if needed before reinstalling.
Frequently Asked Questions about Plate Editor Template
What is Plate Editor Template?
Plate Editor Template is a Model Context Protocol (MCP) server that plate ai template with react 19, next 16, tailwind 4, mcp. It connects AI assistants to external tools and data sources through a standardized interface.
How do I install Plate Editor Template?
Follow the installation instructions on the Plate Editor Template GitHub repository. Clone the repo, install dependencies, and add the server config to your AI client.
Which AI clients work with Plate Editor Template?
Plate Editor Template works with all major MCP-compatible AI clients including Claude Desktop, Claude Code, Cursor, VS Code (GitHub Copilot), Windsurf, and Cline.
Is Plate Editor Template free to use?
Yes, Plate Editor Template is open source and available under the MIT license. You can use it freely in both personal and commercial projects.
Plate Editor Template Alternatives — Similar Developer Tools Servers
Looking for alternatives to Plate Editor Template? Here are other popular developer tools servers you can use with Claude, Cursor, and VS Code.
Ecc
★ 188.2kThe agent harness performance optimization system. Skills, instincts, memory, security, and research-first development for Claude Code, Codex, Opencode, Cursor and beyond.
Javaguide
★ 155.8kJava 面试 & 后端通用面试指南，覆盖计算机基础、数据库、分布式、高并发、系统设计与 AI 应用开发
Gemini CLI
★ 104.5kA secure MCP server that wraps the Google Gemini CLI, allowing clients to query Gemini models using local OAuth sessions without requiring an API key. It provides tools for model interaction and diagnostics with built-in protection against command in
Awesome MCP Servers
★ 87.3k⭐ Curated list of Model Context Protocol (MCP) servers - tools that extend Claude Desktop, Cursor, Windsurf, and other MCP clients with custom capabilities.
MCP Servers
★ 86.0kModel Context Protocol Servers
CC Switch
★ 77.5kA cross-platform desktop All-in-One assistant for Claude Code, Codex, OpenCode, OpenClaw, Gemini CLI & Hermes Agent. Only official website: ccswitch.io
Browse More Developer Tools MCP Servers
Explore all developer tools servers available in the MCPgee directory. Each server includes setup guides for Claude, Cursor, and VS Code.
Set Up Plate Editor Template in Your Editor
Choose your AI client for step-by-step setup instructions.
Quick Config Preview
Add this to your claude_desktop_config.json or .cursor/mcp.json
Ready to use Plate Editor Template?
Browse our complete directory of 33,000+ MCP servers, read setup guides for your editor, and start building with the Model Context Protocol.