MobileReality · gitsad · May 12, 2026 · May 12, 2026 · May 12, 2026
diff --git a/.changeset/nine-streets-fix.md b/.changeset/nine-streets-fix.md
@@ -0,0 +1,5 @@
+---
+"@mobile-reality/mdma-demo": patch
+---
+
+updated seo, patch fixes in demo app
diff --git a/demo/index.html b/demo/index.html
@@ -4,7 +4,25 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="icon" type="image/svg+xml" href="/mdma/logo.svg" />
-    <title>MDMA - Interactive Document Demo</title>
+    <title>MDMA — The open standard for AI-generated interactive UI</title>
+
+    <!-- SEO -->
+    <meta name="description" content="MDMA extends Markdown with interactive UI components — forms, tables, approval gates — generated by LLMs and rendered instantly. Open standard, schema-validated, framework-agnostic." />
+    <meta name="keywords" content="MDMA, AI, LLM, interactive UI, Markdown, open standard, generative UI, prompt, components" />
+    <meta name="author" content="Mobile Reality" />
+
+    <!-- Open Graph -->
+    <meta property="og:type" content="website" />
+    <meta property="og:url" content="https://mobilereality.github.io/mdma/" />
+    <meta property="og:title" content="MDMA — The open standard for AI-generated interactive UI" />
+    <meta property="og:description" content="MDMA extends Markdown with interactive UI components — forms, tables, approval gates — generated by LLMs and rendered instantly. Open standard, schema-validated, framework-agnostic." />
+    <meta property="og:image" content="https://mobilereality.github.io/mdma/logo.png" />
+
+    <!-- Twitter / X -->
+    <meta name="twitter:card" content="summary" />
+    <meta name="twitter:title" content="MDMA — The open standard for AI-generated interactive UI" />
+    <meta name="twitter:description" content="MDMA extends Markdown with interactive UI components — forms, tables, approval gates — generated by LLMs and rendered instantly." />
+    <meta name="twitter:image" content="https://mobilereality.github.io/mdma/512x512logo.png" />
   </head>
   <body>
     <div id="root"></div>

diff --git a/demo/public/512x512logo.png b/demo/public/512x512logo.png
diff --git a/demo/public/logo.png b/demo/public/logo.png
diff --git a/demo/src/agent/AgentSettings.tsx b/demo/src/agent/AgentSettings.tsx
@@ -80,6 +80,7 @@ export const AgentSettings = memo(function AgentSettings({ config, onUpdate }: A
 
   const provider = config.provider ?? 'anthropic';
   const models = PROVIDER_MODELS[provider] ?? [];
+  const missingKey = !getApiKey(config, provider);
 
   function switchProvider(next: NonNullable<AnthropicConfig['provider']>) {
     if (next === provider) return;
@@ -97,9 +98,11 @@ export const AgentSettings = memo(function AgentSettings({ config, onUpdate }: A
         type="button"
         className="chat-settings-toggle"
         data-open={open ? 'true' : 'false'}
+        data-alert={missingKey ? 'true' : undefined}
         onClick={() => setOpen((v) => !v)}
       >
         Agent Settings
+        {missingKey && <span className="settings-missing-key">API key required</span>}
       </button>
       {open && (
         <div className="chat-settings">

diff --git a/demo/src/chat/ChatSettings.tsx b/demo/src/chat/ChatSettings.tsx
@@ -74,16 +74,19 @@ export const ChatSettings = memo(function ChatSettings({
   const models = provider ? MODEL_OPTIONS[provider] : null;
   const isKnownModel = models?.some((m) => m.value === config.model);
   const isCustom = !models || !isKnownModel;
+  const missingKey = !config.apiKey;
 
   return (
     <div className="chat-settings-bar">
       <button
         type="button"
         className="chat-settings-toggle"
         data-open={open ? 'true' : 'false'}
+        data-alert={missingKey ? 'true' : undefined}
         onClick={() => setOpen(!open)}
       >
         LLM Settings
+        {missingKey && <span className="settings-missing-key">API key required</span>}
       </button>
       {open && (
         <div className="chat-settings">

diff --git a/demo/src/styles.css b/demo/src/styles.css
@@ -1452,6 +1452,32 @@ body {
   color: #6c5ce7;
 }
 
+.chat-settings-toggle[data-alert="true"] {
+  color: #dc2626;
+  background: #fff1f1;
+  border-left: 3px solid #dc2626;
+}
+
+.chat-settings-toggle[data-alert="true"]:hover {
+  color: #b91c1c;
+  background: #ffe4e4;
+}
+
+.chat-settings-toggle[data-alert="true"]::after {
+  color: #dc2626;
+}
+
+.settings-missing-key {
+  font-size: 11px;
+  font-weight: 600;
+  color: #dc2626;
+  background: #fee2e2;
+  border: 1px solid #fca5a5;
+  border-radius: 4px;
+  padding: 1px 6px;
+  margin-left: 10px;
+}
+
 .chat-settings {
   padding: 0 24px 12px;
 }
@@ -1488,12 +1514,19 @@ body {
 .ai-preset-btn:hover {
   border-color: #6c5ce7;
   color: #6c5ce7;
+  background: #f5f3ff;
 }
 
-.ai-preset-btn--active {
+.ai-preset-btn--active,
+.ai-preset-btn--active:hover {
   background: #6c5ce7;
-  border-color: #6c5ce7;
+  border-color: #5b4bd5;
   color: #fff;
+  cursor: default;
+}
+
+.ai-preset-btn--active:hover {
+  background: #5b4bd5;
 }
 
 .ai-setting {