My First MCP Server
Supports using Babel for Fast Refresh through the official Vite plugin
Provides ESLint configuration for type-aware linting with React-specific rules
Provides a minimal setup for React development with HMR (Hot Module Replacement) functionality
Supports using SWC as an alternative to Babel for Fast Refresh through Vite plugins
Enables TypeScript support for type-safe React development with proper type checking
Uses Vite as the build tool and development server with Fast Refresh capabilities
Click on "Deploy Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type
@followed by the MCP server name and your instructions, e.g., "@My First MCP Serverscan my project for TODO comments and generate a summary"
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
React + TypeScript + Vite
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
Currently, two official plugins are available:
@vitejs/plugin-react uses Babel for Fast Refresh
@vitejs/plugin-react-swc uses SWC for Fast Refresh
Expanding the ESLint configuration
If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
export default tseslint.config([
globalIgnores(['dist']),
{
files: ['**/*.{ts,tsx}'],
extends: [
// Other configs...
// Remove tseslint.configs.recommended and replace with this
...tseslint.configs.recommendedTypeChecked,
// Alternatively, use this for stricter rules
...tseslint.configs.strictTypeChecked,
// Optionally, add this for stylistic rules
...tseslint.configs.stylisticTypeChecked,
// Other configs...
],
languageOptions: {
parserOptions: {
project: ['./tsconfig.node.json', './tsconfig.app.json'],
tsconfigRootDir: import.meta.dirname,
},
// other options...
},
},
])You can also install eslint-plugin-react-x and eslint-plugin-react-dom for React-specific lint rules:
// eslint.config.js
import reactX from 'eslint-plugin-react-x'
import reactDom from 'eslint-plugin-react-dom'
export default tseslint.config([
globalIgnores(['dist']),
{
files: ['**/*.{ts,tsx}'],
extends: [
// Other configs...
// Enable lint rules for React
reactX.configs['recommended-typescript'],
// Enable lint rules for React DOM
reactDom.configs.recommended,
],
languageOptions: {
parserOptions: {
project: ['./tsconfig.node.json', './tsconfig.app.json'],
tsconfigRootDir: import.meta.dirname,
},
// other options...
},
},
])This server cannot be deployed
Maintenance
Related MCP Connectors
An MCP server that integrates with Discord to provide AI-powered features.
MCP server for AI agent profiles and smart notes. 60+ coding prompt packs with expert personas.
An MCP server that gives your AI access to the source code and docs of all public github repos
- JamOAuthdev.jam.mcp
The Jam MCP server provides AI tools with instant bug context without manual prompting, enabling a streamlined workflow from bug identification to ticket creation and pull request generation without switching between tools.
Related MCP Servers
- -licenseNot gradedqualityNot gradedmaintenanceAn MCP server that enables developers to summon AI development team agents directly from their IDE to help with tasks like PR reviews, security evaluation, and CI/CD deployment setup.-
- FlicenseNot gradedqualityDmaintenanceA streamlined MCP server that provides essential AI-powered tools for interactive development chat and systematic root cause analysis. It supports multiple AI providers to help developers brainstorm technical solutions and perform evidence-based debugging.-
- AlicenseNot gradedqualityDmaintenanceA production-ready MCP server that provides AI assistants with comprehensive GitHub developer tooling including PR analysis, code review, changelog generation, dependency auditing, commit summarization, and refactoring suggestions.2 npmISC
- AlicenseNot gradedqualityDmaintenanceAn intelligent MCP server that provides tools for code analysis using OpenAI API, code collection, and documentation generation.58 npmMIT