diff --git a/src/lib/components/AIPromptPopup.svelte b/src/lib/components/AIPromptPopup.svelte
new file mode 100644
index 00000000..ded983f1
--- /dev/null
+++ b/src/lib/components/AIPromptPopup.svelte
@@ -0,0 +1,174 @@
+<script lang="ts">
+  import { Button } from '$/components/ui/button';
+  import { cn } from '$lib/utils.js';
+  import CloseIcon from '~icons/material-symbols/close-rounded';
+
+  interface Props {
+    show: boolean;
+    input: string;
+    onClose: () => void;
+    onHeightChange?: (height: number) => void;
+    onTryFree: () => void;
+  }
+
+  let { show, input = $bindable(), onClose, onHeightChange, onTryFree }: Props = $props();
+
+  let textarea = $state<HTMLTextAreaElement>();
+  let container = $state<HTMLDivElement>();
+
+  $effect(() => {
+    if (!container || !onHeightChange) return;
+    const observer = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        if (entry.target instanceof HTMLElement) {
+          onHeightChange(entry.target.offsetHeight);
+        }
+      }
+    });
+    observer.observe(container);
+    return () => observer.disconnect();
+  });
+
+  function resizeTextarea() {
+    if (!textarea) return;
+    const computed = globalThis.getComputedStyle(textarea);
+    const lineHeight =
+      Number.parseFloat(computed.lineHeight) || Number.parseFloat(computed.fontSize) * 1.5 || 0;
+    const paddingTop = Number.parseFloat(computed.paddingTop) || 0;
+    const paddingBottom = Number.parseFloat(computed.paddingBottom) || 0;
+    const minHeight = lineHeight + paddingTop + paddingBottom;
+    const maxLines = 8;
+    const maxHeight = lineHeight * maxLines + paddingTop + paddingBottom;
+
+    textarea.style.height = 'auto';
+    const nextHeight = Math.max(minHeight, Math.min(textarea.scrollHeight, maxHeight));
+    textarea.style.height = `${nextHeight}px`;
+    textarea.style.overflowY = textarea.scrollHeight > maxHeight ? 'auto' : 'hidden';
+  }
+
+  $effect(() => {
+    if (input !== undefined) {
+      resizeTextarea();
+    }
+  });
+
+  function handleKeydown(e: KeyboardEvent) {
+    if (show && e.key === 'Escape') {
+      onClose();
+    }
+  }
+
+  function handleOutsideClick(e: MouseEvent) {
+    if (show && container && e.target instanceof Node && !container.contains(e.target)) {
+      onClose();
+    }
+  }
+</script>
+
+<svelte:window onkeydown={handleKeydown} onmousedown={handleOutsideClick} />
+
+{#if show}
+  <div
+    bind:this={container}
+    class={cn(
+      'button-container-for-animation relative z-50 mr-6 flex w-auto flex-col gap-2 rounded-xl border-2 border-border bg-background p-2 shadow-xl dark:border-border-dark dark:bg-secondary',
+      !input.trim() && 'rainbow-border'
+    )}
+    role="dialog"
+    aria-modal="true"
+    tabindex="-1">
+    <div class="relative flex min-h-2 items-start gap-1 px-1">
+      <textarea
+        bind:this={textarea}
+        bind:value={input}
+        onkeydown={(e) => {
+          if (e.key === 'Enter' && !e.shiftKey) {
+            e.preventDefault();
+            if (input.trim()) {
+              onTryFree();
+            }
+          }
+        }}
+        placeholder="Describe what to add or change"
+        rows="1"
+        class="focus font-recursive min-h-0 flex-1 resize-none border-none bg-transparent px-1 text-sm font-normal text-foreground placeholder:text-muted-foreground focus:ring-0 focus:outline-none disabled:opacity-50 dark:text-foreground dark:placeholder:text-muted-foreground"
+        style="height: 20px; overflow-y: hidden;"></textarea>
+      <button onclick={onClose} class="text-muted-foreground hover:text-foreground">
+        <CloseIcon class="size-4" />
+      </button>
+    </div>
+
+    <div class="flex items-center justify-between">
+      <span class="font-recursive text-xs font-normal text-foreground dark:text-foreground"
+        >Sign Up at Mermaid.ai to try AI</span>
+      <Button
+        class="font-recursive h-6 w-16 gap-1.5 rounded-sm bg-accent p-1 text-xs font-medium text-white no-underline hover:bg-accent/90 hover:text-white hover:no-underline active:bg-accent/80 dark:bg-accent dark:text-white! dark:hover:bg-accent/90 dark:active:bg-accent/80"
+        onclick={onTryFree}>
+        Try free
+      </Button>
+    </div>
+  </div>
+{/if}
+
+<style>
+  @property --gradient-angle {
+    syntax: '<angle>';
+    initial-value: 0deg;
+    inherits: false;
+  }
+
+  @keyframes gradient-angle-shift {
+    0% {
+      --gradient-angle: 0deg;
+    }
+    100% {
+      --gradient-angle: 360deg;
+    }
+  }
+
+  .button-container-for-animation {
+    border-radius: 12px;
+  }
+
+  .button-container-for-animation::before {
+    content: '';
+    position: absolute;
+    inset: -2px;
+    border-radius: 14px;
+    padding: 2px;
+    background: conic-gradient(
+      from var(--gradient-angle, 0deg),
+      color-mix(in srgb, var(--color-accent) 0%, transparent) 0%,
+      color-mix(in srgb, var(--color-accent) 0%, transparent) 12%,
+      color-mix(in srgb, var(--color-accent) 12%, transparent) 18%,
+      color-mix(in srgb, var(--color-accent) 42%, transparent) 24%,
+      color-mix(in srgb, var(--color-accent) 77%, transparent) 32%,
+      rgba(93, 85, 212, 0.923) 41%,
+      rgba(93, 85, 212, 0.5) 52%,
+      color-mix(in srgb, var(--color-accent) 58%, transparent) 72%,
+      color-mix(in srgb, var(--color-accent) 56%, transparent) 82%,
+      color-mix(in srgb, var(--color-accent) 36%, transparent) 87%,
+      color-mix(in srgb, var(--color-accent) 19%, transparent) 92%,
+      color-mix(in srgb, var(--color-accent) 10%, transparent) 96%,
+      color-mix(in srgb, var(--color-accent) 3%, transparent) 98%,
+      color-mix(in srgb, var(--color-accent) 0%, transparent) 100%
+    );
+    -webkit-mask:
+      linear-gradient(#fff 0 0) content-box,
+      linear-gradient(#fff 0 0);
+    -webkit-mask-composite: xor;
+    mask:
+      linear-gradient(#fff 0 0) content-box,
+      linear-gradient(#fff 0 0);
+    mask-composite: exclude;
+    pointer-events: none;
+    z-index: 0;
+    opacity: 0;
+    transition: opacity 0.3s ease-out;
+  }
+
+  .button-container-for-animation.rainbow-border::before {
+    opacity: 1;
+    animation: gradient-angle-shift 2s linear infinite;
+  }
+</style>
diff --git a/src/lib/components/DesktopEditor.svelte b/src/lib/components/DesktopEditor.svelte
index cb54ac5b..ea7b4868 100644
--- a/src/lib/components/DesktopEditor.svelte
+++ b/src/lib/components/DesktopEditor.svelte
@@ -1,7 +1,8 @@
 <script lang="ts">
   import type { EditorProps } from '$/types';
   import { env } from '$/util/env';
-  import { stateStore } from '$/util/state';
+  import { stateStore, urlsStore } from '$/util/state';
+  import { AIPromptViewZoneManager } from '$lib/util/AIPromptViewZoneManager';
   import { initEditor } from '$lib/util/monacoExtra';
   import { errorDebug } from '$lib/util/util';
   import { mode } from 'mode-watcher';
@@ -9,18 +10,28 @@
   import monacoEditorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
   import monacoJsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker';
   import { onMount } from 'svelte';
+  import AIPromptPopup from './AIPromptPopup.svelte';
 
   const { onUpdate }: EditorProps = $props();
 
   let divElement: HTMLDivElement | undefined = $state();
+  let aiPromptPopupElement: HTMLDivElement | undefined = $state();
   let editor: monaco.editor.IStandaloneCodeEditor | undefined;
   let editorOptions = {
     minimap: {
       enabled: false
     },
-    overviewRulerLanes: 0
+    overviewRulerLanes: 0,
+    glyphMargin: true,
+    lineNumbersMinChars: 4
   } satisfies monaco.editor.IStandaloneEditorConstructionOptions;
   let currentText = '';
+  let showPopup = $state(false);
+  let popupPosition = $state({ top: 0, lineNumber: 0 });
+  let decorationsCollection: monaco.editor.IEditorDecorationsCollection | undefined;
+  let input = $state('');
+  let lastMouseLine = 0;
+  const aiPromptManager = new AIPromptViewZoneManager();
 
   const jsonModel = monaco.editor.createModel(
     '',
@@ -33,6 +44,51 @@
     monaco.Uri.parse('internal://mermaid.mmd')
   );
 
+  const renderAIPromptGutterGlyphIcon = () => {
+    decorationsCollection?.clear();
+    if (!editor || showPopup) {
+      return;
+    }
+    const model = editor.getModel();
+    if (!model) {
+      return;
+    }
+
+    if (lastMouseLine > 0 && model.id === mermaidModel.id) {
+      decorationsCollection?.set([
+        {
+          range: new monaco.Range(lastMouseLine, 1, lastMouseLine, 1),
+          options: {
+            glyphMarginClassName: 'suggestion-icon'
+          }
+        }
+      ]);
+    }
+  };
+
+  const closePopup = () => {
+    showPopup = false;
+    input = '';
+    aiPromptManager.hide();
+    renderAIPromptGutterGlyphIcon();
+  };
+
+  const toggleAIPopup = (lineNumber: number) => {
+    if (!divElement || !aiPromptPopupElement) return;
+    popupPosition = {
+      top: 0,
+      lineNumber
+    };
+    showPopup = !showPopup;
+    if (showPopup) {
+      aiPromptManager.show(popupPosition.lineNumber, aiPromptPopupElement, 100);
+      editor?.setSelection(new monaco.Range(0, 0, 0, 0));
+    } else {
+      aiPromptManager.hide();
+    }
+    renderAIPromptGutterGlyphIcon();
+  };
+
   onMount(() => {
     self.MonacoEnvironment = {
       getWorker(_, label) {
@@ -61,6 +117,18 @@
     initEditor(monaco);
     errorDebug();
     editor = monaco.editor.create(divElement, editorOptions);
+    aiPromptManager.setEditor(editor);
+    decorationsCollection = editor.createDecorationsCollection([]);
+
+    editor.onMouseDown((e) => {
+      const isGutter = e.target.type === monaco.editor.MouseTargetType.GUTTER_GLYPH_MARGIN;
+      if (isGutter && e.target.position?.lineNumber === lastMouseLine && lastMouseLine > 0) {
+        e.event.preventDefault();
+        e.event.stopPropagation();
+        toggleAIPopup(e.target.position.lineNumber);
+      }
+    });
+
     editor.onDidChangeModelContent(({ isFlush }) => {
       const newText = editor?.getValue();
       if (!newText || currentText === newText || isFlush) {
@@ -79,6 +147,12 @@
 
       if (editor.getModel()?.id !== model.id) {
         editor.setModel(model);
+        renderAIPromptGutterGlyphIcon();
+      }
+
+      // Clear decorations if not in 'code' mode, or if the model changes
+      if (editorMode !== 'code' || editor.getModel()?.id !== mermaidModel.id) {
+        decorationsCollection?.clear();
       }
 
       // Update editor text if it's different
@@ -87,15 +161,31 @@
         editor.setScrollTop(0);
         editor.setValue(newText);
         currentText = newText;
+        renderAIPromptGutterGlyphIcon();
       }
 
       // Display/clear errors
       monaco.editor.setModelMarkers(model, 'mermaid', errorMarkers);
     });
 
+    editor.onMouseMove((e) => {
+      if (!editor) return;
+      if (showPopup) return;
+      if (editor.getModel()?.id !== mermaidModel.id) return;
+
+      lastMouseLine = e.target.position?.lineNumber ?? 0;
+      renderAIPromptGutterGlyphIcon();
+    });
+
+    editor.onMouseLeave(() => {
+      lastMouseLine = 0;
+      renderAIPromptGutterGlyphIcon();
+    });
+
     const unsubscribeMode = mode.subscribe((mode) => {
       if (editor) {
         monaco.editor.setTheme(`mermaid${mode === 'dark' ? '-dark' : ''}`);
+        divElement?.classList.toggle('mermaid-dark', mode === 'dark');
       }
     });
     const resizeObserver = new ResizeObserver((entries) => {
@@ -109,15 +199,51 @@
       resizeObserver.observe(divElement);
     }
 
+    renderAIPromptGutterGlyphIcon();
+
     return () => {
       unsubscribeState();
       unsubscribeMode();
       resizeObserver.disconnect();
       jsonModel.dispose();
       mermaidModel.dispose();
+      aiPromptManager.destroy();
       editor?.dispose();
     };
   });
 </script>
 
-<div bind:this={divElement} id="editor" class="h-full flex-grow overflow-hidden"></div>
+<div class="relative h-full grow overflow-hidden">
+  <div bind:this={divElement} id="editor" class="h-full w-full"></div>
+  <div bind:this={aiPromptPopupElement}>
+    <AIPromptPopup
+      show={showPopup}
+      bind:input
+      onHeightChange={(height) => aiPromptManager.updateHeight(height)}
+      onClose={closePopup}
+      onTryFree={() => {
+        window.open($urlsStore.mermaidChart({ medium: 'vibe_diagramming' }).save, '_blank');
+        closePopup();
+      }} />
+  </div>
+</div>
+
+<style>
+  :global(.suggestion-icon) {
+    background-color: #e8eaf9;
+    width: 20px !important;
+    height: 20px !important;
+    margin-left: 4px;
+    background-image: url('/icons/use-chat.svg');
+    background-size: 16px 16px;
+    background-repeat: no-repeat;
+    background-position: center;
+    border-radius: 4px;
+    cursor: pointer;
+  }
+
+  :global(#editor.mermaid-dark .suggestion-icon) {
+    background-color: #2e4d6b;
+    background-image: url('/icons/use-chat-dark.svg');
+  }
+</style>
diff --git a/src/lib/constants.ts b/src/lib/constants.ts
index 2e71e336..9a83ddba 100644
--- a/src/lib/constants.ts
+++ b/src/lib/constants.ts
@@ -10,5 +10,6 @@ export const TID = {
 } as const;
 
 export const C = {
+  aiLiveEditor: 'ai_live_editor',
   utmSource: 'mermaid_live_editor'
 } as const;
diff --git a/src/lib/util/AIPromptViewZoneManager.ts b/src/lib/util/AIPromptViewZoneManager.ts
new file mode 100644
index 00000000..483363eb
--- /dev/null
+++ b/src/lib/util/AIPromptViewZoneManager.ts
@@ -0,0 +1,71 @@
+import type * as monaco from 'monaco-editor';
+
+export class AIPromptViewZoneManager {
+  private editor: monaco.editor.IStandaloneCodeEditor | null = null;
+  private viewZoneId: string | null = null;
+  private viewZoneNode: HTMLElement | null = null;
+  private viewZone: monaco.editor.IViewZone | null = null;
+  private topPopupSpace = 8;
+
+  public setEditor(editor: monaco.editor.IStandaloneCodeEditor): void {
+    this.editor = editor;
+  }
+
+  public show(lineNumber: number, node: HTMLElement, height: number): void {
+    if (!this.editor) return;
+
+    this.viewZoneNode = node;
+
+    this.editor.changeViewZones((changeAccessor) => {
+      if (this.viewZoneId) {
+        changeAccessor.removeZone(this.viewZoneId);
+      }
+
+      const domNode = document.createElement('div');
+      domNode.style.top = '0px';
+      domNode.style.paddingTop = '8px';
+      domNode.style.paddingBottom = '0px';
+      domNode.appendChild(this.viewZoneNode as Node);
+
+      this.viewZone = {
+        afterLineNumber: lineNumber,
+        heightInPx: height + this.topPopupSpace,
+        domNode: domNode
+      };
+
+      this.viewZoneId = changeAccessor.addZone(this.viewZone);
+    });
+  }
+
+  public updateHeight(height: number): void {
+    if (!this.editor || !this.viewZoneId || !this.viewZone) return;
+
+    this.viewZone.heightInPx = height + this.topPopupSpace;
+    this.editor.changeViewZones((changeAccessor) => {
+      if (this.viewZoneId) {
+        changeAccessor.layoutZone(this.viewZoneId);
+      }
+    });
+  }
+
+  public hide(): void {
+    if (!this.editor || !this.viewZoneId) return;
+
+    this.editor.changeViewZones((changeAccessor) => {
+      if (this.viewZoneId) {
+        changeAccessor.removeZone(this.viewZoneId);
+        this.viewZoneId = null;
+        this.viewZone = null;
+      }
+    });
+
+    if (this.viewZoneNode) {
+      this.viewZoneNode = null;
+    }
+  }
+
+  public destroy(): void {
+    this.hide();
+    this.editor = null;
+  }
+}
diff --git a/src/lib/util/state.ts b/src/lib/util/state.ts
index 06ffb259..b52cd78a 100644
--- a/src/lib/util/state.ts
+++ b/src/lib/util/state.ts
@@ -1,4 +1,3 @@
-import { C } from '$/constants';
 import type { ErrorHash, MarkerData, State, ValidatedState } from '$/types';
 import { debounce } from 'lodash-es';
 import type { MermaidConfig } from 'mermaid';
@@ -12,7 +11,7 @@ import {
 import { parse } from './mermaid';
 import { localStorage, persist } from './persist';
 import { deserializeState, pakoSerde, serializeState } from './serde';
-import { errorDebug, formatJSON, MCBaseURL } from './util';
+import { errorDebug, formatJSON, getUTMSource, MCBaseURL } from './util';
 
 export const defaultState: State = {
   code: `flowchart TD
@@ -140,10 +139,11 @@ export const urlsStore = derived([stateStore], ([{ code, serialized }]) => {
     mermaidChart: ({
       medium
     }: {
-      medium: 'ai_repair' | 'main_menu' | 'save_diagram' | 'share';
+      medium: 'ai_repair' | 'main_menu' | 'save_diagram' | 'share' | 'vibe_diagramming';
     }) => {
+      const utmSource = getUTMSource();
       const params = new URLSearchParams({
-        utm_source: C.utmSource,
+        utm_source: utmSource,
         utm_medium: medium
       }).toString();
       return {
diff --git a/src/lib/util/util.ts b/src/lib/util/util.ts
index 08552c55..8eb5e2be 100644
--- a/src/lib/util/util.ts
+++ b/src/lib/util/util.ts
@@ -1,3 +1,4 @@
+import { C } from '$/constants';
 import { env } from './env';
 import { loadDataFromUrl } from './fileLoaders/loader';
 import { initLoading } from './loading';
@@ -88,3 +89,10 @@ function fallbackCopyToClipboard(text: string) {
     textArea.remove();
   }
 }
+
+export const getUTMSource = (): string => {
+  if (typeof window !== 'undefined' && window.location.host.includes('mermaid.ai')) {
+    return C.aiLiveEditor;
+  }
+  return C.utmSource;
+};
diff --git a/static/icons/use-chat-dark.svg b/static/icons/use-chat-dark.svg
new file mode 100644
index 00000000..b24e7143
--- /dev/null
+++ b/static/icons/use-chat-dark.svg
@@ -0,0 +1,9 @@
+<svg id="mySvg" width="64" height="64" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"
+  aria-hidden="true" role="img">
+  <path class="p1"
+    d="M19 4C19 6.50909 19.8727 8.63636 21.6182 10.3818C23.3636 12.1273 25.4909 13 28 13C25.4909 13 23.3636 13.8727 21.6182 15.6182C19.8727 17.3636 19 19.4909 19 22C19 19.4909 18.1273 17.3636 16.3818 15.6182C14.6364 13.8727 12.5091 13 10 13C12.5091 13 14.6364 12.1273 16.3818 10.3818C18.1273 8.63636 19 6.50909 19 4Z"
+    fill="white" />
+  <path class="p2"
+    d="M8.5 16C8.5 17.2545 8.93636 18.3182 9.80909 19.1909C10.6818 20.0636 11.7455 20.5 13 20.5C11.7455 20.5 10.6818 20.9364 9.80909 21.8091C8.93636 22.6818 8.5 23.7455 8.5 25C8.5 23.7455 8.06364 22.6818 7.19091 21.8091C6.31818 20.9364 5.25455 20.5 4 20.5C5.25455 20.5 6.31818 20.0636 7.19091 19.1909C8.06364 18.3182 8.5 17.2545 8.5 16Z"
+    fill="white" />
+</svg>
\ No newline at end of file
diff --git a/static/icons/use-chat.svg b/static/icons/use-chat.svg
new file mode 100644
index 00000000..5f4d7e45
--- /dev/null
+++ b/static/icons/use-chat.svg
@@ -0,0 +1,9 @@
+<svg id="mySvg" width="64" height="64" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"
+  aria-hidden="true" role="img">
+  <path class="p1"
+    d="M19 4C19 6.50909 19.8727 8.63636 21.6182 10.3818C23.3636 12.1273 25.4909 13 28 13C25.4909 13 23.3636 13.8727 21.6182 15.6182C19.8727 17.3636 19 19.4909 19 22C19 19.4909 18.1273 17.3636 16.3818 15.6182C14.6364 13.8727 12.5091 13 10 13C12.5091 13 14.6364 12.1273 16.3818 10.3818C18.1273 8.63636 19 6.50909 19 4Z"
+    fill="black" />
+  <path class="p2"
+    d="M8.5 16C8.5 17.2545 8.93636 18.3182 9.80909 19.1909C10.6818 20.0636 11.7455 20.5 13 20.5C11.7455 20.5 10.6818 20.9364 9.80909 21.8091C8.93636 22.6818 8.5 23.7455 8.5 25C8.5 23.7455 8.06364 22.6818 7.19091 21.8091C6.31818 20.9364 5.25455 20.5 4 20.5C5.25455 20.5 6.31818 20.0636 7.19091 19.1909C8.06364 18.3182 8.5 17.2545 8.5 16Z"
+    fill="black" />
+</svg>
\ No newline at end of file