STARWARCLOUD STARWAR.AI
返回市场
介质MCP

介质MCP

作者：andrewtdiz2 星标更新：2025-09-15
安装使用来源：spider==github.com

项目介绍

MDMCP - Markdown MCP

Markdown MCP 是一个更精确、令牌高效的框架，用于构建 MCP 服务器。

前端截图 MCP 服务器截图

这是一个统一的单仓库，包含一个 Next.js 前端应用和一个 MCP（模型上下文协议）服务器，用于提供 Markdown 文本服务。该项目提供了一个完整的解决方案，用于渲染和提供带有动态模板支持和现代网页界面的 Markdown 内容。

🚀 快速开始

先决条件

  • Node.js >= 18.0.0
  • npm（随 Node.js 一起提供）
  • Git

安装

  1. 克隆仓库：

    git clone <repository-url>
cd modelmarkdownprotocol

  2. 安装前端依赖：

    cd frontend && npm install

  3. 安装 MCP 服务器依赖：

    cd mcp && npm install

  4. 在项目根目录安装并启动开发服务器：

    npm install && npm run dev

这将同时启动前端（Next.js）和 MCP 服务器。前端将在 http://localhost:3000 可用，而 MCP 服务器将在其配置的端口上运行。

📦 作为包安装

npm install mdmcp

CLI 使用

全局安装或使用 npx 后：

# 启动 MCP 服务器
mdmcp-server

# 启动 Next.js 前端服务器
mdmcp-frontend

🏗️ 项目结构

mdmcp/
├── frontend/                    # Next.js 前端应用
│   ├── app/                    # Next.js 应用路由器页面
│   │   ├── layout.tsx         # 根布局组件
│   │   ├── page.tsx           # 首页
│   │   ├── ClientRouter.tsx   # 客户端路由
│   │   └── [...slug]/         # 动态路由
│   ├── src/                   # 源代码
│   │   ├── components/        # 可重用的 UI 组件
│   │   │   └── ui/           # Radix UI 组件
│   │   └── utils/            # 工具函数
│   ├── styles/               # 全局样式
│   ├── package.json          # 前端依赖
│   ├── next.config.js        # Next.js 配置
│   ├── tailwind.config.js    # Tailwind CSS 配置
│   └── tsconfig.json         # TypeScript 配置
├── mcp/                       # MCP 服务器实现
│   ├── index.ts              # 主服务器入口点
│   ├── sessions.ts           # 会话管理
│   ├── tools/                # MCP 工具
│   │   ├── navigate.ts       # 导航工具
│   │   ├── startHere.ts      # 开始这里工具
│   │   └── sendRequest.ts    # 发送请求工具
│   ├── utils/                # 服务器工具
│   ├── package.json          # MCP 服务器依赖
│   └── tsconfig.json         # TypeScript 配置
├── md/                        # Markdown 内容和转换
│   ├── _generated/           # 自动生成的 Markdown 文件
│   ├── converter.ts          # Markdown ↔ TypeScript 转换器
│   ├── convert-all.ts        # 批量转换脚本
│   ├── convert-single.ts     # 单文件转换
│   └── *.md                  # 源 Markdown 文件
├── dist/                      # 构建输出（生成）
├── package.json              # 根包配置
├── tsconfig.json             # 根 TypeScript 配置
└── README.md

🛠️ 开发

可用脚本

脚本描述
npm run dev在开发模式下启动前端和 MCP 服务器
npm run dev:frontend仅启动 Next.js 前端
npm run dev:mcp仅启动 MCP 服务器
npm run build为生产构建两个服务
npm run build:frontend仅构建前端
npm run build:mcp仅构建 MCP 服务器
npm run start在生产模式下启动前端
npm run start:frontend启动 Next.js 前端
npm run start:mcp启动 MCP 服务器
npm run clean清除所有构建输出和依赖项
npm run install:all安装所有包的依赖项
npm run generate将所有 TypeScript 文件转换为 Markdown
npm run generate:single转换单个文件
npm run watch:md监视 Markdown 文件的变化

开发工作流程

  1. 前端开发：

    cd frontend
npm run dev
    • 运行在 http://localhost:3000
    • 启用热重载
    • TypeScript 类型检查

  2. MCP 服务器开发：

    cd mcp
npm run dev
    • 使用 tsx 执行 TypeScript
    • 文件更改时自动重启

  3. Markdown 内容开发：

    # 监视 Markdown 文件变化
npm run watch:md

# 生成所有 Markdown 文件
npm run generate

📝 Markdown 支持与格式化

MDMCP 支持丰富的 Markdown 格式化功能，包括高级特性：

