Narwal MCP Server Clone
A TypeScript MCP server for querying React component documentation, searching articles, and managing development rules, designed to work with Cursor or other MCP clients.
README
Narwal MCP Server Clone
一个基于 TypeScript 的 MCP (Model Context Protocol) 服务器克隆，提供与原始 narwal-mcp-server 相同的功能。
🚀 功能特性
- 组件文档查询 - 获取 React 组件的详细文档和使用示例
- 文章搜索 - 在文档站点中进行全文搜索
- 规则管理 - 获取开发规则和最佳实践
- TypeScript 支持 - 完整的类型安全和现代开发体验
📦 安装和构建
# 安装依赖
npm install
# 构建项目
npm run build
# 启动服务器
npm start
⚙️ Cursor 配置
在 ~/.cursor/mcp.json 中添加以下配置：
{
"mcpServers": {
"narwal-components": {
"command": "node",
"args": ["D:\\forward\\cursorMcp\\narwal-mcp-server-clone\\dist\\index.js"],
"cwd": "D:\\forward\\cursorMcp\\narwal-mcp-server-clone"
}
}
}
重要: args 中必须使用绝对路径！
🛠️ 可用工具
组件相关
get_component_doc- 获取指定组件的文档内容get_all_components- 获取所有可用的组件列表
文档搜索
list_articles- 列出文档站点的所有文章search_articles- 根据关键词搜索文章get_article- 获取特定文章的完整内容
规则管理
get_all_rules- 获取所有可用的规则列表get_rule_content- 获取指定规则文件的完整内容
🧪 使用示例
获取组件文档
获取 ActionButton 组件的详细文档
搜索组件
搜索包含 "Button" 的组件文档
列出所有组件
获取所有可用的组件列表
📁 项目结构
narwal-mcp-server-clone/
├── src/ # TypeScript 源代码
│ ├── index.ts # 主服务器文件
│ └── data/ # 模拟数据
├── dist/ # 编译后的 JavaScript
├── package.json # 项目配置
└── tsconfig.json # TypeScript 配置
🔧 开发
# 开发模式（监听文件变化）
npm run dev
# 运行测试
npm test
📝 注意事项
- 重启 Cursor: 修改配置后需要完全重启 Cursor
- 绝对路径: MCP 配置中的
args必须使用绝对路径 - 等待连接: 启动后需要等待 30-60 秒让服务连接
🎯 成功标志
当一切正常时，你应该能够：
- 在 Cursor 中看到
narwal-components服务已连接 - 使用自然语言调用组件文档查询功能
- 获得格式化的组件信息和使用示例
Recommended Servers
playwright-mcp
A Model Context Protocol server that enables LLMs to interact with web pages through structured accessibility snapshots without requiring vision models or screenshots.
Magic Component Platform (MCP)
An AI-powered tool that generates modern UI components from natural language descriptions, integrating with popular IDEs to streamline UI development workflow.
Audiense Insights MCP Server
Enables interaction with Audiense Insights accounts via the Model Context Protocol, facilitating the extraction and analysis of marketing insights and audience data including demographics, behavior, and influencer engagement.
VeyraX MCP
Single MCP tool to connect all your favorite tools: Gmail, Calendar and 40 more.
graphlit-mcp-server
The Model Context Protocol (MCP) Server enables integration between MCP clients and the Graphlit service. Ingest anything from Slack to Gmail to podcast feeds, in addition to web crawling, into a Graphlit project - and then retrieve relevant contents from the MCP client.
Kagi MCP Server
An MCP server that integrates Kagi search capabilities with Claude AI, enabling Claude to perform real-time web searches when answering questions that require up-to-date information.
E2B
Using MCP to run code via e2b.
Neon Database
MCP server for interacting with Neon Management API and databases
Qdrant Server
This repository is an example of how to create a MCP server for Qdrant, a vector search engine.
Exa Search
A Model Context Protocol (MCP) server lets AI assistants like Claude use the Exa AI Search API for web searches. This setup allows AI models to get real-time web information in a safe and controlled way.