Kimi_Agent_Home Assistant

A browser-based floorplan editor for Home Assistant dashboards. Draw rooms, assign entities (lights, climate, motion sensors, media players), and export the layout as YAML for a custom Lovelace card.

Tech Stack

• React 19 + TypeScript
• Vite 7 + React Fast Refresh
• Tailwind CSS 3.4 + shadcn/ui components
• react-router 7 + react-hook-form + zod

Getting Started

git clone https://forgejo.tail018ac4.ts.net/Mark/kimi_agent_home_assistant.git
cd kimi_agent_home_assistant
npm install
npm run dev

Open the dev server URL and use the toolbar to add rectangles or polygons, select rooms, edit properties, and export YAML.

Project Structure

.
├── docs/
│   └── home-assistant.md   # HA integration, CORS, dev proxy, YAML schema
├── src/
│   ├── components/
│   │   ├── editor/          # FloorplanCanvas, Toolbar, PropertiesPanel, RoomList
│   │   └── ui/              # shadcn/ui components
│   ├── hooks/               # useFloorplan, use-mobile
│   ├── lib/                 # utils (cn)
│   ├── types/               # TypeScript definitions (editor.ts)
│   ├── App.tsx              # Root editor shell
│   ├── index.css            # Tailwind + global styles
│   └── main.tsx             # Vite entry point
├── .forgejo/workflows/      # CI workflow
├── components.json          # shadcn/ui config
├── tailwind.config.js       # Tailwind theme
├── tsconfig.json            # TypeScript project references
└── vite.config.ts           # Vite configuration

Scripts

Command	Description
npm run dev	Start Vite dev server on port 3000
npm run build	Type-check and production build to dist/
npm run lint	Run ESLint on the project
npm run preview	Preview production build locally

Deployment

The editor builds to a fully static dist/ directory and ships with a multi-stage Dockerfile (Node 20 build, nginx alpine runtime) and a docker-compose.yml for local serving.

Build and run with Docker

docker build -t kimi_agent_home_assistant .
docker run --rm -d \
  -p 8080:8080 \
  -e PORT=8080 \
  --name kaha \
  kimi_agent_home_assistant

Open http://localhost:8080. The container exposes a /healthz endpoint returning ok.

docker compose

docker compose up -d --build
docker compose down

The served port is configurable via the PORT environment variable (defaults to 8080):

PORT=3000 docker compose up -d --build

Static hosting without Docker

Any static host works: upload dist/ to nginx, Caddy, Cloudflare Pages, Netlify, S3 + CloudFront, etc. Make sure unknown routes fall back to index.html so client-side routing keeps working:

# nginx snippet
location / {
    try_files $uri $uri/ /index.html;
}

Image size

The runtime stage is nginx:1.27-alpine with only the built dist/ files copied in — final image is well under 100 MB.

Export Format

The editor exports YAML in this shape:

type: custom:synaptic-floorplan-card
title: Home
rooms:
  - name: Living Room
    shape:
      type: rect
      x: 35
      y: 45
      width: 30
      height: 40
    entities:
      lights:
        - light.living_room_main
      climate: climate.living_room

Home Assistant integration

The editor can browse live HA entities and assign them to rooms via the picker in the properties panel. Selections are exported under a stable ha_entities: key per room and round-trip back through the importer. Local dev uses a Vite proxy; production uses an nginx reverse proxy — both inject the Long-Lived Access Token server-side so the browser never sees a CORS preflight. See docs/home-assistant.md for setup, YAML schema, and troubleshooting.