infaira-canvas-mcp

An MCP (Model Context Protocol) server that helps developers build widgets for InfAIra Canvas (ICan) using any AI client — Claude Desktop, Claude Code, Cursor, VS Code (with Continue), etc.

The server runs locally on the developer's machine and gives the AI:

• Resources — full ICan component API, theming guide, manifest schema, hook reference
• Tools — scaffold widget files, validate the bundle, run the build, upload to Canvas

It is not an exposure of the InfAIra backend. Nothing in this server connects to your production InfAIra instance unless the developer explicitly invokes the optional upload_widget tool with their own URL + token.

Install / use

Add to your AI client config (Claude Desktop / Cursor / etc.):

{
  "mcpServers": {
    "infaira-canvas": {
      "command": "npx",
      "args": ["infaira-canvas-mcp"]
    }
  }
}

Then talk to the AI normally:

"Scaffold a temperature gauge widget that takes a sensorId prop and uses RadialGauge"

The AI reads the embedded ICan docs, generates correct files, and (optionally) builds + uploads the bundle.

Build from source

npm install
npm run build         # tsc → dist/
npm run smoke         # quick smoke test

Tools

| Tool | Purpose | |---|---| | init_widget_project | Scaffold a fresh widget project (like npx infaira-canvas init) | | scaffold_widget | Generate widget code (src/index.tsx, src/styles.scss) for an existing project | | update_bundle | Add/modify entries in bundle.json | | validate_bundle | Validate bundle.json against schema | | build_widget | Run npm run build and report output | | upload_widget | POST bundle.json + dist/main.js to an ICan portal | | list_components | Quick reference of available ICan components |

Resources

| URI | Content | |---|---| | ican://docs/widget-guide | Full widget development guide | | ican://docs/theming | All --ican-* CSS variables across 4 themes | | ican://docs/components | Complete ican.d.ts — every component, every prop | | ican://docs/customizing | The 3 customization patterns | | ican://docs/styling-patterns | CSS isolation, glass theme, class-name strategy | | ican://docs/hooks | ican/hooks API reference | | ican://docs/manifest | bundle.json schema | | ican://docs/registration | registerWidget / registerLink / registerUI API |

License

MIT