ChatGPT 图形用户界面 MCP（或“ChatGPT 图形界面 MCP”，具体翻译可能根据上下文有所调整，MCP在此处可能代表某种特定的配置、模块或组件，但无具体上下文时，可保持原样或根据具体含义翻译）
一个兼容ChatGPT的MCP（模型上下文协议）应用程序，通过自然语言提供交互式的Neo4j图可视化和操作功能。
特点/功能
- 交互式图形可视化使用React Flow实时渲染Neo4j图谱
- 表格视图以结构化表格格式浏览节点和关系
- 自然语言接口通过ChatGPT查询和操作您的图表
- 11种全面的MCP工具:
- visualize_graph - 显示整个图表或过滤后的结果 - query_graph - 执行自定义的Cypher查询 - add_node - 创建带有标签和属性的新节点 - add_edge - 在节点之间建立关系 - add_node_and_edge - 原子操作以同时创建节点和关系 - describe_schema - 获取包含示例的全面数据库模式信息 - search_nodes - 通过属性值搜索节点（精确匹配或部分匹配） - find_path - 找出两个节点之间的最短路径 - update_node - 更新现有节点的属性 - get_neighbors - 获取所有连接的节点，并应用过滤选项 - batch_create_nodes - 一次性创建多个节点和关系
- 双视图模式在交互式图形可视化和表格视图之间切换
- 彩色编码节点为人物、公司、产品、地点、事件类型设置不同颜色
- 互动功能点击节点查看属性，拖动以重新排列，缩放和平移
- ChatGPT集成在ChatGPT的界面中呈现效果极佳
建筑学
这款应用集成了：
- ChatGPT 应用程序开发工具包（SDK） - 用于iframe渲染和ChatGPT兼容性
- MCP 服务器 - 基于工具的人工智能交互协议
- Neo4j 数据库 - 图数据库，用于存储和查询数据
- Next.js 15 - 带有App Router和Turbopack的React框架
- React Flow（@xyflow/react） - 带内置控件的交互式图表可视化
- 多个可视化库 - 支持使用Neo4j的NVL、Cytoscape和Vis-Network进行实验
入门指南
先决条件
- Node.js 18+ 和 pnpm
- Neo4j数据库（云端或本地实例）
- 支持开发者模式/MCP的ChatGPT账户
安装
- 克隆仓库：
git clone
cd chatgpt-graph-ui-mcp- 安装依赖项：
pnpm install- 配置环境变量：
cp .env.example .env编辑 .env 并添加您的Neo4j凭据：
NEO4J_URI=neo4j+s://your-instance.databases.neo4j.io
NEO4J_USERNAME=neo4j
NEO4J_PASSWORD=your-password- 运行开发服务器：
pnpm dev- 开放 http://localhost:3000 翻译为中文是：“本地主机上的3000端口”。不过，通常我们不会直接翻译这样的URL地址，而是会说“访问本地主机的3000端口”或者“打开本地主机上的3000端口服务” 查看该应用程序。
部署
Vercel 部署
- 将你的代码推送到GitHub
- 将项目导入Vercel
- 在Vercel仪表板中添加环境变量
- 部署！
该应用程序将自动为生产环境配置正确的基础URL。
ChatGPT集成
- 部署完成后，获取您的MCP终端节点URL：
https://your-app.vercel.app/mcp - 在ChatGPT中，前往 设置 → 连接器
- 添加一个带有您终端节点URL的新MCP服务器
- 开始聊天吧！
使用示例
一旦连接到ChatGPT，尝试使用以下提示：
模式发现
"Describe the database schema"
"Show me what types of nodes and relationships exist"
"What properties do Person nodes have?"可视化
"Show me the knowledge graph"
"Visualize all nodes and relationships"
"Display the graph with a limit of 50 nodes"
"Switch to table view to see all the data"查询
"Find all people who work at companies"
"Show me all nodes labeled Person"
"Query the graph for relationships of type KNOWS"搜索
"Search for nodes with name containing 'Alice'"
"Find all Person nodes where the name property matches 'Bob'"
"Search for companies in San Francisco"路径寻找
"Find the shortest path between node 1 and node 5"
"How is Alice connected to Acme Corp?"
"Show me the relationship path from node 10 to node 15"创建节点
"Add a Person node named Alice with age 30"
"Create a Company called Acme Corp in San Francisco"
"Add a Product node called Widget with price 99.99"建立关系
"Connect Alice to Acme Corp with a WORKS_FOR relationship"
"Create a KNOWS relationship from node 1 to node 2"
"Link Person Alice to Location San Francisco with LIVES_IN"更新节点
"Update node 5 to add a new property email: alice@example.com"
"Change the age property of node 3 to 31"
"Update Alice's properties"批处理操作
"Create 3 Person nodes: Alice (age 30), Bob (age 25), Carol (age 28)"
"Create a team structure with 5 people and connect them with WORKS_WITH relationships"
"Build a company org chart with departments and employees"探索
"Show me all neighbors of node 10"
"What nodes are connected to Alice?"
"Get all nodes within 2 hops of node 5"联合行动
"Create a Person named Bob and connect him to Alice with KNOWS"
"Add a Product called Premium Widget and link it to Acme Corp with MANUFACTURED_BY"项目结构
chatgpt-graph-ui-mcp/
├── app/
│ ├── mcp/route.ts # MCP server with 11 tools + 1 resource
│ ├── graph-widget/page.tsx # Widget page with Graph + Table views
│ ├── layout.tsx # Root layout with SDK bootstrap
│ ├── page.tsx # Home page with documentation
│ └── globals.css # Global styles
├── components/
│ ├── GraphVisualization.tsx # Neo4j NVL visualization (legacy)
│ ├── GraphVisualization2.tsx # Vis-Network visualization (experimental)
│ ├── GraphVisualization3.tsx # Cytoscape visualization (experimental)
│ ├── GraphVisualization4.tsx # React Flow visualization (ACTIVE)
│ └── TableView.tsx # Table view for nodes and relationships
├── lib/
│ └── neo4j.ts # Neo4j driver singleton
├── middleware.ts # CORS middleware for RSC
├── baseUrl.ts # Base URL detection (dev/prod)
├── next.config.ts # Next.js configuration
├── package.json # Dependencies
└── tsconfig.json # TypeScript configurationMCP 工具参考
1. 可视化图表
- 输入:
query（可选的Cypher），limit（可选，默认值为100） - 输出带有节点和关系的图数据
- 触发器交互式图表/表格小部件
- 用例显示整个图表或过滤后的子集
2. 查询图（query_graph）
- 输入：
query(密码字符串)，parameters（可选对象） - 输出查询结果以图形数据形式呈现
- 触发器交互式图表/表格小部件
- 用例执行自定义Cypher查询以进行高级过滤
3. 添加节点
- 输入：
label（字符串），properties（对象） - 输出创建节点 + 更新图上下文
- 触发器交互式图表/表格小部件
- 用例创建带有标签和属性的单个节点
4. 添加边（或：添加连接）
- 输入：
fromNodeId，toNodeId，relationshipType，properties（可选） - 输出创建了关系 + 更新了图表上下文
- 触发器交互式图表/表格小部件
- 用例将两个现有节点通过关系连接起来
5. 添加节点和边
- 输入:
newNodeLabel，newNodeProperties，existingNodeId，relationshipType，relationshipDirection，relationshipProperties（可选） - 输出创建了节点 + 关系 + 更新了图表上下文
- 触发器交互式图表/表格小部件
- 用例原子操作，一步完成节点创建及连接
6. 描述模式（或：定义模式结构）
- 输入:
includeSamples（布尔值，可选，默认为真） - 输出包含节点标签、关系、属性、模式和示例的全面模式信息
- 用例在查询之前了解数据库结构
7. 搜索节点
- 输入：
label（可选），propertyName，searchValue，exactMatch（可选，默认为 false），limit（可选，默认值为50） - 输出将节点与其关系相匹配
- 触发器交互式图表/表格小部件
- 用例通过精确匹配或部分匹配查找具有特定属性值的节点
8. 寻找路径（或译为：查找路径）
- 输入：
fromNodeId，toNodeId，maxDepth（可选，默认值为5） - 输出两个节点之间的最短路径
- 触发器交互式图表/表格小部件
- 用例发现两个实体是如何连接的
9. 更新节点
- 输入：
nodeId，properties（对象），replace（可选，默认为 false） - 输出更新了节点，添加了新属性和图上下文
- 触发器交互式图表/表格小部件
- 用例修改现有节点属性或添加新属性
10. 获取邻居（或：查找相邻节点）
- 输入：
nodeId，relationshipType（可选），direction（可选，默认为“两者”），depth（可选，默认值为1），limit（可选，默认值为100） - 输出在指定深度内的所有连接节点
- 触发器交互式图表/表格小部件
- 用例探索节点的邻域并进行过滤
11. 批量创建节点
- 输入：
nodes（节点规格数组），relationships（可选的关系规范数组） - 输出所有创建的节点和关系
- 触发器交互式图表/表格小部件
- 用例在一次操作中高效地创建多个节点和关系
发展
运行测试
# Install dependencies
pnpm install
# Run development server
pnpm dev
# Build for production
pnpm build
# Start production server
pnpm start技术栈
- Next.js 15.5.4 - 使用Turbopack的React框架
- React 19 - 用户界面库
- Neo4j 驱动程序 6.0.0 - 数据库连接性
- React Flow（@xyflow/react 12.8.6） - 主要的图表可视化库
- @neo4j-nvl/react 1.0.0 - 官方Neo4j可视化（实验性）
- Cytoscape 3.33.1 - 替代图形可视化（实验性）
- Vis-Network 10.0.2 + Neovis.js 2.1.0 - 替代可视化（实验性）
- MCP 处理器 1.0.3 - MCP协议实现
- @modelcontextprotocol/sdk 1.20.1 - MCP SDK（多渠道平台软件开发工具包）
- Zod 3.25 - 模式验证
- Tailwind CSS 4 - 搭配/造型
它是如何工作的
- ChatGPT调用MCP工具 （例如，“可视化图表”或“描述架构”）
- 工具查询Neo4j 并返回图形数据或模式信息
- 工具元数据 指向图表可视化资源（用于图表工具）
- ChatGPT获取 图表小部件页面的HTML
- 小部件渲染 在ChatGPT的iframe中，有两个选项卡：图表和表格
- SDK 启动补丁 浏览器API（fetch、history、links）
- 图形数据流 （意大利语）路；途径；方式
window.openai.toolOutput - React Flow（可译为“React流程组件”或根据具体上下文简化为“React流程”） 生成交互式图表 OR TableView（在中文中，这个术语通常直接保留原样，因为它是一个特定的编程或界面设计术语，指的是一个用于展示表格数据的视图组件，如在iOS开发中的UITableView） 在表格中显示数据
- 用户进行交互 在ChatGPT中具有节点/关系
- 图表视图点击节点，拖动以重新排列，缩放/平移，使用迷你地图 - 表格视图以结构化格式对节点/关系进行排序和浏览
故障排除
“无图表数据可用”
- 确保您的Neo4j数据库中有数据
- 检查Neo4j的凭据
.env - 验证数据库连接
“查询图表时出错”
- 检查Cypher查询语法
- 在创建关系时确保节点ID存在
- 检查Neo4j服务器状态
小部件未渲染
- 验证
baseURL适用于您的环境 - 检查CORS中间件是否已启用
- 确保MCP端点可访问
静态资源404
- 确保
assetPrefix设定于next.config.ts - 配置更改后重新构建应用
做出贡献
欢迎贡献！请提出问题或提交拉取请求。
许可证
麻省理工学院（MIT）
功劳；学分；（电影等的）制作人员名单
构建于：