Reference
The Morphis SDK is a dependency-free ~4 KB script that handles authentication, sandboxed rendering, and resizing. Load it once; call it anywhere.
Add the script tag to any page. No bundler required.
<script src="https://getmorphis.com/sdk/morphis.js"></script>The SDK is also safe to lazy-load from a bundler — it registers a single global, window.Morphis.
Generates a component and mounts it inside a sandboxed iframe at your target selector.
Morphis.render({
apiKey: 'mph_live_...',
intent: 'show a churn-risk table',
contextData: { churn: 2.4, mrr: 5400 },
target: '#widget',
theme: 'light',
onLoad: (result) => console.log('rendered in', result.metadata.generationTime, 'ms'),
onError: (err) => console.error('morphis:', err.message),
})| Option | Type | Default | Description |
|---|---|---|---|
| apiKey | string | — | Your Morphis API key (plaintext). |
| intent | string | — | Natural-language description of the component to generate. |
| contextData | object | {} | Live data injected into the component. |
| target | selector | element | #morphis-widget | Container to render into. |
| theme | 'light' | 'dark' | 'light' | Theme hint passed to the generator. |
| onLoad | function | — | Called once the iframe is mounted and measured. |
| onError | function | — | Called on any API or render failure. |
| onMessage | function | — | Receives postMessage events from the sandbox. |
Re-renders an existing widget with fresh context data — no page reload.
// Re-generate the same widget with new data
Morphis.update('#widget', { churn: 3.1, mrr: 6200 })Tears down every active Morphis instance on the page — removes event listeners and empties containers. Call this in a React cleanup or when unmounting a SPA route.
Morphis.destroy()Wrap the SDK in a component for declarative usage inside React or Next.js.
'use client'
import { useEffect, useRef } from 'react'
export function MorphisWidget({ intent, data }: { intent: string; data: Record<string, unknown> }) {
const ref = useRef<HTMLDivElement>(null)
useEffect(() => {
const script = document.createElement('script')
script.src = 'https://getmorphis.com/sdk/morphis.js'
script.onload = () => {
window.Morphis?.render({
apiKey: process.env.NEXT_PUBLIC_MORPHIS_API_KEY!,
intent,
contextData: data,
target: ref.current!,
})
}
document.head.appendChild(script)
return () => window.Morphis?.destroy()
}, [intent, data])
return <div ref={ref} style={{ minHeight: 200 }} />
}