Back to MCP directory
publicPublicdnsLocal runtime

mcp-client-server-demo

React + TypeScript + Vite 项目模板,提供快速开发环境配置,支持热更新和ESLint规则。

article

README

🚀 React + TypeScript + Vite

本模板为使用 Vite 快速开启 React 项目提供了最小化配置,具备 HMR(热模块替换)功能,并包含了一些 ESLint 规则。

目前有两个官方插件可供使用:

🚀 快速开始

此模板提供了使用 Vite 快速入门 React 的最小化设置,带有 HMR(热模块替换)和一些 ESLint 规则。你可以根据需求选用官方插件实现快速刷新。

✨ 主要特性

  • 提供最小化配置,可快速开启 React 项目。
  • 支持 HMR(热模块替换),提升开发效率。
  • 包含 ESLint 规则,保证代码质量。
  • 有两个官方插件可供选择,实现快速刷新。

📚 详细文档

扩展 ESLint 配置

如果你正在开发一个生产应用,我们建议你更新配置以启用类型感知的 lint 规则:

1. 在顶级 parserOptions 属性中进行如下设置

export default tseslint.config({
  languageOptions: {
    // 其他选项...
    parserOptions: {
      project: ['./tsconfig.node.json', './tsconfig.app.json'],
      tsconfigRootDir: import.meta.dirname,
    },
  },
})

2. 替换配置项

tslint.configs.recommended 替换为 tslint.configs.recommendedTypeCheckedtslint.configs.strictTypeChecked

3. 可选配置

可选地添加 ...tslint.configs.stylisticTypeChecked

4. 安装并更新配置

安装 eslint-plugin-react 并更新配置:

// eslint.config.js
import react from 'eslint-plugin-react'

export default tseslint.config({
  // 设置React版本
  settings: { react: { version: '18.3' } },
  plugins: {
    // 添加React插件
    react,
  },
  rules: {
    // 其他规则...
    // 启用它的推荐规则
    ...react.configs.recommended.rules,
    ...react.configs['jsx-runtime'].rules,
  },
})
help

Runtime guide

cloud

Hosted runtime

Hosted servers run from a provider-managed environment. You usually connect the MCP client to the hosted endpoint or follow the provider's authorization flow, without keeping a local process alive

  1. Open provider connection page
  2. Authorize or copy endpoint
  3. Connect from your MCP client
terminal

Local runtime / other methods

Local servers run on your own machine or infrastructure. You normally copy the server_config into your MCP client, install the required package, and provide env variables from env_schema when needed

  1. Copy server_config
  2. Install required package
  3. Fill env variables and restart client