Building Apps

Looking for the product view?

The Help Center explains this surface as users see it: Apps for developers.

An App is a web application that runs inside Informer. It is a standard Vite project, so any framework Vite supports and any npm package are fair game, and it gets the platform underneath it: your users' data and identity, AI, security, and a handful of extra files that give it its own API routes, database, webhooks, agents, and tools. You may also see the names Magic App and Magic Report; they are the same thing.

Start from scratch

Nothing installed yet, no plugin, no Vite? This is the whole path. Claude Code does the typing, and every command it runs is shown here so you can follow along, or do it by hand.

1. Install Claude Code, and Node.js 22

   Claude Code runs in your terminal (a desktop app exists too). The native installer needs nothing else on the machine:

   curl -fsSL https://claude.ai/install.sh | bash

   On Windows, run irm https://claude.ai/install.ps1 | iex in PowerShell. The Claude Code docs cover sign-in and the rest of setup.

   Vite needs Node.js 22.12 or newer (20.19 or newer also works), so install the current LTS release. Claude Code itself does not need Node.

2. Add Entrinsik's plugin, once per machine

   Inside Claude Code:

   /plugin marketplace add entrinsik-org/claude-plugins
   /plugin install informer@entrinsik-plugins

   The plugin carries the magic-apps skill: Informer's App conventions, the informer.yaml schema, the server sandbox, and how an App reaches its data. Claude loads it on its own whenever the conversation touches Informer Apps, and /informer:magic-apps loads it by hand. From a script, the same two steps are claude plugin marketplace add entrinsik-org/claude-plugins and claude plugin install informer@entrinsik-plugins.

3. Open Claude Code in an empty folder

   mkdir my-app && cd my-app
   claude

4. Describe the App

   "Build me an App that shows our top customers by revenue."

   Claude asks what to call the App, then bootstraps the project. These are the commands it runs, and they are the whole setup if you ever want to do it without Claude:

   npm create vite@latest . -- --template react
   npm install
   npm install -D @entrinsik/vite-plugin-informer
   npx informer-init

   React is the default; say "use TypeScript", "build it with Vue", or "plain JavaScript" and the template changes. Keep the order above: informer-init records the plugin version it finds installed, and falls back to an old range when there is none.

   informer-init asks for the App's name, then adds the informer() plugin to vite.config.js, a deploy script and the workspace:* scripts to package.json, an informer.yaml to declare data in, .env and .env.example for the connection, and a permanent App id. It also git-ignores .env.

5. Point it at your Informer

   Edit .env:

   INFORMER_URL=https://your-instance.entrinsik.com
   INFORMER_API_KEY=your-api-key

   Create the key under Administration → API Tokens (see API Tokens in the Help Center). Deploying creates and updates an App, so a Read Only token is not enough. Your own username and password work too: comment out the key and set INFORMER_USER and INFORMER_PASS. Tell Claude which server you use and it fills this in.

6. Run it against live data

   npm run dev

   The App opens at http://localhost:5173 with hot reload, and every /api/... call is proxied to your Informer with your credentials, so what you see is real data. Tell Claude which Datasets, Queries, Datasources, or Integrations the App needs and it declares them as dependencies: slots in informer.yaml, the one thing an App must do before Informer lets it read anything. Then iterate: "add a date range filter", "match our brand colors", "make it work on a phone".

7. Ship it

   npm run deploy

   Builds the App, uploads it, and it appears in Informer's gallery. Every later deploy updates the same App; the id in package.json ties them together.

What you have after bootstrap

my-app/
├── informer.yaml      # data dependencies, roles, agents, widgets
├── .env               # connection settings (git-ignored)
├── .env.example
├── package.json       # informer.name, informer.id, deploy + workspace:* scripts
├── vite.config.js     # informer() added to plugins
├── index.html
├── public/
│   └── favicon.svg    # Vite's logo; replace it, it becomes the gallery icon
└── src/
    ├── main.jsx
    ├── App.jsx
    └── index.css

Plus Vite's usual extras (a lint config, a README, sample assets). Getting Started goes through informer.yaml, .env, package.json, theming, and the icon in detail.

Grow it

Every capability an App has is a file or a section of informer.yaml. Add the file, deploy, and the matching tab lights up in the App's admin panel.

Add	The App gets	Read
dependencies: in informer.yaml	Typed access to Datasets, Queries, Datasources, Integrations, other Apps, and Marketplace packs, as context.<slot> in handlers	informer.yaml
server/	Its own API routes, run in a sandbox on the Informer server	Server Routes
migrations/	Its own Postgres database, one per tenant	Workspace CLI
webhooks/	Public endpoints for Slack, Stripe, GitHub, and any service that calls back	Webhooks
channels: and channels/	Live updates pushed to every open page over a WebSocket Informer owns	Channels
tools/ and agents:	AI agents that act on events and schedules	AI Agents
mcp/	Tools that Claude Code, Claude Desktop, and Cursor can call, signed in as the user	MCP
roles:	Roles a Publisher assigns when sharing, for role-based UI	informer.yaml
widgets: and public/widgets/	Cards in Informer's widget gallery	informer.yaml
__INFORMER__.openChat() and registerTool()	The built-in copilot sidebar, with the App's live state	AI-Enhanced Dashboard
public/docs.html	Documentation in the gallery and a help button in the App	Managing an App
A git tag	A Marketplace listing others install and receive updates from	Marketplace, and the /informer:marketplace-publishing skill

Where to go next

Tutorials show what you can build, one pattern each, with the prompt to give Claude:

Tutorial	The prompt
KPI Dashboard	"Build a sales dashboard with revenue metrics and category breakdown"
Multi-Dataset Dashboard	"Combine orders and customer data with date range filters"
Integration Dashboard	"Pull our CRM pipeline from Salesforce and show it as a funnel"
API Mashup	"Combine dataset queries, saved queries, and external API data in one view"
AI-Enhanced Dashboard	"Add an Ask AI button that knows the current dashboard state"
Smart Summaries	"Generate an executive summary that updates when the data changes"
AI Agents	Event-driven agents that triage, respond, and automate workflows

Reference covers the tooling and the files:

Reference	Covers
Vite Plugin	Plugin options, the API proxy, dev server features, multiple environments
Workspace CLI	The database workspace: init, migrate, reset
Server Routes	Sandboxed server/ handlers, context.<slot> dependencies, the sandbox helpers
Webhooks	Token-gated external endpoints with HMAC verification
Channels	Live updates to open pages: broadcast(), the channels: relay, channels/ join handlers
WebAssembly & Web Workers	Running WASM libraries (DuckDB, pdf.js) in the iframe sandbox
Deployment	The deploy pipeline, environments, CI examples
informer.yaml	Dependency slots, integrations, access rules, roles, agents, events, widgets
Troubleshooting	Common issues and their fixes