diff --git a/prisma/migrations/20260311030000_add_vrl_conversation_fields/migration.sql b/prisma/migrations/20260311030000_add_vrl_conversation_fields/migration.sql
new file mode 100644
index 0000000..b92f422
--- /dev/null
+++ b/prisma/migrations/20260311030000_add_vrl_conversation_fields/migration.sql
@@ -0,0 +1,8 @@
+-- AlterTable
+ALTER TABLE "AiConversation" ADD COLUMN "componentKey" TEXT;
+
+-- AlterTable
+ALTER TABLE "AiMessage" ADD COLUMN "vrlCode" TEXT;
+
+-- CreateIndex
+CREATE INDEX "AiConversation_pipelineId_componentKey_idx" ON "AiConversation"("pipelineId", "componentKey");
diff --git a/prisma/schema.prisma b/prisma/schema.prisma
index abbff76..961c589 100644
--- a/prisma/schema.prisma
+++ b/prisma/schema.prisma
@@ -775,16 +775,18 @@ model ServiceAccount {
 }
 
 model AiConversation {
-  id          String      @id @default(cuid())
-  pipelineId  String
-  pipeline    Pipeline    @relation(fields: [pipelineId], references: [id], onDelete: Cascade)
-  createdById String?
-  createdBy   User?       @relation("AiConversationCreatedBy", fields: [createdById], references: [id], onDelete: SetNull)
-  messages    AiMessage[]
-  createdAt   DateTime    @default(now())
-  updatedAt   DateTime    @updatedAt
+  id            String      @id @default(cuid())
+  pipelineId    String
+  pipeline      Pipeline    @relation(fields: [pipelineId], references: [id], onDelete: Cascade)
+  componentKey  String?
+  createdById   String?
+  createdBy     User?       @relation("AiConversationCreatedBy", fields: [createdById], references: [id], onDelete: SetNull)
+  messages      AiMessage[]
+  createdAt     DateTime    @default(now())
+  updatedAt     DateTime    @updatedAt
 
   @@index([pipelineId, createdAt])
+  @@index([pipelineId, componentKey])
 }
 
 model AiMessage {
@@ -795,6 +797,7 @@ model AiMessage {
   content         String
   suggestions     Json?
   pipelineYaml    String?
+  vrlCode         String?
   createdById     String?
   createdBy       User?           @relation("AiMessageCreatedBy", fields: [createdById], references: [id], onDelete: SetNull)
   createdAt       DateTime        @default(now())
diff --git a/src/app/api/ai/vrl-chat/route.ts b/src/app/api/ai/vrl-chat/route.ts
new file mode 100644
index 0000000..165d59d
--- /dev/null
+++ b/src/app/api/ai/vrl-chat/route.ts
@@ -0,0 +1,246 @@
+export const runtime = "nodejs";
+
+import { auth } from "@/auth";
+import { prisma } from "@/lib/prisma";
+import { streamCompletion } from "@/server/services/ai";
+import { buildVrlChatSystemPrompt } from "@/lib/ai/prompts";
+import { writeAuditLog } from "@/server/services/audit";
+import type { VrlChatResponse } from "@/lib/ai/vrl-suggestion-types";
+import { Prisma } from "@/generated/prisma";
+
+export async function POST(request: Request) {
+  const session = await auth();
+  if (!session?.user?.id) {
+    return new Response(JSON.stringify({ error: "Unauthorized" }), {
+      status: 401,
+      headers: { "Content-Type": "application/json" },
+    });
+  }
+
+  let body: {
+    teamId: string;
+    prompt: string;
+    currentCode?: string;
+    fields?: { name: string; type: string }[];
+    componentType?: string;
+    sourceTypes?: string[];
+    pipelineId: string;
+    componentKey: string;
+    conversationId?: string;
+  };
+
+  try {
+    body = await request.json();
+  } catch {
+    return new Response(JSON.stringify({ error: "Invalid JSON" }), {
+      status: 400,
+      headers: { "Content-Type": "application/json" },
+    });
+  }
+
+  if (!body.teamId || !body.prompt || !body.pipelineId || !body.componentKey) {
+    return new Response(
+      JSON.stringify({ error: "teamId, prompt, pipelineId, and componentKey are required" }),
+      { status: 400, headers: { "Content-Type": "application/json" } },
+    );
+  }
+
+  // Verify user is at least EDITOR on this team
+  const membership = await prisma.teamMember.findUnique({
+    where: { userId_teamId: { userId: session.user.id, teamId: body.teamId } },
+  });
+  const user = await prisma.user.findUnique({
+    where: { id: session.user.id },
+    select: { isSuperAdmin: true },
+  });
+
+  if (!membership && !user?.isSuperAdmin) {
+    return new Response(JSON.stringify({ error: "Forbidden" }), {
+      status: 403,
+      headers: { "Content-Type": "application/json" },
+    });
+  }
+  if (membership && membership.role === "VIEWER" && !user?.isSuperAdmin) {
+    return new Response(JSON.stringify({ error: "EDITOR role required" }), {
+      status: 403,
+      headers: { "Content-Type": "application/json" },
+    });
+  }
+
+  // Verify pipelineId belongs to the team
+  const pipeline = await prisma.pipeline.findUnique({
+    where: { id: body.pipelineId },
+    select: { environmentId: true, environment: { select: { teamId: true } } },
+  });
+  if (!pipeline || pipeline.environment.teamId !== body.teamId) {
+    return new Response(JSON.stringify({ error: "Pipeline not found" }), {
+      status: 404,
+      headers: { "Content-Type": "application/json" },
+    });
+  }
+
+  // --- Conversation persistence ---
+  let conversationId = body.conversationId;
+  let priorMessages: Array<{ role: "user" | "assistant"; content: string }> = [];
+
+  if (!conversationId) {
+    // Reuse existing conversation for this pipeline + component if one exists
+    const existing = await prisma.aiConversation.findFirst({
+      where: { pipelineId: body.pipelineId, componentKey: body.componentKey },
+      orderBy: { createdAt: "desc" },
+      select: { id: true },
+    });
+    if (existing) {
+      conversationId = existing.id;
+    } else {
+      const conversation = await prisma.aiConversation.create({
+        data: {
+          pipelineId: body.pipelineId,
+          componentKey: body.componentKey,
+          createdById: session.user.id,
+        },
+      });
+      conversationId = conversation.id;
+    }
+  } else {
+    // Verify conversationId belongs to this pipeline + component
+    const existing = await prisma.aiConversation.findUnique({
+      where: { id: conversationId },
+      select: { pipelineId: true, componentKey: true },
+    });
+    if (
+      !existing ||
+      existing.pipelineId !== body.pipelineId ||
+      existing.componentKey !== body.componentKey
+    ) {
+      return new Response(JSON.stringify({ error: "Conversation not found" }), {
+        status: 404,
+        headers: { "Content-Type": "application/json" },
+      });
+    }
+  }
+
+  // Save user message
+  await prisma.aiMessage.create({
+    data: {
+      conversationId,
+      role: "user",
+      content: body.prompt,
+      vrlCode: body.currentCode ?? null,
+      createdById: session.user.id,
+    },
+  });
+
+  // Get most recent 10 messages (desc) then reverse to chronological order
+  const history = await prisma.aiMessage.findMany({
+    where: { conversationId },
+    orderBy: { createdAt: "desc" },
+    take: 10,
+    select: { role: true, content: true },
+  });
+  history.reverse();
+
+  // Exclude the message we just saved (last user msg) — it goes as the current prompt
+  priorMessages = history.slice(0, -1).map((m) => ({
+    role: m.role as "user" | "assistant",
+    content: m.content,
+  }));
+
+  const messages: Array<{ role: "user" | "assistant"; content: string }> = [
+    ...priorMessages,
+    { role: "user", content: body.prompt },
+  ];
+
+  const systemPrompt = buildVrlChatSystemPrompt({
+    fields: body.fields,
+    currentCode: body.currentCode,
+    componentType: body.componentType,
+    sourceTypes: body.sourceTypes,
+  });
+
+  const encoder = new TextEncoder();
+  let fullResponse = "";
+
+  const stream = new ReadableStream({
+    async start(controller) {
+      try {
+        controller.enqueue(
+          encoder.encode(`data: ${JSON.stringify({ conversationId })}\n\n`),
+        );
+
+        await streamCompletion({
+          teamId: body.teamId,
+          systemPrompt,
+          messages,
+          onToken: (token) => {
+            fullResponse += token;
+            const data = JSON.stringify({ token });
+            controller.enqueue(encoder.encode(`data: ${data}\n\n`));
+          },
+          signal: request.signal,
+        });
+
+        // Persist assistant response
+        let parsedSuggestions = null;
+        try {
+          const parsed: VrlChatResponse = JSON.parse(fullResponse);
+          if (parsed.summary && Array.isArray(parsed.suggestions)) {
+            parsedSuggestions = parsed.suggestions;
+          }
+        } catch {
+          // Not valid JSON — store as raw text
+        }
+
+        try {
+          await prisma.aiMessage.create({
+            data: {
+              conversationId: conversationId!,
+              role: "assistant",
+              content: fullResponse,
+              suggestions: (parsedSuggestions as unknown as Prisma.InputJsonValue) ?? undefined,
+              vrlCode: body.currentCode ?? null,
+              createdById: session.user.id,
+            },
+          });
+        } catch (err) {
+          console.error("Failed to persist VRL AI response:", err);
+        }
+
+        writeAuditLog({
+          userId: session.user.id,
+          action: "pipeline.vrl_ai_chat",
+          entityType: "Pipeline",
+          entityId: body.pipelineId,
+          metadata: {
+            conversationId,
+            componentKey: body.componentKey,
+            suggestionCount: parsedSuggestions?.length ?? 0,
+          },
+          teamId: pipeline.environment.teamId,
+          environmentId: pipeline.environmentId,
+          userEmail: session.user.email ?? null,
+          userName: session.user.name ?? null,
+        }).catch(() => {});
+
+        controller.enqueue(encoder.encode(`data: ${JSON.stringify({ done: true })}\n\n`));
+      } catch (err) {
+        if (!request.signal.aborted) {
+          const message = err instanceof Error ? err.message : "AI request failed";
+          controller.enqueue(
+            encoder.encode(`data: ${JSON.stringify({ error: message })}\n\n`),
+          );
+        }
+      } finally {
+        controller.close();
+      }
+    },
+  });
+
+  return new Response(stream, {
+    headers: {
+      "Content-Type": "text/event-stream",
+      "Cache-Control": "no-cache",
+      Connection: "keep-alive",
+    },
+  });
+}
diff --git a/src/components/flow/detail-panel.tsx b/src/components/flow/detail-panel.tsx
index 4aea047..5ca252f 100644
--- a/src/components/flow/detail-panel.tsx
+++ b/src/components/flow/detail-panel.tsx
@@ -461,6 +461,7 @@ export function DetailPanel({ pipelineId, isDeployed }: DetailPanelProps) {
                         onChange={(v) => handleConfigChange({ ...config, source: v })}
                         sourceTypes={upstream.sourceTypes}
                         pipelineId={pipelineId}
+                        componentKey={componentKey}
                         upstreamSourceKeys={upstream.sourceKeys}
                       />
                     </div>
@@ -475,6 +476,7 @@ export function DetailPanel({ pipelineId, isDeployed }: DetailPanelProps) {
                         onChange={(v) => handleConfigChange({ ...config, condition: v })}
                         sourceTypes={upstream.sourceTypes}
                         pipelineId={pipelineId}
+                        componentKey={componentKey}
                         upstreamSourceKeys={upstream.sourceKeys}
                       />
                     </div>
@@ -505,6 +507,7 @@ export function DetailPanel({ pipelineId, isDeployed }: DetailPanelProps) {
                             height="120px"
                             sourceTypes={upstream.sourceTypes}
                             pipelineId={pipelineId}
+                            componentKey={componentKey}
                             upstreamSourceKeys={upstream.sourceKeys}
                           />
                         </div>
diff --git a/src/components/vrl-editor/ai-input.tsx b/src/components/vrl-editor/ai-input.tsx
deleted file mode 100644
index f32d7fe..0000000
--- a/src/components/vrl-editor/ai-input.tsx
+++ /dev/null
@@ -1,186 +0,0 @@
-// src/components/vrl-editor/ai-input.tsx
-"use client";
-
-import { useState, useRef, useCallback } from "react";
-import { Loader2, RotateCcw, Plus, Replace } from "lucide-react";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { useTeamStore } from "@/stores/team-store";
-
-interface AiInputProps {
-  currentCode: string;
-  fields?: { name: string; type: string }[];
-  componentType?: string;
-  sourceTypes?: string[];
-  onInsert: (code: string) => void;
-  onReplace: (code: string) => void;
-}
-
-export function AiInput({
-  currentCode,
-  fields,
-  componentType,
-  sourceTypes,
-  onInsert,
-  onReplace,
-}: AiInputProps) {
-  const [prompt, setPrompt] = useState("");
-  const [result, setResult] = useState("");
-  const [isStreaming, setIsStreaming] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-  const abortRef = useRef<AbortController | null>(null);
-  const selectedTeamId = useTeamStore((s) => s.selectedTeamId);
-
-  const handleSubmit = useCallback(
-    async (e?: React.FormEvent) => {
-      e?.preventDefault();
-      if (!prompt.trim() || !selectedTeamId || isStreaming) return;
-
-      setIsStreaming(true);
-      setResult("");
-      setError(null);
-
-      abortRef.current = new AbortController();
-
-      try {
-        const response = await fetch("/api/ai/vrl", {
-          method: "POST",
-          headers: { "Content-Type": "application/json" },
-          body: JSON.stringify({
-            teamId: selectedTeamId,
-            prompt: prompt.trim(),
-            currentCode,
-            fields,
-            componentType,
-            sourceTypes,
-          }),
-          signal: abortRef.current.signal,
-        });
-
-        if (!response.ok) {
-          const errData = await response.json().catch(() => ({ error: "Request failed" }));
-          throw new Error(errData.error || `HTTP ${response.status}`);
-        }
-
-        const reader = response.body?.getReader();
-        if (!reader) throw new Error("No response stream");
-
-        const decoder = new TextDecoder();
-        let buffer = "";
-
-        while (true) {
-          const { done, value } = await reader.read();
-          if (done) break;
-
-          buffer += decoder.decode(value, { stream: true });
-          const lines = buffer.split("\n");
-          buffer = lines.pop() ?? "";
-
-          for (const line of lines) {
-            const trimmed = line.trim();
-            if (!trimmed || !trimmed.startsWith("data: ")) continue;
-
-            try {
-              const data = JSON.parse(trimmed.slice(6));
-              if (data.done) break;
-              if (data.error) throw new Error(data.error);
-              if (data.token) {
-                setResult((prev) => prev + data.token);
-              }
-            } catch (parseErr) {
-              if (parseErr instanceof Error && parseErr.message !== "Unexpected end of JSON input") {
-                throw parseErr;
-              }
-            }
-          }
-        }
-      } catch (err) {
-        if (err instanceof Error && err.name === "AbortError") return;
-        setError(err instanceof Error ? err.message : "AI request failed");
-      } finally {
-        setIsStreaming(false);
-        abortRef.current = null;
-      }
-    },
-    [prompt, selectedTeamId, currentCode, fields, componentType, sourceTypes, isStreaming],
-  );
-
-  const handleCancel = () => {
-    abortRef.current?.abort();
-  };
-
-  const handleRegenerate = () => {
-    setResult("");
-    handleSubmit();
-  };
-
-  return (
-    <div className="space-y-3">
-      <form onSubmit={handleSubmit} className="flex gap-2">
-        <Input
-          value={prompt}
-          onChange={(e) => setPrompt(e.target.value)}
-          placeholder="Describe what you want the VRL to do..."
-          disabled={isStreaming}
-          className="text-sm"
-        />
-        {isStreaming ? (
-          <Button type="button" variant="outline" size="sm" onClick={handleCancel}>
-            Cancel
-          </Button>
-        ) : (
-          <Button type="submit" size="sm" disabled={!prompt.trim()}>
-            Generate
-          </Button>
-        )}
-      </form>
-
-      {error && (
-        <div className="rounded border border-destructive/50 bg-destructive/10 px-3 py-2 text-xs text-destructive">
-          {error}
-        </div>
-      )}
-
-      {(result || isStreaming) && (
-        <div className="space-y-2">
-          <div className="relative rounded border bg-muted/50 p-3 font-mono text-sm whitespace-pre-wrap max-h-[200px] overflow-y-auto">
-            {result || (
-              <span className="text-muted-foreground flex items-center gap-2">
-                <Loader2 className="h-3 w-3 animate-spin" />
-                Generating...
-              </span>
-            )}
-          </div>
-          {!isStreaming && result && (
-            <div className="flex gap-2">
-              <Button
-                size="sm"
-                variant="outline"
-                onClick={() => onInsert(result)}
-              >
-                <Plus className="mr-1.5 h-3 w-3" />
-                Insert
-              </Button>
-              <Button
-                size="sm"
-                variant="outline"
-                onClick={() => onReplace(result)}
-              >
-                <Replace className="mr-1.5 h-3 w-3" />
-                Replace
-              </Button>
-              <Button
-                size="sm"
-                variant="ghost"
-                onClick={handleRegenerate}
-              >
-                <RotateCcw className="mr-1.5 h-3 w-3" />
-                Regenerate
-              </Button>
-            </div>
-          )}
-        </div>
-      )}
-    </div>
-  );
-}
diff --git a/src/components/vrl-editor/vrl-ai-message.tsx b/src/components/vrl-editor/vrl-ai-message.tsx
new file mode 100644
index 0000000..52cf5b1
--- /dev/null
+++ b/src/components/vrl-editor/vrl-ai-message.tsx
@@ -0,0 +1,165 @@
+"use client";
+
+import { useState, useMemo } from "react";
+import { Bot, User } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { VrlSuggestionCard } from "./vrl-suggestion-card";
+import type { VrlSuggestion } from "@/lib/ai/vrl-suggestion-types";
+import {
+  parseVrlChatResponse,
+  computeVrlSuggestionStatuses,
+} from "@/lib/ai/vrl-suggestion-types";
+import type { VrlConversationMessage } from "@/hooks/use-vrl-ai-conversation";
+
+interface VrlAiMessageProps {
+  message: VrlConversationMessage;
+  currentCode: string;
+  onApplySelected: (messageId: string, suggestions: VrlSuggestion[]) => void;
+}
+
+export function VrlAiMessage({
+  message,
+  currentCode,
+  onApplySelected,
+}: VrlAiMessageProps) {
+  const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set());
+
+  const suggestions = useMemo(
+    () => message.suggestions ?? [],
+    [message.suggestions],
+  );
+  const hasSuggestions =
+    message.role === "assistant" && suggestions.length > 0;
+
+  // Parse summary from assistant JSON content
+  const summary = useMemo(() => {
+    if (message.role !== "assistant") return null;
+    if (!hasSuggestions) return null;
+    try {
+      const parsed = JSON.parse(message.content);
+      return parsed.summary as string | undefined;
+    } catch {
+      return null;
+    }
+  }, [message.content, message.role, hasSuggestions]);
+
+  // Compute suggestion statuses based on current editor content
+  const suggestionStatuses = useMemo(
+    () => computeVrlSuggestionStatuses(suggestions, currentCode),
+    [suggestions, currentCode],
+  );
+
+  const actionableSuggestions = suggestions.filter(
+    (s) => suggestionStatuses.get(s.id) === "actionable",
+  );
+
+  const selectedSuggestions = suggestions.filter((s) =>
+    selectedIds.has(s.id),
+  );
+
+  const actionableSelectedSuggestions = selectedSuggestions.filter(
+    (s) => suggestionStatuses.get(s.id) === "actionable",
+  );
+
+  const handleToggle = (id: string) => {
+    setSelectedIds((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) {
+        next.delete(id);
+      } else {
+        next.add(id);
+      }
+      return next;
+    });
+  };
+
+  const handleApplyAll = () => {
+    if (actionableSuggestions.length > 0) {
+      onApplySelected(message.id, actionableSuggestions);
+    }
+  };
+
+  const handleApplySelected = () => {
+    const applicableSelected = selectedSuggestions.filter(
+      (s) => suggestionStatuses.get(s.id) === "actionable",
+    );
+    if (applicableSelected.length > 0) {
+      onApplySelected(message.id, applicableSelected);
+    }
+  };
+
+  if (message.role === "user") {
+    return (
+      <div className="flex items-start gap-3">
+        <div className="flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-primary/10">
+          <User className="h-3.5 w-3.5 text-primary" />
+        </div>
+        <div className="flex-1 pt-0.5">
+          <p className="text-sm">{message.content}</p>
+        </div>
+      </div>
+    );
+  }
+
+  // Assistant message without suggestions — raw text fallback
+  if (!hasSuggestions) {
+    // Try to extract summary from raw text
+    const parsed = parseVrlChatResponse(message.content);
+    const displayText = parsed?.summary ?? message.content;
+
+    return (
+      <div className="flex items-start gap-3">
+        <div className="flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-violet-500/10">
+          <Bot className="h-3.5 w-3.5 text-violet-600 dark:text-violet-400" />
+        </div>
+        <div className="flex-1 pt-0.5">
+          <div className="text-sm whitespace-pre-wrap">{displayText}</div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex items-start gap-3">
+      <div className="flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-violet-500/10">
+        <Bot className="h-3.5 w-3.5 text-violet-600 dark:text-violet-400" />
+      </div>
+      <div className="flex-1 space-y-3">
+        {summary && (
+          <p className="text-sm text-muted-foreground">{summary}</p>
+        )}
+
+        <div className="space-y-2">
+          {suggestions.map((s) => (
+            <VrlSuggestionCard
+              key={s.id}
+              suggestion={s}
+              status={suggestionStatuses.get(s.id) ?? "actionable"}
+              isSelected={selectedIds.has(s.id)}
+              onToggle={handleToggle}
+            />
+          ))}
+        </div>
+
+        {actionableSuggestions.length > 0 && (
+          <div className="flex gap-2">
+            <Button size="sm" onClick={handleApplyAll}>
+              Apply All ({actionableSuggestions.length})
+            </Button>
+            <Button
+              size="sm"
+              variant="outline"
+              onClick={handleApplySelected}
+              disabled={actionableSelectedSuggestions.length === 0}
+            >
+              Apply Selected
+              {actionableSelectedSuggestions.length > 0
+                ? ` (${actionableSelectedSuggestions.length})`
+                : ""}
+            </Button>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/vrl-editor/vrl-ai-panel.tsx b/src/components/vrl-editor/vrl-ai-panel.tsx
new file mode 100644
index 0000000..3d8cc4d
--- /dev/null
+++ b/src/components/vrl-editor/vrl-ai-panel.tsx
@@ -0,0 +1,187 @@
+"use client";
+
+import { useState, useRef, useEffect, useCallback } from "react";
+import { Bot, Loader2, RotateCcw, Send, X } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { VrlAiMessage } from "./vrl-ai-message";
+import { applyVrlSuggestion } from "@/lib/ai/vrl-suggestion-types";
+import type { VrlSuggestion } from "@/lib/ai/vrl-suggestion-types";
+import type { useVrlAiConversation } from "@/hooks/use-vrl-ai-conversation";
+
+type ConversationReturn = ReturnType<typeof useVrlAiConversation>;
+
+interface VrlAiPanelProps {
+  conversation: ConversationReturn;
+  currentCode: string;
+  onCodeChange: (code: string) => void;
+  onClose: () => void;
+}
+
+export function VrlAiPanel({
+  conversation,
+  currentCode,
+  onCodeChange,
+  onClose,
+}: VrlAiPanelProps) {
+  const [prompt, setPrompt] = useState("");
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const messagesEndRef = useRef<HTMLDivElement>(null);
+
+  // Auto-scroll to bottom when new messages arrive
+  useEffect(() => {
+    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+  }, [conversation.messages, conversation.streamingContent]);
+
+  // Auto-grow textarea
+  useEffect(() => {
+    const ta = textareaRef.current;
+    if (!ta) return;
+    ta.style.height = "auto";
+    const maxHeight = 4 * 24; // 4 lines × ~24px line height
+    ta.style.height = `${Math.min(ta.scrollHeight, maxHeight)}px`;
+  }, [prompt]);
+
+  const handleSend = useCallback(() => {
+    if (!prompt.trim() || conversation.isStreaming) return;
+    conversation.sendMessage(prompt.trim());
+    setPrompt("");
+  }, [prompt, conversation]);
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      handleSend();
+    }
+  };
+
+  const handleApplySelected = useCallback(
+    (messageId: string, suggestions: VrlSuggestion[]) => {
+      let code = currentCode;
+      const appliedIds: string[] = [];
+
+      for (const suggestion of suggestions) {
+        const result = applyVrlSuggestion(suggestion, code);
+        if (result !== null) {
+          code = result;
+          appliedIds.push(suggestion.id);
+        }
+      }
+
+      if (appliedIds.length > 0) {
+        onCodeChange(code);
+        conversation.markSuggestionsApplied(messageId, appliedIds);
+      }
+    },
+    [currentCode, onCodeChange, conversation],
+  );
+
+  return (
+    <div className="flex flex-col h-full border-l">
+      {/* Header */}
+      <div className="flex items-center justify-between px-4 py-3 border-b">
+        <div className="flex items-center gap-2">
+          <Bot className="h-4 w-4 text-violet-600 dark:text-violet-400" />
+          <span className="text-sm font-medium">AI Assistant</span>
+        </div>
+        <div className="flex items-center gap-1">
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={conversation.startNewConversation}
+            disabled={conversation.isStreaming}
+            className="text-xs"
+          >
+            <RotateCcw className="h-3 w-3 mr-1" />
+            New
+          </Button>
+          <Button variant="ghost" size="icon" className="h-7 w-7" onClick={onClose}>
+            <X className="h-3.5 w-3.5" />
+          </Button>
+        </div>
+      </div>
+
+      {/* Messages */}
+      <div className="flex-1 overflow-y-auto px-4 py-3 space-y-4">
+        {conversation.isLoading && (
+          <div className="flex items-center justify-center py-8 text-muted-foreground">
+            <Loader2 className="h-4 w-4 animate-spin mr-2" />
+            <span className="text-sm">Loading conversation...</span>
+          </div>
+        )}
+
+        {conversation.messages.map((msg) => (
+          <VrlAiMessage
+            key={msg.id}
+            message={msg}
+            currentCode={currentCode}
+            onApplySelected={handleApplySelected}
+          />
+        ))}
+
+        {/* Streaming indicator */}
+        {conversation.isStreaming && (
+          <div className="flex items-start gap-3">
+            <div className="flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-violet-500/10">
+              <Bot className="h-3.5 w-3.5 text-violet-600 dark:text-violet-400" />
+            </div>
+            <div className="flex-1 pt-0.5">
+              {conversation.streamingContent ? (
+                <div className="text-sm whitespace-pre-wrap text-muted-foreground">
+                  {conversation.streamingContent}
+                </div>
+              ) : (
+                <span className="text-sm text-muted-foreground flex items-center gap-2">
+                  <Loader2 className="h-3 w-3 animate-spin" />
+                  Thinking...
+                </span>
+              )}
+            </div>
+          </div>
+        )}
+
+        {conversation.error && (
+          <div className="rounded border border-destructive/50 bg-destructive/10 px-3 py-2 text-xs text-destructive">
+            {conversation.error}
+          </div>
+        )}
+
+        <div ref={messagesEndRef} />
+      </div>
+
+      {/* Input */}
+      <div className="border-t px-4 py-3">
+        <div className="flex gap-2 items-end">
+          <textarea
+            ref={textareaRef}
+            value={prompt}
+            onChange={(e) => setPrompt(e.target.value)}
+            onKeyDown={handleKeyDown}
+            placeholder="Ask about your VRL code..."
+            disabled={conversation.isStreaming}
+            rows={1}
+            className="flex-1 resize-none rounded-md border bg-background px-3 py-2 text-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:opacity-50"
+          />
+          {conversation.isStreaming ? (
+            <Button
+              variant="outline"
+              size="icon"
+              className="h-9 w-9 shrink-0"
+              onClick={conversation.cancelStreaming}
+            >
+              <X className="h-4 w-4" />
+            </Button>
+          ) : (
+            <Button
+              size="icon"
+              className="h-9 w-9 shrink-0"
+              disabled={!prompt.trim()}
+              onClick={handleSend}
+            >
+              <Send className="h-4 w-4" />
+            </Button>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/vrl-editor/vrl-editor.tsx b/src/components/vrl-editor/vrl-editor.tsx
index c8e9d78..72608cb 100644
--- a/src/components/vrl-editor/vrl-editor.tsx
+++ b/src/components/vrl-editor/vrl-editor.tsx
@@ -26,7 +26,9 @@ import { vrlTheme } from "./vrl-theme";
 import { VRL_SNIPPETS } from "@/lib/vrl/snippets";
 import { VrlSnippetDrawer } from "@/components/flow/vrl-snippet-drawer";
 import { VrlFieldsPanel } from "./vrl-fields-panel";
-import { AiInput } from "./ai-input";
+import { VrlAiPanel } from "./vrl-ai-panel";
+import { useVrlAiConversation } from "@/hooks/use-vrl-ai-conversation";
+import { cn } from "@/lib/utils";
 import { useTeamStore } from "@/stores/team-store";
 import { getMergedOutputSchemas, getSourceOutputSchema } from "@/lib/vector/source-output-schemas";
 import type { Monaco, OnMount } from "@monaco-editor/react";
@@ -54,6 +56,7 @@ interface VrlEditorProps {
   height?: string;
   sourceTypes?: string[];
   pipelineId?: string;
+  componentKey?: string;
   upstreamSourceKeys?: string[];
 }
 
@@ -61,12 +64,12 @@ interface VrlEditorProps {
 /*  Component                                                          */
 /* ------------------------------------------------------------------ */
 
-export function VrlEditor({ value, onChange, sourceTypes, pipelineId, upstreamSourceKeys }: VrlEditorProps) {
+export function VrlEditor({ value, onChange, sourceTypes, pipelineId, componentKey, upstreamSourceKeys }: VrlEditorProps) {
   const trpc = useTRPC();
   const [sampleInput, setSampleInput] = useState("");
   const [testOutput, setTestOutput] = useState<string | null>(null);
   const [testError, setTestError] = useState<string | null>(null);
-  const [toolsPanel, setToolsPanel] = useState<"fields" | "snippets" | "ai" | null>(null);
+  const [toolsPanel, setToolsPanel] = useState<"fields" | "snippets" | null>(null);
   const [expanded, setExpanded] = useState(false);
   const editorRef = useRef<EditorInstance | null>(null);
   const monacoRef = useRef<Monaco | null>(null);
@@ -88,6 +91,10 @@ export function VrlEditor({ value, onChange, sourceTypes, pipelineId, upstreamSo
   );
   const aiEnabled = teamQuery.data?.aiEnabled ?? false;
 
+  const [aiPanelOpen, setAiPanelOpen] = useState(false);
+
+  const canUseAiChat = aiEnabled && !!pipelineId && !!componentKey;
+
   const isRawTextSource = useMemo(() => {
     if (!sourceTypes || sourceTypes.length === 0) return false;
     return sourceTypes.some((t) => {
@@ -116,6 +123,14 @@ export function VrlEditor({ value, onChange, sourceTypes, pipelineId, upstreamSo
     return all;
   }, [sourceTypes, liveSchemaFields]);
 
+  const conversation = useVrlAiConversation({
+    pipelineId: pipelineId ?? "",
+    componentKey: componentKey ?? "",
+    currentCode: value,
+    fields: mergedFieldsForAi,
+    sourceTypes,
+  });
+
   const testMutation = useMutation(
     trpc.vrl.test.mutationOptions({
       onSuccess: (data) => {
@@ -344,7 +359,15 @@ export function VrlEditor({ value, onChange, sourceTypes, pipelineId, upstreamSo
 
       {/* Full-screen modal: editor (left) + tools (right) */}
       <Dialog open={expanded} onOpenChange={setExpanded}>
-        <DialogContent className="sm:max-w-[calc(100vw-4rem)] xl:max-w-6xl h-[85vh] flex flex-col" onKeyDown={(e) => e.stopPropagation()}>
+        <DialogContent
+          className={cn(
+            "h-[85vh] flex flex-col transition-[max-width] duration-300",
+            aiPanelOpen
+              ? "max-w-[calc(100vw-4rem)]"
+              : "sm:max-w-[calc(100vw-4rem)] xl:max-w-6xl",
+          )}
+          onKeyDown={(e) => e.stopPropagation()}
+        >
           <DialogHeader>
             <DialogTitle>VRL Editor</DialogTitle>
           </DialogHeader>
@@ -392,11 +415,11 @@ export function VrlEditor({ value, onChange, sourceTypes, pipelineId, upstreamSo
                   <BookOpen className="mr-1.5 h-3.5 w-3.5" />
                   Snippets
                 </Button>
-                {aiEnabled && (
+                {canUseAiChat && (
                   <Button
-                    variant={toolsPanel === "ai" ? "secondary" : "outline"}
+                    variant={aiPanelOpen ? "secondary" : "outline"}
                     size="sm"
-                    onClick={() => setToolsPanel((prev) => (prev === "ai" ? null : "ai"))}
+                    onClick={() => setAiPanelOpen((prev) => !prev)}
                   >
                     <Sparkles className="mr-1.5 h-3.5 w-3.5" />
                     AI
@@ -464,23 +487,6 @@ export function VrlEditor({ value, onChange, sourceTypes, pipelineId, upstreamSo
                 <VrlSnippetDrawer onInsert={handleInsertSnippet} />
               )}
 
-              {/* AI panel */}
-              {toolsPanel === "ai" && (
-                <AiInput
-                  currentCode={value}
-                  fields={mergedFieldsForAi}
-                  componentType={undefined}
-                  sourceTypes={sourceTypes}
-                  onInsert={(code) => {
-                    const newValue = value ? `${value}\n${code}` : code;
-                    onChange(newValue);
-                  }}
-                  onReplace={(code) => {
-                    onChange(code);
-                  }}
-                />
-              )}
-
               {/* Test panel (always visible) */}
               <div className="space-y-3 rounded border p-3">
                 <div className="space-y-1.5">
@@ -561,6 +567,18 @@ export function VrlEditor({ value, onChange, sourceTypes, pipelineId, upstreamSo
                 )}
               </div>
             </div>
+
+            {/* AI Chat slide-out panel */}
+            {aiPanelOpen && canUseAiChat && (
+              <div className="w-[380px] shrink-0 min-h-0">
+                <VrlAiPanel
+                  conversation={conversation}
+                  currentCode={value}
+                  onCodeChange={onChange}
+                  onClose={() => setAiPanelOpen(false)}
+                />
+              </div>
+            )}
           </div>
         </DialogContent>
       </Dialog>
diff --git a/src/components/vrl-editor/vrl-suggestion-card.tsx b/src/components/vrl-editor/vrl-suggestion-card.tsx
new file mode 100644
index 0000000..41d38fe
--- /dev/null
+++ b/src/components/vrl-editor/vrl-suggestion-card.tsx
@@ -0,0 +1,123 @@
+"use client";
+
+import { Checkbox } from "@/components/ui/checkbox";
+import { Badge } from "@/components/ui/badge";
+import { cn } from "@/lib/utils";
+import type { VrlSuggestion, VrlSuggestionStatus } from "@/lib/ai/vrl-suggestion-types";
+
+interface VrlSuggestionCardProps {
+  suggestion: VrlSuggestion;
+  status: VrlSuggestionStatus;
+  isSelected: boolean;
+  onToggle: (id: string) => void;
+}
+
+const TYPE_LABELS: Record<VrlSuggestion["type"], string> = {
+  insert_code: "Insert",
+  replace_code: "Replace",
+  remove_code: "Remove",
+};
+
+const TYPE_COLORS: Record<VrlSuggestion["type"], string> = {
+  insert_code: "bg-green-500/15 text-green-700 dark:text-green-400",
+  replace_code: "bg-amber-500/15 text-amber-700 dark:text-amber-400",
+  remove_code: "bg-red-500/15 text-red-700 dark:text-red-400",
+};
+
+const PRIORITY_COLORS: Record<VrlSuggestion["priority"], string> = {
+  high: "bg-red-500/15 text-red-700 dark:text-red-400",
+  medium: "bg-amber-500/15 text-amber-700 dark:text-amber-400",
+  low: "bg-green-500/15 text-green-700 dark:text-green-400",
+};
+
+const STATUS_BADGES: Partial<
+  Record<VrlSuggestionStatus, { label: string; className: string }>
+> = {
+  applied: {
+    label: "Applied",
+    className: "bg-green-500/15 text-green-700 dark:text-green-400",
+  },
+  outdated: {
+    label: "Outdated",
+    className: "bg-amber-500/15 text-amber-700 dark:text-amber-400",
+  },
+};
+
+export function VrlSuggestionCard({
+  suggestion,
+  status,
+  isSelected,
+  onToggle,
+}: VrlSuggestionCardProps) {
+  const isDisabled = status === "applied" || status === "outdated";
+  const statusBadge = STATUS_BADGES[status];
+
+  return (
+    <div
+      className={cn(
+        "rounded-lg border p-3 transition-colors",
+        isSelected && !isDisabled && "border-primary/50 bg-primary/5",
+        isDisabled && "opacity-60",
+      )}
+    >
+      <div className="flex items-start gap-3">
+        <Checkbox
+          checked={isSelected}
+          disabled={isDisabled}
+          onCheckedChange={() => onToggle(suggestion.id)}
+          className="mt-0.5"
+        />
+
+        <div className="flex-1 min-w-0">
+          <div className="flex items-center gap-2 flex-wrap">
+            <span
+              className={cn(
+                "font-medium text-sm",
+                status === "applied" &&
+                  "line-through text-muted-foreground",
+              )}
+            >
+              {suggestion.title}
+            </span>
+
+            {statusBadge && (
+              <Badge
+                variant="outline"
+                size="sm"
+                className={statusBadge.className}
+              >
+                {statusBadge.label}
+              </Badge>
+            )}
+
+            <Badge
+              variant="outline"
+              size="sm"
+              className={PRIORITY_COLORS[suggestion.priority]}
+            >
+              {suggestion.priority}
+            </Badge>
+
+            <Badge
+              variant="outline"
+              size="sm"
+              className={TYPE_COLORS[suggestion.type]}
+            >
+              {TYPE_LABELS[suggestion.type]}
+            </Badge>
+          </div>
+
+          <p className="text-xs text-muted-foreground mt-1">
+            {suggestion.description}
+          </p>
+
+          {suggestion.code && (
+            <pre className="mt-2 text-xs font-mono bg-muted rounded px-2 py-1.5 overflow-x-auto whitespace-pre-wrap">
+              {suggestion.code}
+            </pre>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/hooks/use-vrl-ai-conversation.ts b/src/hooks/use-vrl-ai-conversation.ts
new file mode 100644
index 0000000..4074aa3
--- /dev/null
+++ b/src/hooks/use-vrl-ai-conversation.ts
@@ -0,0 +1,299 @@
+"use client";
+
+import { useState, useRef, useCallback } from "react";
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import { useTRPC } from "@/trpc/client";
+import { useTeamStore } from "@/stores/team-store";
+import type { VrlSuggestion } from "@/lib/ai/vrl-suggestion-types";
+import { parseVrlChatResponse } from "@/lib/ai/vrl-suggestion-types";
+
+export interface VrlConversationMessage {
+  id: string;
+  role: "user" | "assistant";
+  content: string;
+  suggestions?: VrlSuggestion[];
+  vrlCode?: string | null;
+  createdAt: string;
+  createdBy?: { id: string; name: string | null; image: string | null } | null;
+}
+
+interface UseVrlAiConversationOptions {
+  pipelineId: string;
+  componentKey: string;
+  currentCode?: string;
+  fields?: { name: string; type: string }[];
+  componentType?: string;
+  sourceTypes?: string[];
+}
+
+export function useVrlAiConversation({
+  pipelineId,
+  componentKey,
+  currentCode,
+  fields,
+  componentType,
+  sourceTypes,
+}: UseVrlAiConversationOptions) {
+  const trpc = useTRPC();
+  const queryClient = useQueryClient();
+  const selectedTeamId = useTeamStore((s) => s.selectedTeamId);
+
+  const [messages, setMessages] = useState<VrlConversationMessage[]>([]);
+  const [conversationId, setConversationId] = useState<string | null>(null);
+  const [isStreaming, setIsStreaming] = useState(false);
+  const [streamingContent, setStreamingContent] = useState("");
+  const [error, setError] = useState<string | null>(null);
+  const abortRef = useRef<AbortController | null>(null);
+  const isNewConversationRef = useRef(false);
+
+  // Load existing conversation
+  const conversationQuery = useQuery({
+    ...trpc.ai.getVrlConversation.queryOptions({ pipelineId, componentKey }),
+    enabled: !!pipelineId && !!componentKey,
+  });
+
+  // Sync loaded conversation into local state
+  const loadedConversation = conversationQuery.data;
+  if (
+    loadedConversation &&
+    !conversationId &&
+    messages.length === 0 &&
+    !isStreaming &&
+    !isNewConversationRef.current
+  ) {
+    setConversationId(loadedConversation.id);
+    setMessages(
+      loadedConversation.messages.map((m) => ({
+        id: m.id,
+        role: m.role as "user" | "assistant",
+        content: m.content,
+        suggestions: m.suggestions as unknown as VrlSuggestion[] | undefined,
+        vrlCode: m.vrlCode,
+        createdAt:
+          m.createdAt instanceof Date
+            ? m.createdAt.toISOString()
+            : String(m.createdAt),
+        createdBy: m.createdBy,
+      })),
+    );
+  }
+
+  const markAppliedMutation = useMutation(
+    trpc.ai.markVrlSuggestionsApplied.mutationOptions({}),
+  );
+
+  const sendMessage = useCallback(
+    async (prompt: string) => {
+      if (!prompt.trim() || !selectedTeamId || isStreaming) return;
+
+      isNewConversationRef.current = false;
+      setIsStreaming(true);
+      setStreamingContent("");
+      setError(null);
+
+      // Add optimistic user message
+      const userMessage: VrlConversationMessage = {
+        id: `temp-user-${Date.now()}`,
+        role: "user",
+        content: prompt.trim(),
+        vrlCode: currentCode ?? null,
+        createdAt: new Date().toISOString(),
+      };
+      setMessages((prev) => [...prev, userMessage]);
+
+      abortRef.current = new AbortController();
+      let fullResponse = "";
+
+      try {
+        const response = await fetch("/api/ai/vrl-chat", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({
+            teamId: selectedTeamId,
+            prompt: prompt.trim(),
+            currentCode,
+            fields,
+            componentType,
+            sourceTypes,
+            pipelineId,
+            componentKey,
+            conversationId,
+          }),
+          signal: abortRef.current.signal,
+        });
+
+        if (!response.ok) {
+          const errData = await response
+            .json()
+            .catch(() => ({ error: "Request failed" }));
+          throw new Error(errData.error || `HTTP ${response.status}`);
+        }
+
+        const reader = response.body?.getReader();
+        if (!reader) throw new Error("No response stream");
+
+        const decoder = new TextDecoder();
+        let buffer = "";
+
+        while (true) {
+          const { done, value } = await reader.read();
+          if (done) break;
+
+          buffer += decoder.decode(value, { stream: true });
+          const lines = buffer.split("\n");
+          buffer = lines.pop() ?? "";
+
+          for (const line of lines) {
+            const trimmed = line.trim();
+            if (!trimmed || !trimmed.startsWith("data: ")) continue;
+
+            try {
+              const data = JSON.parse(trimmed.slice(6));
+              if (data.conversationId) {
+                setConversationId(data.conversationId);
+                continue;
+              }
+              if (data.done) break;
+              if (data.error) throw new Error(data.error);
+              if (data.token) {
+                fullResponse += data.token;
+                setStreamingContent(fullResponse);
+              }
+            } catch (parseErr) {
+              if (
+                parseErr instanceof Error &&
+                parseErr.message !== "Unexpected end of JSON input"
+              ) {
+                throw parseErr;
+              }
+            }
+          }
+        }
+
+        // Parse the completed response
+        const parsed = parseVrlChatResponse(fullResponse);
+
+        const assistantMessage: VrlConversationMessage = {
+          id: `temp-assistant-${Date.now()}`,
+          role: "assistant",
+          content: fullResponse,
+          suggestions: parsed?.suggestions,
+          vrlCode: currentCode ?? null,
+          createdAt: new Date().toISOString(),
+        };
+        setMessages((prev) => [...prev, assistantMessage]);
+        setStreamingContent("");
+
+        // Refetch to sync local state with server-persisted messages (real IDs)
+        const refetched = await queryClient.fetchQuery({
+          ...trpc.ai.getVrlConversation.queryOptions({
+            pipelineId,
+            componentKey,
+          }),
+          staleTime: 0,
+        });
+        if (refetched?.messages) {
+          setMessages(
+            refetched.messages.map((m) => ({
+              id: m.id,
+              role: m.role as "user" | "assistant",
+              content: m.content,
+              suggestions: m.suggestions as unknown as
+                | VrlSuggestion[]
+                | undefined,
+              vrlCode: m.vrlCode,
+              createdAt:
+                m.createdAt instanceof Date
+                  ? m.createdAt.toISOString()
+                  : String(m.createdAt),
+              createdBy: m.createdBy,
+            })),
+          );
+        }
+      } catch (err) {
+        if (err instanceof Error && err.name === "AbortError") return;
+        setError(err instanceof Error ? err.message : "AI request failed");
+      } finally {
+        setIsStreaming(false);
+        abortRef.current = null;
+      }
+    },
+    [
+      selectedTeamId,
+      isStreaming,
+      currentCode,
+      fields,
+      componentType,
+      sourceTypes,
+      pipelineId,
+      componentKey,
+      conversationId,
+      queryClient,
+      trpc,
+    ],
+  );
+
+  const startNewConversation = useCallback(() => {
+    isNewConversationRef.current = true;
+    queryClient.removeQueries({
+      queryKey: trpc.ai.getVrlConversation.queryKey({
+        pipelineId,
+        componentKey,
+      }),
+    });
+    setMessages([]);
+    setConversationId(null);
+    setStreamingContent("");
+    setError(null);
+  }, [queryClient, trpc, pipelineId, componentKey]);
+
+  const markSuggestionsApplied = useCallback(
+    (messageId: string, suggestionIds: string[]) => {
+      if (!conversationId) return;
+
+      // Optimistically update local state so "Applied" badges render immediately
+      const now = new Date().toISOString();
+      setMessages((prev) =>
+        prev.map((msg) => {
+          if (msg.id !== messageId || !msg.suggestions) return msg;
+          return {
+            ...msg,
+            suggestions: msg.suggestions.map((s) =>
+              suggestionIds.includes(s.id)
+                ? { ...s, appliedAt: now }
+                : s,
+            ),
+          };
+        }),
+      );
+
+      // Skip server mutation for temp messages (not yet persisted)
+      if (messageId.startsWith("temp-")) return;
+
+      markAppliedMutation.mutate({
+        pipelineId,
+        conversationId,
+        messageId,
+        suggestionIds,
+      });
+    },
+    [conversationId, pipelineId, markAppliedMutation],
+  );
+
+  const cancelStreaming = useCallback(() => {
+    abortRef.current?.abort();
+  }, []);
+
+  return {
+    messages,
+    conversationId,
+    isStreaming,
+    streamingContent,
+    error,
+    isLoading: conversationQuery.isLoading,
+    sendMessage,
+    startNewConversation,
+    markSuggestionsApplied,
+    cancelStreaming,
+  };
+}
diff --git a/src/lib/ai/prompts.ts b/src/lib/ai/prompts.ts
index 6652414..f5d945c 100644
--- a/src/lib/ai/prompts.ts
+++ b/src/lib/ai/prompts.ts
@@ -38,6 +38,72 @@ export function buildVrlSystemPrompt(context: {
   return parts.join("\n");
 }
 
+export function buildVrlChatSystemPrompt(context: {
+  fields?: { name: string; type: string }[];
+  currentCode?: string;
+  componentType?: string;
+  sourceTypes?: string[];
+}): string {
+  const parts: string[] = [
+    "You are a VRL (Vector Remap Language) assistant for Vector data pipelines.",
+    "Analyze the user's VRL code and requests. Return your response as a JSON object.",
+    "",
+    "Response format (return ONLY this JSON, no markdown fencing, no extra text):",
+    JSON.stringify({
+      summary: "2-3 sentence analysis or explanation",
+      suggestions: [
+        {
+          id: "s1",
+          type: "insert_code",
+          title: "Short title",
+          description: "What this does and why",
+          priority: "high|medium|low",
+          code: "the VRL code",
+          targetCode: null,
+        },
+      ],
+    }, null, 2),
+    "",
+    "Suggestion types:",
+    '- insert_code: Adds new VRL code. Set targetCode to null.',
+    '- replace_code: Replaces existing VRL. Set targetCode to the EXACT existing code to find and replace.',
+    '- remove_code: Removes existing VRL. Set targetCode to the EXACT existing code to remove. Set code to empty string.',
+    "",
+    "Rules:",
+    "- Each suggestion needs a unique id (s1, s2, s3...)",
+    "- For replace_code/remove_code, targetCode MUST be an exact substring of the current VRL code",
+    "- Focus on: correctness, performance, readability, best practices",
+    "- Prioritize: high = bug or data loss risk, medium = optimization, low = cleanup",
+    "- Return valid JSON only. No markdown, no code fences, no commentary outside the JSON.",
+    "- Even in follow-up messages, always return the full JSON object.",
+    "- If the user asks a question that doesn't need code changes, return an empty suggestions array with your answer in the summary.",
+    "",
+    "=== VRL Function Reference ===",
+    VRL_REFERENCE,
+  ];
+
+  if (context.sourceTypes?.length) {
+    parts.push("", `Connected source types: ${context.sourceTypes.join(", ")}`);
+  }
+
+  if (context.componentType) {
+    parts.push(`Transform component type: ${context.componentType}`);
+  }
+
+  if (context.fields?.length) {
+    parts.push("", "Available fields in the event:");
+    for (const f of context.fields) {
+      parts.push(`  .${f.name} (${f.type})`);
+    }
+  }
+
+  if (context.currentCode?.trim()) {
+    parts.push("", "Current VRL code in the editor:", "```", context.currentCode, "```");
+  }
+
+  return parts.join("\n");
+}
+
 export function buildPipelineSystemPrompt(context: {
   mode: "generate" | "review";
   currentYaml?: string;
diff --git a/src/lib/ai/vrl-suggestion-types.ts b/src/lib/ai/vrl-suggestion-types.ts
new file mode 100644
index 0000000..1e00bf8
--- /dev/null
+++ b/src/lib/ai/vrl-suggestion-types.ts
@@ -0,0 +1,106 @@
+export interface VrlSuggestion {
+  id: string;
+  type: "insert_code" | "replace_code" | "remove_code";
+  title: string;
+  description: string;
+  priority: "high" | "medium" | "low";
+  code: string;
+  targetCode?: string;
+  appliedAt?: string;
+  appliedById?: string;
+}
+
+export interface VrlChatResponse {
+  summary: string;
+  suggestions: VrlSuggestion[];
+}
+
+/** Status of a VRL suggestion in the UI */
+export type VrlSuggestionStatus = "actionable" | "applied" | "outdated";
+
+/**
+ * Parse the streamed AI response as a VrlChatResponse.
+ * Returns null if the response is not valid JSON or missing required fields.
+ */
+export function parseVrlChatResponse(raw: string): VrlChatResponse | null {
+  try {
+    const parsed = JSON.parse(raw);
+    if (
+      typeof parsed === "object" &&
+      parsed !== null &&
+      typeof parsed.summary === "string" &&
+      Array.isArray(parsed.suggestions)
+    ) {
+      return parsed as VrlChatResponse;
+    }
+    return null;
+  } catch {
+    return null;
+  }
+}
+
+/**
+ * Compute the status of each VRL suggestion based on the current editor content.
+ *
+ * - insert_code: always actionable (no targetCode to become stale)
+ * - replace_code / remove_code: actionable if targetCode is found in currentCode, otherwise outdated
+ * - Any suggestion with appliedAt is marked as applied
+ */
+export function computeVrlSuggestionStatuses(
+  suggestions: VrlSuggestion[],
+  currentCode: string,
+): Map<string, VrlSuggestionStatus> {
+  const statuses = new Map<string, VrlSuggestionStatus>();
+
+  for (const s of suggestions) {
+    if (s.appliedAt) {
+      statuses.set(s.id, "applied");
+      continue;
+    }
+
+    if (s.type === "insert_code") {
+      statuses.set(s.id, "actionable");
+      continue;
+    }
+
+    // replace_code and remove_code: check if targetCode exists in current editor
+    if (s.targetCode && currentCode.includes(s.targetCode)) {
+      statuses.set(s.id, "actionable");
+    } else {
+      statuses.set(s.id, "outdated");
+    }
+  }
+
+  return statuses;
+}
+
+/**
+ * Apply a single VRL suggestion to the editor content.
+ * Returns the new code, or null if the suggestion can't be applied (targetCode not found).
+ */
+export function applyVrlSuggestion(
+  suggestion: VrlSuggestion,
+  currentCode: string,
+): string | null {
+  switch (suggestion.type) {
+    case "insert_code":
+      return currentCode
+        ? `${currentCode}\n${suggestion.code}`
+        : suggestion.code;
+
+    case "replace_code":
+      if (!suggestion.targetCode || !currentCode.includes(suggestion.targetCode)) {
+        return null;
+      }
+      return currentCode.replaceAll(suggestion.targetCode, suggestion.code);
+
+    case "remove_code":
+      if (!suggestion.targetCode || !currentCode.includes(suggestion.targetCode)) {
+        return null;
+      }
+      return currentCode.replaceAll(suggestion.targetCode, "").replace(/\n{3,}/g, "\n\n").trim();
+
+    default:
+      return null;
+  }
+}
diff --git a/src/server/routers/ai.ts b/src/server/routers/ai.ts
index f7a4d9e..7c2e113 100644
--- a/src/server/routers/ai.ts
+++ b/src/server/routers/ai.ts
@@ -11,7 +11,7 @@ export const aiRouter = router({
     .use(withTeamAccess("VIEWER"))
     .query(async ({ input }) => {
       const conversation = await prisma.aiConversation.findFirst({
-        where: { pipelineId: input.pipelineId },
+        where: { pipelineId: input.pipelineId, componentKey: null },
         orderBy: { createdAt: "desc" },
         include: {
           messages: {
@@ -80,6 +80,72 @@ export const aiRouter = router({
           data: { suggestions: updatedSuggestions as unknown as Prisma.InputJsonValue },
         });
 
+        return { applied: input.suggestionIds.length };
+      });
+    }),
+
+  getVrlConversation: protectedProcedure
+    .input(z.object({ pipelineId: z.string(), componentKey: z.string() }))
+    .use(withTeamAccess("VIEWER"))
+    .query(async ({ input }) => {
+      const conversation = await prisma.aiConversation.findFirst({
+        where: {
+          pipelineId: input.pipelineId,
+          componentKey: input.componentKey,
+        },
+        orderBy: { createdAt: "desc" },
+        include: {
+          messages: {
+            orderBy: { createdAt: "asc" },
+            include: {
+              createdBy: { select: { id: true, name: true, image: true } },
+            },
+          },
+        },
+      });
+      return conversation;
+    }),
+
+  markVrlSuggestionsApplied: protectedProcedure
+    .input(
+      z.object({
+        pipelineId: z.string(),
+        conversationId: z.string(),
+        messageId: z.string(),
+        suggestionIds: z.array(z.string()),
+      }),
+    )
+    .use(withTeamAccess("EDITOR"))
+    .use(withAudit("pipeline.vrl_ai_suggestion_applied", "Pipeline"))
+    .mutation(async ({ input, ctx }) => {
+      return prisma.$transaction(async (tx) => {
+        const message = await tx.aiMessage.findUnique({
+          where: { id: input.messageId },
+          include: {
+            conversation: { select: { pipelineId: true, componentKey: true } },
+          },
+        });
+
+        if (
+          !message ||
+          message.conversationId !== input.conversationId ||
+          message.conversation.pipelineId !== input.pipelineId
+        ) {
+          throw new TRPCError({ code: "NOT_FOUND", message: "Message not found in conversation" });
+        }
+
+        const suggestions = (message.suggestions as Array<Record<string, unknown>>) ?? [];
+        const updatedSuggestions = suggestions.map((s) =>
+          input.suggestionIds.includes(s.id as string)
+            ? { ...s, appliedAt: new Date().toISOString(), appliedById: ctx.session.user.id }
+            : s,
+        );
+
+        await tx.aiMessage.update({
+          where: { id: input.messageId },
+          data: { suggestions: updatedSuggestions as unknown as Prisma.InputJsonValue },
+        });
+
         return { applied: input.suggestionIds.length };
       });
     }),