MDMCP-Markdown MCP
Markdown MCP是一个更准确、令牌高效的框架，用于构建MCP服务器
Frontend Screenshot MCP Server Screenshot
一个统一的monorepo，包含Next.js前端应用程序和用于提供markdown文本的MCP（模型上下文协议）服务器。 该项目提供了一个完整的解决方案，用于渲染和提供具有动态模板支持和现代web界面的markdown内容。
🚀 快速开始
先决条件
- Node.js>=18.0.0
- npm（附带Node.js）
- Git
安装
- 克隆存储库：
git clone
cd modelmarkdownprotocol- 安装前端依赖项：
cd frontend && npm install- 安装MCP服务器依赖项：
cd mcp && npm install- 在项目根目录安装并启动开发服务器：
npm install && npm run dev这将同时启动前端（Next.js）和MCP服务器。前端将在 http://localhost:3000 MCP服务器将在其配置的端口上运行。
📦 打包安装
npm install mdmcpCLI使用情况
全局安装或使用npx后：
# Start MCP server
mdmcp-server
# Start Next.js frontend server
mdmcp-frontend🏗️ 项目结构
mdmcp/
├── frontend/ # Next.js frontend application
│ ├── app/ # Next.js App Router pages
│ │ ├── layout.tsx # Root layout component
│ │ ├── page.tsx # Home page
│ │ ├── ClientRouter.tsx # Client-side routing
│ │ └── [...slug]/ # Dynamic routing
│ ├── src/ # Source code
│ │ ├── components/ # Reusable UI components
│ │ │ └── ui/ # Radix UI components
│ │ └── utils/ # Utility functions
│ ├── styles/ # Global styles
│ ├── package.json # Frontend dependencies
│ ├── next.config.js # Next.js configuration
│ ├── tailwind.config.js # Tailwind CSS configuration
│ └── tsconfig.json # TypeScript configuration
├── mcp/ # MCP server implementation
│ ├── index.ts # Main server entry point
│ ├── sessions.ts # Session management
│ ├── tools/ # MCP tools
│ │ ├── navigate.ts # Navigation tool
│ │ ├── startHere.ts # Start here tool
│ │ └── sendRequest.ts # Request sending tool
│ ├── utils/ # Server utilities
│ ├── package.json # MCP server dependencies
│ └── tsconfig.json # TypeScript configuration
├── md/ # Markdown content and conversion
│ ├── _generated/ # Auto-generated markdown files
│ ├── converter.ts # Markdown ↔ TypeScript converter
│ ├── convert-all.ts # Batch conversion script
│ ├── convert-single.ts # Single file conversion
│ └── *.md # Source markdown files
├── dist/ # Built output (generated)
├── package.json # Root package configuration
├── tsconfig.json # Root TypeScript configuration
└── 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文件以了解更改 |
开发工作流程
- 前端开发：
cd frontend
npm run dev- 继续运行 http://localhost:3000 - 热重载已启用 - TypeScript类型检查
- MCP服务器开发：
cd mcp
npm run dev- 用途 tsx 用于执行TypeScript - 文件更改时自动重新启动
- Markdown内容开发：
# Watch for markdown changes
npm run watch:md
# Generate all markdown files
npm run generate📝 Markdown支持和格式
MDMCP支持具有高级功能的丰富标记格式：
标准Markdown
- 标题：
# H1,## H2,### H3等等。 - 重点：
*italic*,**bold**,***bold italic*** - 列表： 已订购(
1.)无序(-,*) - 链接：
[text](route_id) - 图像：
 - 代码： `
和code blocks` - 区块链报价：
> quote - 桌子： GitHub风格的Markdown表
- 水平规则：
---
扩展功能
GitHub风格Markdown（GFM）
- 罢工：
~~deleted text~~ - 任务列表：
- [x] completed/- [ ] todo - 对齐的表格
- 自动route_id链接
- 断线： 尊重，不需要双倍空间
MDX支持
- React组件： 在markdown中嵌入React组件
- JSX： 在markdown中使用JSX语法
- 进口： 导入和使用组件
代码语法高亮显示
支持以下语法高亮显示：
- JavaScript/TypeScript
- HTML/CSS
- 对象符号
- Bash/Shell
- python
- 还有更多的语言
模板变量
带有模板变量的动态内容：
Hello {{name}}, welcome to {{project}}!转换为TypeScript函数：
export function template({name, project}: {name: string, project: string}): string {
return `Hello ${name}, welcome to ${project}!`;
}Markdown转换系统
该项目包括一个复杂的降价↔ TypeScript转换系统：
TypeScript到Markdown
- 从TypeScript导出中提取模板文本
- 正确处理逃逸的回溯
- 保持格式和结构
Markdown转TypeScript
- 将markdown转换为TypeScript模板函数
- 自动检测模板变量(
{{variable}}) - 为模板化内容生成类型安全函数
- 为静态内容创建持续导出
使用示例
将markdown转换为TypeScript：
npm run generate:single -- path/to/file.md将TypeScript转换为markdown：
npm run generate:single -- path/to/file.ts批量转换：
npm run generate🏭 生产
生产大楼
# Build everything
npm run build
# Or build individually
npm run build:frontend
npm run build:mcp生产部署
- 前端（Next.js）：
npm run start:frontend- MCP服务器：
npm run start:mcp- 使用内置二进制文件：
# After npm pack and install
mdmcp-frontend
mdmcp-server🧩 技术栈
前端技术
- Next.js 15 -带有App Router的React框架
- 反应18 -具有最新功能的UI库
- TypeScript 5+ -类型安全和开发人员经验
- 顺风CSS -实用程序优先的CSS框架
- Radix UI -无样式、可访问的UI组件
- MDX -支持JSX的Markdown
- React Markdown -使用自定义组件的Markdown渲染
- 备注GFM -GitHub风格的Markdown支持
- Lucide反应 -图标库
后端技术
- 模型上下文协议SDK -MCP服务器实现
- Express.js 5 -Web应用程序框架
- TypeScript -类型安全服务器开发
- 萨德 -运行时类型验证
- Node.js 18+ -JavaScript运行时
开发工具
- 多伦多证券交易所 -Node.js的TypeScript执行
- 同时 -同时运行多个命令
- 乔基达尔 -文件监视以进行开发
- ESLint -代码linting
- 自动预混合器 -CSS供应商前缀
🔧 配置
环境变量
创建 .env.local 在前端目录中：
# Add your environment variables here
NEXT_PUBLIC_API_URL=http://localhost:8080TypeScript配置
该项目使用monorepo TypeScript设置：
- 根
tsconfig.json用于共享配置 - 前端特定的TypeScript配置
- MCP服务器特定的TypeScript配置
顺风CSS
完全配置了：
- 自定义配色方案
- 响应式设计工具
- 组件变体
- 动画支持
🤝 贡献
- 分叉存储库
- 创建要素分支：
git checkout -b feature/amazing-feature - 进行更改
- 运行测试：
npm test - 提交您的更改：
git commit -m 'Add amazing feature' - 推到分支：
git push origin feature/amazing-feature - 打开拉取请求
📄 许可证
MIT许可证-有关详细信息，请参阅许可证文件
🆘 支持
- 问题： 在GitHub Issues上报告错误和请求功能
- 文档： 代码库中提供了全面的文档
- 社区： 加入GitHub讨论
______________________________________________________________________
内置于❤️ 使用Next.js、TypeScript和模型上下文协议