智能家居平面图控制

一个全栈智能家居仪表板,允许用户和AI助手通过交互式平面图控制房间照明,提供REST API、实时更新和自然语言控制功能。

  • by joealfa
  • C#
  • 本地部署
  • 更新于
在 GitHub 查看 joealfa/smart-home

使用说明

智能家居平面图

一个全栈智能家居仪表板,让用户和人工智能助手通过交互式平面图控制房间照明。该系统公开了一个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

先决条件


快速开始

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 run

API开始于 http://localhost:5050,自动迁移数据库,并在第一次运行时为6个房间添加种子。

3.运行用户界面

cd ui
npm install
npm run dev

React应用程序开始于 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乔·阿尔夫