create-mcp-use-app
Advanced tools
🚀 Create mcp-use App is the fastest way to scaffold a new MCP (Model Context Protocol) application. With just one command, you get a fully configured TypeScript project with hot reload, automatic inspector, and UI widget support - everything you need to build powerful MCP servers.
| Package | Description | Version |
|---|---|---|
| mcp-use | Core MCP framework |  |
| @mcp-use/cli | Build tool for MCP apps |  |
| @mcp-use/inspector | Web-based MCP inspector |  |
Create a new MCP application in seconds:
npx create-mcp-use-app my-mcp-server
cd my-mcp-server
npm run dev
That's it! Your MCP server is running at http://localhost:3000 with the inspector automatically opened in your browser.
Running create-mcp-use-app sets up a complete MCP development environment:
my-mcp-server/
├── package.json # Pre-configured with all scripts
├── tsconfig.json # TypeScript configuration
├── .env.example # Environment variables template
├── .gitignore # Git ignore rules
├── README.md # Project documentation
├── src/
│ └── index.ts # MCP server entry point with example tools
├── resources/ # UI widgets directory
│ └── example-widget.tsx # Example React widget
└── dist/ # Build output (generated)
| Feature | Description |
|---|---|
| 📝 TypeScript | Full TypeScript setup with proper types |
| 🔥 Hot Reload | Auto-restart on code changes during development |
| 🔍 Auto Inspector | Inspector UI opens automatically in dev mode |
| 🎨 UI Widgets | React components that compile to standalone pages |
| 🛠️ Example Tools | Sample MCP tools, resources, and prompts |
| 📦 Build Scripts | Ready-to-use development and production scripts |
| 🚀 Production Ready | Optimized build configuration |
Run without any arguments to enter interactive mode:
npx create-mcp-use-app
You'll be prompted for:
Specify the project name directly:
npx create-mcp-use-app my-project
# Use a specific template
npx create-mcp-use-app my-project --template apps-sdk
npx create-mcp-use-app my-project --template mcp-ui
# Use a specific package manager
npx create-mcp-use-app my-project --npm
npx create-mcp-use-app my-project --yarn
npx create-mcp-use-app my-project --pnpm
# Skip dependency installation
npx create-mcp-use-app my-project --no-install
The starter template includes:
Perfect for getting started with all available features or building full-featured MCP servers.
The apps-sdk template includes:
Ideal for building MCP servers that integrate with OpenAI's Apps SDK.
The mcp-ui template includes:
Best for building MCP servers with rich interactive UI components.
The scaffolded project includes these dependencies:
mcp-use - The MCP framework@mcp-use/cli - Build and development tool@mcp-use/inspector - Web-based debuggertypescript - TypeScript compilertsx - TypeScript executor for development@types/node - Node.js type definitionsDifferent templates may include additional dependencies based on their features:
Once your project is created, you can:
npm run dev
# or
yarn dev
# or
pnpm dev
This will:
npm run build
Creates an optimized build in the dist/ directory.
npm run start
Runs the production build.
After creating your app, here's what to do next:
Open src/index.ts to see how to:
The inspector automatically opens at http://localhost:3000/inspector where you can:
Edit resources/example-widget.tsx or create new widgets:
import React from 'react'
import { useMcp } from 'mcp-use/react'
export default function MyWidget() {
const { callTool } = useMcp()
const handleClick = async () => {
const result = await callTool('my_tool', {
param: 'value',
})
console.log(result)
}
return (
<div>
<button onClick={handleClick}>Call MCP Tool</button>
</div>
)
}
Use the MCP server with any MCP-compatible client:
import { MCPClient, MCPAgent } from 'mcp-use'
import { ChatOpenAI } from '@langchain/openai'
const client = new MCPClient({
url: 'http://localhost:3000/mcp',
})
const agent = new MCPAgent({
llm: new ChatOpenAI(),
client,
})
const result = await agent.run('Use my MCP tools')
The created project includes a .env.example file:
# Server Configuration
PORT=3000
NODE_ENV=development
# OAuth (if using authentication)
OAUTH_CLIENT_ID=your_client_id
OAUTH_CLIENT_SECRET=your_client_secret
# Database (if using database)
DATABASE_URL=postgresql://localhost/myapp
# Observability (optional)
LANGFUSE_PUBLIC_KEY=your_public_key
LANGFUSE_SECRET_KEY=your_secret_key
Copy to .env and configure as needed:
cp .env.example .env
The tsconfig.json is pre-configured for MCP development:
{
"compilerOptions": {
"target": "ES2020",
"module": "ESNext",
"jsx": "react-jsx",
"strict": true,
"esModuleInterop": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true
}
}
server.tool('search_database', {
description: 'Search for records in the database',
parameters: z.object({
query: z.string().describe('Search query'),
limit: z.number().optional().default(10),
}),
execute: async ({ query, limit }) => {
// Your tool logic here
const results = await db.search(query, limit)
return { results }
},
})
server.resource('user_profile', {
description: 'Current user profile data',
uri: 'user://profile',
mimeType: 'application/json',
fetch: async () => {
const profile = await getUserProfile()
return JSON.stringify(profile)
},
})
server.prompt('code_review', {
description: 'Review code for best practices',
arguments: [
{ name: 'code', description: 'Code to review', required: true },
{ name: 'language', description: 'Programming language', required: false },
],
render: async ({ code, language }) => {
return `Please review this ${
language || ''
} code for best practices:\n\n${code}`
},
})
Command not found:
# Make sure you have Node.js 18+ installed
node --version
# Try with npx
npx create-mcp-use-app@latest
Permission denied:
# On macOS/Linux, you might need sudo
sudo npx create-mcp-use-app my-app
Network issues:
# Use a different registry
npm config set registry https://registry.npmjs.org/
Port already in use:
# Change the port in your .env file
PORT=3001
We welcome contributions! To contribute:
See our contributing guide for more details.
MIT © mcp-use
FAQs
Create MCP-Use apps with one command
The npm package create-mcp-use-app receives a total of 1,119 weekly downloads. As such, create-mcp-use-app popularity was classified as popular.
We found that create-mcp-use-app demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 3 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
/Product
Socket Firewall Free is now bundled into Docker Hardened Images, adding build-time and dependency-install supply chain protection on top of hardened base images for Node.js, Python, and Rust.
Security News
Season’s greetings from Socket, and here’s to a calm end of year: clean dependencies, boring pipelines, no surprises.
Research
/Security News
Impostor NuGet package Tracer.Fody.NLog typosquats Tracer.Fody and its author, using homoglyph tricks, and exfiltrates Stratis wallet JSON/passwords to a Russian IP address.