Extensible Web Application Prototype

A plugin-based React application where power users can build custom pages using Claude Code, an SDK, and an MCP server — and have those pages dynamically loaded into the main shell app via Module Federation.

Architecture

extensibleapp/
├── shell/              # Main React app (host)
│   ├── src/
│   │   ├── App.tsx              # Routes + dynamic page mounting
│   │   ├── main.tsx             # Entry point with providers
│   │   ├── api-server.ts        # Express API wrapping the SQLite DB
│   │   ├── components/
│   │   │   ├── Shell.tsx        # Layout + sidebar nav
│   │   │   └── RemotePageLoader.tsx  # Dynamic module federation loader
│   │   ├── lib/
│   │   │   ├── loadRemoteModule.ts   # Runtime federation loading
│   │   │   └── useRemotePages.ts     # Registry + dev remote discovery
│   │   └── pages/
│   │       ├── HomePage.tsx     # Dashboard
│   │       └── BuildingsPage.tsx
│   └── vite.config.ts
│
├── sdk/                # @yourco/sdk — shared components + hooks
│   └── src/
│       ├── components/  # PageLayout, BuildingSelector, Card, StatCard, etc.
│       ├── hooks/       # useBuildings, useBuildingEnergy, useSensors, etc.
│       ├── contexts/    # AuthContext, ApiContext
│       └── types.ts     # Shared TypeScript types
│
├── mcp-server/         # MCP server for Claude Code data discovery
│   └── src/
│       ├── index.ts     # MCP tools: list_buildings, get_energy_usage, etc.
│       ├── db.ts        # SQLite database connection
│       └── seed.ts      # Generate synthetic building/sensor/energy data
│
└── page-template/      # Template for user-built pages
    ├── src/
    │   └── Page.tsx     # Example page using SDK components
    ├── vite.config.ts   # Module Federation remote config
    ├── page.manifest.json
    ├── CLAUDE.md        # Instructions for Claude Code
    └── .claude/
        └── settings.json  # MCP server configuration

Quick Start

Prerequisites

• Node.js 18+
• npm (or pnpm/yarn with workspaces)

1. Install dependencies

npm install

2. Seed the database

cd mcp-server
npx tsx src/seed.ts
cd ..

This creates mcp-server/data.db with synthetic data:

• 8 buildings across Portland, Seattle, and Eugene
• Sensors (temperature, humidity, CO2, occupancy, light, power) per floor
• 7 days of hourly sensor readings
• 90 days of daily energy usage
• Alerts per building

3. Start the shell

cd shell
npm run dev

This starts:

• Vite dev server on http://localhost:3000 (React app)
• Express API on http://localhost:4000 (data endpoints)

4. Start a custom page (in another terminal)

cd page-template
npm run dev

This starts the federated page dev server on http://localhost:3001.

5. Connect the custom page to the shell

Open in browser:

http://localhost:3000?devRemote=http://localhost:3001&devPageLabel=Energy%20Overview&devPageIcon=bolt

The "Energy Overview" page will appear in the sidebar under "Custom Pages".

Building a New Page with Claude Code

1. Copy the page-template directory to a new location
2. Open it in Claude Code — the MCP server is pre-configured in .claude/settings.json
3. Claude Code can use MCP tools to discover available data (buildings, sensors, energy, etc.)
4. Edit src/Page.tsx — use SDK hooks and components
5. Run npm run dev and connect to the shell

Example prompt for Claude Code:

"Build a page that shows a comparison of electricity usage across all Portland buildings for the last 30 days, with a bar chart and a summary table. Use the SDK components for layout and the BuildingSelector for filtering."

MCP Server

The MCP server exposes these tools for Claude Code:

Tool	Description
list_buildings	List buildings with optional city/type filter
get_building	Get building details with floors
list_sensors	List sensors for a building
get_sensor_readings	Time-series sensor data (raw/hourly/daily)
get_energy_usage	Energy data (daily/weekly/monthly)
compare_buildings_energy	Cross-building comparison
list_alerts	Alerts by building/severity
get_building_summary	Full building overview
list_available_metrics	Discover all data types

Running the MCP server standalone

cd mcp-server
npx tsx src/index.ts

It communicates over stdio (standard MCP transport).

SDK Reference

Components

• <PageLayout> — Page wrapper with title, description, actions
• <BuildingSelector> — Building dropdown with filtering
• <Card> — Container card with title/subtitle
• <StatCard> — Metric display card
• <DataTable> — Configurable data table
• <Badge> — Status badge (info/warning/critical/success)
• <LoadingSpinner> — Loading indicator

Hooks

• useBuildings(options?) — List buildings
• useBuildingEnergy(buildingId, options?) — Energy usage data
• useSensors(buildingId, options?) — Building sensors
• useSensorReadings(sensorId, options?) — Sensor time-series
• useAlerts(buildingId?, options?) — Alerts
• useAuth() — Current user context

Providers (set up by the shell)

• <AuthProvider> — Authentication context
• <ApiProvider baseUrl=""> — API base URL context