标准 Markdown

  • 标题： # H1, ## H2, ### H3 等
  • 强调： *斜体*, **粗体**, ***粗斜体***
  • 列表： 有序（1.）和无序（-, *）
  • 链接： [文本](路由ID)
  • 图片： ![替代文本](源)
  • 代码： `内联` 和 代码块
  • 引用： > 引用
  • 表格： GitHub 风格的 Markdown 表格
  • 水平线： ---

扩展功能

GitHub 风格的 Markdown (GFM)

  • 删除线： ~~删除的文本~~
  • 任务列表： - [x] 完成 / - [ ] 待办
  • 对齐的表格
  • 自动路由ID链接
  • 换行符： 不需要双空格即可识别

MDX 支持

  • React 组件： 在 Markdown 中嵌入 React 组件
  • JSX： 在 Markdown 中使用 JSX 语法
  • 导入： 导入并使用组件

代码语法高亮

支持以下语言的语法高亮：

  • JavaScript/TypeScript
  • HTML/CSS
  • JSON
  • Bash/Shell
  • Python
  • 以及更多语言

模板变量

通过模板变量实现动态内容：

Hello {{name}}, 欢迎来到 {{project}}!

转换为 TypeScript 函数：

export function template({name, project}: {name: string, project: string}): string {
  return `Hello ${name}, 欢迎来到 ${project}!`;
}

Markdown 转换系统

项目包括一个复杂的 Markdown ↔ TypeScript 转换系统：

TypeScript 到 Markdown

  • 从 TypeScript 导出中提取模板字面量
  • 正确处理转义反引号
  • 保持格式和结构

Markdown 到 TypeScript

  • 将 Markdown 转换为 TypeScript 模板函数
  • 自动检测模板变量（{{变量}}）
  • 为模板内容生成类型安全的函数
  • 为静态内容创建常量导出

使用示例

将 Markdown 转换为 TypeScript：

npm run generate:single -- path/to/file.md

将 TypeScript 转换为 Markdown：

npm run generate:single -- path/to/file.ts

批量转换：

npm run generate

🏭 生产

为生产构建

# 构建一切
npm run build

# 或单独构建
npm run build:frontend
npm run build:mcp

生产部署

  1. 前端（Next.js）：

    npm run start:frontend

  2. MCP 服务器：

    npm run start:mcp

  3. 使用构建的二进制文件：

    # 在 npm pack 和安装后
mdmcp-frontend
mdmcp-server

🧩 技术栈

前端技术

  • Next.js 15 - 带有应用路由器的 React 框架
  • React 18 - 带有最新特性的 UI 库
  • TypeScript 5+ - 类型安全和开发者体验
  • Tailwind CSS - 以实用为主的 CSS 框架
  • Radix UI - 无样式的可访问性 UI 组件
  • MDX - 支持 JSX 的 Markdown
  • React Markdown - 带有自定义组件的 Markdown 渲染
  • Remark GFM - 支持 GitHub 风格的 Markdown
  • Lucide React - 图标库

后端技术

  • 模型上下文协议 SDK - MCP 服务器实现
  • Express.js 5 - Web 应用框架
  • TypeScript - 类型安全的服务器开发
  • Zod - 运行时类型验证
  • Node.js 1 18+ - JavaScript 运行时

开发工具

  • tsx - 用于 Node.js 的 TypeScript 执行
  • Concurrently - 同时运行多个命令
  • Chokidar - 开发中的文件监视
  • ESLint - 代码检查
  • Autoprefixer - CSS 厂商前缀

🔧 配置

环境变量

在前端目录中创建 .env.local：

# 添加您的环境变量
NEXT_PUBLIC_API_URL=http://localhost:8080

TypeScript 配置

项目使用单仓库 TypeScript 设置，包括：

  • 根 tsconfig.json 用于共享配置
  • 前端特定的 TypeScript 配置
  • MCP 服务器特定的 TypeScript 配置

Tailwind CSS

完全配置了：

  • 自定义颜色方案
  • 响应式设计工具
  • 组件变体
  • 动画支持

🤝 贡献

  1. 分叉仓库
  2. 创建功能分支：git checkout -b feature/amazing-feature
  3. 修改您的代码
  4. 运行测试：npm test
  5. 提交您的更改：git commit -m '添加神奇的功能'
  6. 推送到分支：git push origin feature/amazing-feature
  7. 打开拉取请求

📄 许可证

MIT 许可证 - 详情见 LICENSE 文件

🆘 支持

  • 问题： 在 GitHub Issues 上报告错误和请求功能
  • 文档： 代码库中有全面的文档
  • 社区： 加入 GitHub Discussions 的讨论

使用 Next.js、TypeScript 和模型上下文协议构建，充满爱心