MCP DEMO
About
This project demonstrates a client-server architecture using a custom MCP (Model Configuration Protocol) server integrated with MCP tools to dynamically generate and return React + TypeScript code.
Details
- Author
- Pranoschal
- Downloads
- 144
- Categories
- Other
Jump to
- Bootstrapped with create-next-app for quick setup
- Automatic font optimization via next/font
- Uses Geist font family from Vercel
- Page auto-updates on file edits
- Development server with hot reloading
Setting up with Highlight
This MCP is not yet compatible with Highlight’s one-click setup. However, you can still use it with Highlight by following these steps:
- Download and install Highlight from highlightai.com/download
- Navigate to the plugins tab and select "Add Custom Plugin"
-
Configure the plugin with the settings below
Plugin Name
MCP DEMOCommand (node, npx, python, etc.)Please refer to the README for specific instructions on how to obtain API keys or other required environment variables.
- Enable "Start Automatically" if you want the plugin to start when Highlight launches
From the repository
Run the development server with npm run dev, yarn dev, pnpm dev, or bun dev. Open http://localhost:3000 to see the result. Edit app/page.tsx to modify the page; it auto-updates.
Claude Desktop / Cursor
Paste into your MCP client config file to install this server.
{
"mcpServers": {
"mcp demo": {
"mcp-demo-pranoschal": {
"command": "bun",
"args": [
"dev"
]
}
}
}
}McpServers
{
"mcp-demo-pranoschal": {
"command": "bun",
"args": [
"dev"
]
}
}This is a Next.js project bootstrapped with create-next-app.
Getting Started
First, run the development server:
npm run dev
or
yarn dev
or
pnpm dev
or
bun dev
Open http://localhost:3000 with your browser to see the result.
You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.
This project uses next/font to automatically optimize and load Geist, a new font family for Vercel.
Learn More
To learn more about Next.js, take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
You can check out the Next.js GitHub repository - your feedback and contributions are welcome!
Deploy on Vercel
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
Check out our Next.js deployment documentation for more details.
Sign in to leave a review
Use Google, GitHub, or an email account so ratings stay tied to real people.
No reviews posted yet.
