Skip to main content

Magic Apps Guides

Magic Apps are custom HTML/JS/CSS applications that run inside Informer. They combine the power of modern web development with Informer's data platform, AI capabilities, server-side execution, and security model.

The Claude Code Workflow​

You don't manually write Magic Apps — you describe them to Claude Code, and Claude builds them for you. The /magic-apps skill gives Claude Code complete knowledge of the API, templates, and patterns. Your job is to describe what you want. Claude's job is to make it happen.

How It Works​

  1. Install the plugin - Add the magic-reports plugin to Claude Code
  2. Describe your vision - "Build me a sales dashboard with KPI cards and a bar chart showing revenue by region"
  3. Claude builds it - Scaffolds the project, writes the code, configures data access
  4. Review and iterate - "Change the chart colors to match our brand" or "Add a date range filter"
  5. Deploy - Run npm run deploy to push to Informer

Framework Freedom​

Magic Apps are standard Vite projects. You can use any framework or tooling that works with Vite:

  • React, Vue, Svelte - "Use React with TypeScript"
  • Tailwind CSS - "Style it with Tailwind"
  • Chart libraries - "Use Recharts instead of ECharts"
  • Vanilla JS - "Keep it simple with vanilla JavaScript"

Just tell Claude what you prefer, and it will adapt.

What You'll Learn​

This guide series shows you what you can build with example prompts for Claude Code. Each guide demonstrates a pattern:

Tutorials​

  1. Getting Started - Set up your environment and create your first app
  2. KPI Dashboard - "Build a sales dashboard with revenue metrics and category breakdown"
  3. Multi-Dataset Dashboard - "Combine orders and customer data with date range filters"
  4. Integration Dashboard - "Pull our CRM pipeline from Salesforce and show it as a funnel"
  5. API Mashup - "Combine dataset queries, saved queries, and external API data in one view"
  6. AI-Enhanced Dashboard - "Add an Ask AI button that knows the current dashboard state"
  7. Smart Summaries - "Generate an executive summary that updates when the data changes"
  8. AI Agents - Event-driven AI agents that triage, respond, and automate workflows

Reference​

Prerequisites​

Before starting, you'll need:

  • Informer instance - A running Informer server (cloud or on-premise)
  • Claude Code - The desktop app for AI-assisted development
  • Node.js 20+ - For local development and builds
  • Basic prompting skills - How to describe what you want clearly

What Can an App Do?​

A Magic App can:

  • Query Informer datasets (Elasticsearch-indexed data)
  • Execute saved queries
  • Make authenticated requests to external APIs via integrations
  • Render charts, tables, and interactive visualizations
  • Open AI chats with context from the app
  • Register tools that AI can call to get live app state
  • Use AI completion endpoints for inline insights
  • Store and query custom data in a dedicated Postgres workspace
  • Run server-side handlers in a sandboxed V8 isolate
  • Define custom roles via informer.yaml for fine-grained access control
  • Run AI agents that respond to events, execute tools, and automate workflows
  • Receive webhooks from external systems (Gmail, Slack, PagerDuty, etc.)
  • Chain agents together through events for multi-stage pipelines

Apps are stored in Informer libraries, served through the Informer UI, and can be viewed in the web app, desktop app, or mobile app.

Development Workflow​

The vite-plugin-informer package provides a seamless local development experience:

  • Dev mode - Run npm run dev for hot reload while working against real Informer data
  • API proxy - /api/* requests are automatically proxied to your Informer server with authentication
  • Server routes - Files in server/ define server-side handlers, executed locally via Vite middleware during development
  • Migrations - SQL files in migrations/ create and update your app's dedicated Postgres schema
  • Configuration - informer.yaml defines custom roles and data access rules
  • Deploy - Run npm run deploy to build, bundle server routes, run migrations, and upload to Informer
  • Security - informer.yaml declares which APIs your app can access (enforced server-side)

Next Steps​

Start with Getting Started to install the Claude Code plugin and scaffold your first project.