Embed a live dashboard in 5 steps

Overview

You'll pass a small context object (mrr, churn, users) plus a one-line intent. Morphis returns a sandboxed component you can drop into any page. On each render, the latest numbers flow through.

Step 1 · Get your API key

Create or copy a tenant key from Dashboard → API Keys. Store it as an env var named MORPHIS_API_KEY on your server.

Step 2 · Choose the intent

Be specific about visual intent. Instead of "metrics", write:

Show an analytics dashboard card with MRR, churn, active users, and a trend indicator

Step 3 · Send context data

Keep the payload small and named for the model:

const contextData = {
  mrr: 5400,
  churn: 2.4,
  users: 128,
  plan: "Pro"
}

Step 4 · Render server-side or via SDK

Two integration strategies — server-side fetching gives you more control:

// Server-side (Node/Next.js API route)
const res = await fetch('https://getmorphis.com/api/generate-ui', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({
    apiKey: process.env.MORPHIS_API_KEY,
    intent: 'analytics dashboard card',
    contextData
  })
})

const { html, metadata } = await res.json()
// Set metadata.generationTime + tokensUsed for monitoring. Now render html.

Or via the SDK inside your frontend:

Morphis.render({
  apiKey: 'mph_live_xxx',
  intent: 'analytics dashboard card',
  contextData,
  target: '#metrics-widget',
  theme: document.documentElement.dataset.theme || 'light'
})

Step 5 · Observe + iterate

Watch metadata.source: values of "llm" mean real model calls, "fallback" means a template engine kicked in (the LLM was slow or unavailable). Log tokensUsed to track cost against the plan limit.