> ## Documentation Index > Fetch the complete documentation index at: https://aomi.dev/docs/llms.txt > Use this file to discover all available pages before exploring further. # Playground > Explore an AomiFrame layout fragment, then connect it to the runtime and authentication in your host application. export function WidgetPlayground() { const PRESETS = { Default: { background: "#ffffff", foreground: "#09090b", muted: "#71717a", panel: "#f4f4f5", sidebar: "#fafafa", primary: "#5288c2", border: "#e4e4e7", radius: 16 }, "Modern Minimal": { background: "#ffffff", foreground: "#171717", muted: "#737373", panel: "#f7f7f7", sidebar: "#ffffff", primary: "#171717", radius: 6 }, "Violet Bloom": { background: "#fbfaff", foreground: "#241b35", muted: "#756b83", panel: "#f1ecfa", sidebar: "#f6f2fc", primary: "#7557d6", radius: 22 }, "Ocean Breeze": { background: "#f8fcfd", foreground: "#12323b", muted: "#647d84", panel: "#e8f5f7", sidebar: "#eff9fa", primary: "#16869a", radius: 14 }, Claude: { background: "#faf8f5", foreground: "#2d2926", muted: "#766f69", panel: "#eee9e3", sidebar: "#f4f0eb", primary: "#d97757", radius: 12 }, Cyberpunk: { background: "#090912", foreground: "#f5f3ff", muted: "#9d96ba", panel: "#171429", sidebar: "#100d20", primary: "#e939ff", radius: 4 }, "Midnight Bloom": { background: "#101018", foreground: "#f6f3ff", muted: "#9c96ae", panel: "#1d1929", sidebar: "#161321", primary: "#a78bfa", radius: 18 }, Catppuccin: { background: "#1e1e2e", foreground: "#cdd6f4", muted: "#a6adc8", panel: "#313244", sidebar: "#181825", primary: "#cba6f7", radius: 12 }, Nature: { background: "#fbfcf7", foreground: "#243126", muted: "#738075", panel: "#edf2e5", sidebar: "#f3f6ed", primary: "#557a46", radius: 16 }, "Amber Minimal": { background: "#fffdf8", foreground: "#29241d", muted: "#7e7569", panel: "#f8f0df", sidebar: "#fbf5e9", primary: "#d18b20", radius: 8 }, Supabase: { background: "#ffffff", foreground: "#1f1f1f", muted: "#707070", panel: "#f3f5f4", sidebar: "#f8faf9", primary: "#3ecf8e", radius: 8 }, Mono: { background: "#ffffff", foreground: "#111111", muted: "#737373", panel: "#eeeeee", sidebar: "#f8f8f8", primary: "#111111", radius: 0 } }; const CONTROL_OPTIONS = ["Model", "App", "Wallet", "Network"]; const controlLabel = { Model: "Auto", App: "Basic Apps", Wallet: "Wallet", Network: "Base" }; function withMode(theme, mode) { if (mode === "light") return theme; return { ...theme, background: "#0f0f12", foreground: "#f5f5f5", muted: "#a1a1aa", panel: "#1a1a20", sidebar: "#141419", border: "#3f3f46", primary: "#7facd6" }; } function aomiMark(size) { return ; } function smallButton({active, children, onClick, style}) { return ; } function segmented({options, value, onChange}) { return
{options.map(o => )}
; } function chip({checked, children, onChange}) { return ; } function copyToClipboard(text) { if (typeof navigator !== "undefined" && navigator.clipboard?.writeText) { return navigator.clipboard.writeText(text); } if (typeof document === "undefined") return Promise.reject(new Error("Clipboard unavailable")); const field = document.createElement("textarea"); field.value = text; field.style.position = "fixed"; field.style.opacity = "0"; document.body.appendChild(field); field.select(); const copied = document.execCommand("copy"); document.body.removeChild(field); return copied ? Promise.resolve() : Promise.reject(new Error("Copy failed")); } const [panel, setPanel] = useState("layout"); const [presetName, setPresetName] = useState("Default"); const [previewMode, setPreviewMode] = useState("light"); const [radius, setRadius] = useState(PRESETS.Default.radius); const [showSidebar, setShowSidebar] = useState(true); const [walletPosition, setWalletPosition] = useState("footer"); const [controlPlacement, setControlPlacement] = useState("composer"); const [controls, setControls] = useState({ Model: true, App: true, Wallet: false, Network: true }); const [codeTab, setCodeTab] = useState("jsx"); const [copied, setCopied] = useState(false); const theme = useMemo(() => ({ ...withMode(PRESETS[presetName], previewMode), radius }), [presetName, previewMode, radius]); const visibleControls = CONTROL_OPTIONS.filter(name => controls[name]); const rootProps = ['height="640px"', `showSidebar={${showSidebar}}`, walletPosition === "hidden" ? "walletPosition={null}" : `walletPosition="${walletPosition}"`].join(" "); const generatedJsx = `\n \n \n`; const generatedCss = `:root {\n --aomi-bg: ${theme.background};\n --aomi-fg: ${theme.foreground};\n --aomi-muted: ${theme.muted};\n --aomi-surface: ${theme.sidebar};\n --aomi-surface-2: ${theme.panel};\n --aomi-border: ${theme.border ?? "#e4e4e7"};\n --aomi-accent: ${theme.primary};\n --radius: ${theme.radius / 16}rem;\n}`; const generatedCode = codeTab === "jsx" ? generatedJsx : generatedCss; function selectPreset(name) { setPresetName(name); setRadius(PRESETS[name].radius); } function toggleControl(name) { setControls(current => ({ ...current, [name]: !current[name] })); } async function handleCopy() { try { await copyToClipboard(generatedCode); setCopied(true); window.setTimeout(() => setCopied(false), 1600); } catch { setCopied(false); } } const border = theme.border ?? "rgba(128,128,128,.28)"; return
{showSidebar && }
{showSidebar && ◧}
{controls.Network && ♦  Ethereum  /  ≋ Solana ⌄} {controlPlacement === "header" && visibleControls.filter(name => name !== "Network").map(name => {controlLabel[name]} )} ◇ ⚙ ☼
{aomiMark(48)}

What should happen on-chain?

{[["↔", "Swap 0.5 ETH to USDC"], ["⌁", "Bridge USDC to Base"], ["◎", "Check my portfolio"], ["◇", "Deploy an ERC-20 token"], ["↗", "Find the best ETH yield"]].reduce((rows, item, index) => { const row = index < 3 ? 0 : 1; rows[row].push(item); return rows; }, [[], []]).map((row, rowIndex) =>
{row.map(([icon, label]) => {icon}  {label} )}
)}
Ask Aomi to swap, bridge, send, or deploy…
{controlPlacement === "composer" &&
{visibleControls.filter(name => name !== "Network").map(name => {controlLabel[name]}⌄)} ↑
}
{segmented({ options: [{ value: "jsx", label: "JSX" }, { value: "css", label: "Theme CSS" }], value: codeTab, onChange: setCodeTab })} 
          {generatedCode}
; }
← Back to docs | Widget Playground Adjust layout, theme, and options, then copy the JSX into your app

This is a layout preview. Generated JSX is a fragment that needs your runtime, authentication, and wallet provider composition. For a complete embed, follow the packaged widget installation.