智能家居平面图
一个全栈智能家居仪表板,让用户和人工智能助手通过交互式平面图控制房间照明。该系统公开了一个REST API、一个用于实时更新的SignalR集线器和一个 MCP(模型上下文协议)服务器 因此,任何兼容MCP的人工智能工具都可以通过自然语言查询和控制房间状态。
______________________________________________________________________
特性
- 交互式SVG平面图 --单击任何房间以打开/关闭其灯光
- 实时同步 --所有连接的浏览器都会通过ViewModel立即更新
- REST API --房间照明状态下的完全CRUD
- MCP服务器 --人工智能工具(克劳德桌面、克劳德代码等)可以通过自然语言控制灯光
- 标量UI -上的交互式API资源管理器
/scalar
______________________________________________________________________
技术栈
| 层 | 技术 |
|---|---|
| 前端 | React 18、Vite 7、TypeScript、顺风CSS v4 |
| 实时 | SqlCo(微软.AspNetCore.ABJ) |
| 后端 | ASP。NET核心10 Web API |
| MCP服务器 | 模型上下文协议。AspNetCore。NET SDK |
| ORM | 实体框架核心10 |
| 数据库 | SQL Server(通过.NET用户机密的凭据) |
| API文档 | Microsoft。AspNetCore。OpenApi+标量。AspNetCore |
______________________________________________________________________
先决条件
- .NET 10 SDK
- 和npm
- SQL Server实例可在以下位置访问
localhost
______________________________________________________________________
快速开始
1.配置数据库凭据
cd api/FloorPlan.Api
dotnet user-secrets set "ConnectionStrings:DefaultConnection" \
"Server=localhost;Database=FloorPlanDb;User Id=sa;Password=YOUR_PASSWORD;TrustServerCertificate=True;"2.运行API
cd api/FloorPlan.Api
dotnet runAPI开始于 http://localhost:5050,自动迁移数据库,并在第一次运行时为6个房间添加种子。
3.运行用户界面
cd ui
npm install
npm run devReact应用程序开始于 http://localhost:5173.
______________________________________________________________________
端点
| URL | 描述 |
|---|---|
| http://localhost:5173 | React平面图UI |
| http://localhost:5050/scalar | 标量用户界面(API资源管理器) |
| http://localhost:5050/mcp | MCP服务器端点 |
| http://localhost:5050/hubs/floor-计划 | args中心 |
______________________________________________________________________
MCP集成
MCP服务器允许AI助手使用自然语言控制平面图。
克劳德桌面版
添加 claude_desktop_config.json:
{
"mcpServers": {
"floor-plan": {
"url": "http://localhost:5050/mcp"
}
}
}克劳德代码(CLI)
claude mcp add --transport http floor-plan http://localhost:5050/mcp可用的MCP工具
| 工具 | 说明 |
|---|---|
GetAllRooms | 返回所有房间的状态 |
GetRoomStatus | 返回一个房间的状态 |
IlluminateRoom | 打开房间里的灯 |
ExtinguishRoom | 关闭房间内的灯 |
ToggleRoom | 切换房间中的灯光状态 |
示例提示:
*“打开厨房和客厅的灯。”* *“目前哪些房间关闭了?”* *“把所有的灯都关掉。”*
______________________________________________________________________
项目结构
demo-mcp-server/
├── api/
│ └── FloorPlan.Api/
│ ├── Controllers/ # REST endpoints
│ ├── Data/ # EF Core DbContext + Migrations
│ ├── Hubs/ # SignalR hub
│ ├── Mcp/ # MCP tool definitions
│ ├── Models/ # Room entity + DTOs
│ ├── Services/ # RoomService (business logic)
│ └── Program.cs
├── ui/
│ └── src/
│ ├── components/ # FloorPlan, Room, StatusBar
│ ├── hooks/ # useRooms, useSignalR
│ ├── services/ # Axios API client
│ └── types/ # Shared TypeScript types
├── docs/
│ ├── INSTRUCTIONS.md # Run instructions and API reference
│ └── PROJECT_PLAN.md # Architecture and design plan
├── .gitignore
├── LICENSE
└── README.md______________________________________________________________________
许可证
麻省理工学院 ©2026乔·阿尔夫
