diff --git a/agents.md b/agents.md
new file mode 100644
index 00000000..c5ab16c7
--- /dev/null
+++ b/agents.md
@@ -0,0 +1,34 @@
+# Studio Project - Agent Context
+
+## Overview
+
+Studio is a visual app builder for the Frappe Framework. It allows developers to build modern web applications using a drag & drop layout builder, wire Frappe Framework data sources, edit component props and slots, and create reactive apps with dynamic variables and scripts.
+
+## Agent Guidelines & Code Conventions
+
+1. **Guidelines for writing good code for a developer**
+   - Choose clean code over clever code.
+   - Write object oriented code as much as possible.
+   - Keep function sizes small, ideally 10 lines.
+   - Keep files small, between 100 and 300 lines
+   - Keep directories or module small, fewer than 15 files.
+   - Avoid abbreviations.
+   - Use standard API as much as possible.
+   - Reuse. Write as little code as possible.
+   - Build the minimum working code, then iterate towards your goals.
+   - Don't add unnecessary dependencies unless required.
+   - Don't add unnecessary comments for simple code. Use it only when the code is not self-explanatory.
+2. **Frontend Development:**
+   - Rely on `frappe-ui` components (e.g., buttons, dialogs, inputs) instead of building them from scratch (local copy in ./frappe-ui/)
+   - Use Tailwind CSS for styling. Avoid writing raw CSS (`.css` files or `<style>` blocks) unless absolutely necessary. Use espresso tokens for styling
+3. **Backend Development:**
+   - Adhere to standard Frappe Framework conventions (Controller classes, hooks, `@frappe.whitelist()` methods).
+   - Migrations and schema changes are handled via DocTypes.
+4. **State Management & Reactivity:**
+   - Use frappe-ui
+   - Use VueUse for common composition utilities.
+   - Use Pinia for global state if needed, though most component states can be managed locally.
+5. **Data Fetching**
+   - Use `createResource`, `createDocumentResource`, `createListResource`, `call` from frappe-ui for data fetching
+   - Look at ./frontend/src/data/ for examples of data fetching composables
+   - Handle loading, error, and success states explicitly
diff --git a/claude.md b/claude.md
new file mode 100644
index 00000000..c5ab16c7
--- /dev/null
+++ b/claude.md
@@ -0,0 +1,34 @@
+# Studio Project - Agent Context
+
+## Overview
+
+Studio is a visual app builder for the Frappe Framework. It allows developers to build modern web applications using a drag & drop layout builder, wire Frappe Framework data sources, edit component props and slots, and create reactive apps with dynamic variables and scripts.
+
+## Agent Guidelines & Code Conventions
+
+1. **Guidelines for writing good code for a developer**
+   - Choose clean code over clever code.
+   - Write object oriented code as much as possible.
+   - Keep function sizes small, ideally 10 lines.
+   - Keep files small, between 100 and 300 lines
+   - Keep directories or module small, fewer than 15 files.
+   - Avoid abbreviations.
+   - Use standard API as much as possible.
+   - Reuse. Write as little code as possible.
+   - Build the minimum working code, then iterate towards your goals.
+   - Don't add unnecessary dependencies unless required.
+   - Don't add unnecessary comments for simple code. Use it only when the code is not self-explanatory.
+2. **Frontend Development:**
+   - Rely on `frappe-ui` components (e.g., buttons, dialogs, inputs) instead of building them from scratch (local copy in ./frappe-ui/)
+   - Use Tailwind CSS for styling. Avoid writing raw CSS (`.css` files or `<style>` blocks) unless absolutely necessary. Use espresso tokens for styling
+3. **Backend Development:**
+   - Adhere to standard Frappe Framework conventions (Controller classes, hooks, `@frappe.whitelist()` methods).
+   - Migrations and schema changes are handled via DocTypes.
+4. **State Management & Reactivity:**
+   - Use frappe-ui
+   - Use VueUse for common composition utilities.
+   - Use Pinia for global state if needed, though most component states can be managed locally.
+5. **Data Fetching**
+   - Use `createResource`, `createDocumentResource`, `createListResource`, `call` from frappe-ui for data fetching
+   - Look at ./frontend/src/data/ for examples of data fetching composables
+   - Handle loading, error, and success states explicitly
diff --git a/frontend/components.d.ts b/frontend/components.d.ts
index 41120a03..c168c336 100644
--- a/frontend/components.d.ts
+++ b/frontend/components.d.ts
@@ -8,6 +8,7 @@ export {}
 /* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
+    AIChatPanel: typeof import('./src/components/AIChatPanel.vue')['default']
     AppComponent: typeof import('./src/components/AppComponent.vue')['default']
     AppDialog: typeof import('./src/components/AppDialog.vue')['default']
     AppHeader: typeof import('./src/components/AppLayout/AppHeader.vue')['default']
@@ -96,6 +97,7 @@ declare module 'vue' {
     StudioLeftPanel: typeof import('./src/components/StudioLeftPanel.vue')['default']
     StudioLogo: typeof import('./src/components/Icons/StudioLogo.vue')['default']
     StudioRightPanel: typeof import('./src/components/StudioRightPanel.vue')['default']
+    StudioSettingsDialog: typeof import('./src/components/StudioSettingsDialog.vue')['default']
     StudioToolbar: typeof import('./src/components/StudioToolbar.vue')['default']
     TextBlock: typeof import('./src/components/AppLayout/TextBlock.vue')['default']
   }
diff --git a/frontend/src/components/AIChatPanel.vue b/frontend/src/components/AIChatPanel.vue
new file mode 100644
index 00000000..66c1930e
--- /dev/null
+++ b/frontend/src/components/AIChatPanel.vue
@@ -0,0 +1,383 @@
+<template>
+	<div class="flex flex-1 flex-col overflow-hidden bg-surface-white">
+		<div
+			class="flex shrink-0 items-center justify-between border-b border-outline-gray-1 bg-surface-white px-3 py-2.5"
+		>
+			<div class="text-[11px] leading-4 text-ink-gray-5">Session persists for this page</div>
+			<button
+				v-if="messages.length"
+				class="text-xs text-ink-gray-4 hover:text-ink-gray-9"
+				@click="clearSession"
+			>
+				Clear
+			</button>
+		</div>
+
+		<div v-if="!isAIEnabled" class="flex flex-1 flex-col items-start gap-3 p-4">
+			<p class="text-p-xs text-ink-gray-6">
+				Configure an AI API key in Studio Settings to use the AI assistant.
+			</p>
+			<Button variant="subtle" label="Open Settings" @click="store.showStudioSettingsDialog = true" />
+		</div>
+
+		<div v-else ref="messagesEl" class="no-scrollbar flex-1 space-y-4 overflow-y-auto px-4 py-4">
+			<div
+				v-if="!messages.length"
+				class="flex h-full flex-col items-center justify-center gap-2 pb-8 text-center"
+			>
+				<FeatherIcon name="zap" class="h-8 w-8 text-ink-gray-3" />
+				<p class="text-xs text-ink-gray-4">Chat to create or edit this page</p>
+			</div>
+
+			<template v-for="msg in messages" :key="msg.id">
+				<div v-if="msg.role === 'user'" class="flex flex-col items-end">
+					<div
+						class="w-fit max-w-[88%] rounded-md border bg-surface-gray-1 px-3 py-2 text-p-xs text-ink-gray-8"
+					>
+						<div class="whitespace-pre-wrap break-words">{{ msg.content }}</div>
+					</div>
+				</div>
+				<div v-else class="flex flex-col items-start">
+					<div class="w-fit max-w-full text-p-xs text-ink-gray-8">
+						<div class="whitespace-pre-wrap break-words">{{ msg.content }}</div>
+					</div>
+				</div>
+			</template>
+
+			<p v-if="loading" class="text-xs text-ink-gray-5">
+				{{ statusMessage || "Generating…" }}
+			</p>
+		</div>
+
+		<div v-if="isAIEnabled" class="shrink-0 border-t border-outline-gray-1 bg-surface-white p-4">
+			<ErrorMessage v-if="error" :message="error" class="mb-2" />
+
+			<div v-if="isModifyMode" class="mb-2 flex items-center gap-1.5 rounded py-1">
+				<span class="truncate text-xs text-ink-gray-5">Editing:</span>
+				<Badge variant="subtle" size="sm">
+					{{ selectedBlock?.blockName || selectedBlock?.componentName }}
+				</Badge>
+			</div>
+
+			<div class="relative">
+				<textarea
+					v-model="prompt"
+					rows="4"
+					class="w-full resize-none rounded border border-[--surface-gray-2] bg-surface-gray-2 px-2 py-1.5 text-p-sm text-ink-gray-8 placeholder-ink-gray-4 transition-colors hover:border-[--outline-gray-modals] hover:bg-surface-gray-3 focus:border-outline-gray-4 focus:bg-surface-white focus:shadow-sm focus:ring-0 focus-visible:ring-2 focus-visible:ring-outline-gray-3 disabled:cursor-not-allowed disabled:bg-surface-gray-1 disabled:text-ink-gray-5"
+					:placeholder="
+						isModifyMode ? 'Describe what to change in this block...' : 'Chat to create or edit this page...'
+					"
+					:disabled="loading"
+					@keydown.meta.enter="generate"
+					@keydown.ctrl.enter="generate"
+				/>
+			</div>
+
+			<div class="mt-2 flex items-center justify-between gap-2">
+				<Popover placement="top-start" :offset="6">
+					<template #target="{ togglePopover }">
+						<button
+							class="flex h-7 max-w-[9rem] items-center gap-1.5 rounded px-1.5 text-ink-gray-5 transition-colors hover:bg-surface-gray-2 hover:text-ink-gray-8"
+							@click="togglePopover"
+						>
+							<FeatherIcon name="cpu" class="h-3.5 w-3.5 shrink-0" />
+							<span class="truncate text-xs">{{ modelLabel }}</span>
+						</button>
+					</template>
+					<template #body="{ close }">
+						<div class="min-w-40 rounded-lg border border-outline-gray-2 bg-surface-white py-1 shadow-lg">
+							<button
+								v-for="option in modelOptions"
+								:key="option.value"
+								class="flex w-full items-center px-3 py-1.5 text-left text-sm text-ink-gray-7 hover:bg-surface-gray-2"
+								:class="{ 'font-medium text-ink-gray-9': option.value === selectedModel }"
+								@click="
+									() => {
+										selectedModel = option.value
+										close()
+									}
+								"
+							>
+								{{ option.label }}
+							</button>
+						</div>
+					</template>
+				</Popover>
+
+				<Button
+					variant="solid"
+					:label="isModifyMode ? 'Edit' : 'Generate'"
+					icon="arrow-up"
+					:loading="loading"
+					:disabled="!prompt.trim()"
+					@click="generate"
+				/>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script lang="ts" setup>
+import { ref, computed, inject, watch, nextTick } from "vue"
+import { ErrorMessage, Button, Badge, FeatherIcon, call, createResource, Popover } from "frappe-ui"
+import { toast } from "vue-sonner"
+import useStudioStore from "@/stores/studioStore"
+import useCanvasStore from "@/stores/canvasStore"
+import { getBlockInstance, getBlockString } from "@/utils/serializer"
+import { tryParseJsonBlock } from "@/utils/blockCodec"
+import { throttle } from "@/utils/helpers"
+import type Block from "@/utils/block"
+import type { PauseId } from "@/utils/useCanvasHistory"
+import { studioSettings } from "@/data/studioSettings"
+
+const store = useStudioStore()
+const canvasStore = useCanvasStore()
+const socket = inject<any>("socket")
+
+const isAIEnabled = computed(() => !!studioSettings.doc?.ai_api_key)
+
+const prompt = ref("")
+const loading = ref(false)
+const error = ref("")
+const statusMessage = ref("")
+const selectedModel = ref("")
+const streamBuffer = ref("")
+const modifyStreamBuffer = ref("")
+let historyPauseId: PauseId | undefined
+const messages = ref<any[]>([])
+const messagesEl = ref<HTMLElement | null>(null)
+
+const pageId = computed(() => store.activePage?.name ?? "")
+
+const selectedBlock = computed(() => {
+	const block = canvasStore.activeCanvas?.selectedBlocks?.[0] ?? null
+	if (!block || block.isRoot()) return null
+	return block
+})
+
+const isModifyMode = computed(() => !!selectedBlock.value)
+
+const aiModels = createResource({
+	url: "studio.ai.models.get_ai_models",
+	auto: true,
+})
+
+const modelOptions = computed(() => (aiModels.data ?? []).map((m: any) => ({ label: m.label, value: m.id })))
+
+const modelLabel = computed(() => {
+	const selected = modelOptions.value.find((m: any) => m.value === selectedModel.value)
+	return selected ? selected.label : "Model"
+})
+
+const sessionResource = createResource({
+	url: "studio.ai.page_generator.get_ai_session",
+	onSuccess(data: any) {
+		messages.value = data.messages ?? []
+		if (data.selected_model) {
+			selectedModel.value = data.selected_model
+		} else if (modelOptions.value.length) {
+			selectedModel.value = modelOptions.value[0].value
+		}
+		scrollToBottom()
+	},
+})
+
+function scrollToBottom() {
+	nextTick(() => {
+		if (messagesEl.value) {
+			messagesEl.value.scrollTo({
+				top: messagesEl.value.scrollHeight,
+				behavior: "smooth",
+			})
+		}
+	})
+}
+
+function reloadSession() {
+	if (pageId.value) {
+		sessionResource.submit({ page_id: pageId.value })
+	}
+}
+
+function onProgress(data: any) {
+	statusMessage.value = data.message || "Generating…"
+}
+
+function onStream(data: any) {
+	canvasStore.isAIStreaming = true
+	streamBuffer.value += data.chunk || ""
+	renderStreamedBlock()
+}
+
+const renderStreamedBlock = throttle(() => {
+	const block = tryParseJsonBlock(streamBuffer.value)
+	if (block) {
+		const rootBlock = getBlockInstance(block)
+		store.pageBlocks = [rootBlock]
+		canvasStore.activeCanvas?.setRootBlock(rootBlock, false)
+	}
+}, 250)
+
+async function onComplete(data: any) {
+	canvasStore.isAIStreaming = false
+	loading.value = false
+	statusMessage.value = ""
+	streamBuffer.value = ""
+
+	const block: Block = data.block
+	if (!block) {
+		error.value = "No block was generated. Try a more descriptive prompt."
+		return
+	}
+
+	const rootBlock = getBlockInstance(block)
+	store.pageBlocks = [rootBlock]
+	canvasStore.activeCanvas?.setRootBlock(rootBlock, false)
+	historyPauseId = undefined
+
+	toast.success("Page generated successfully")
+	prompt.value = ""
+	reloadSession()
+}
+
+function onError(data: any) {
+	canvasStore.isAIStreaming = false
+	canvasStore.activeCanvas?.history?.resume(historyPauseId)
+	historyPauseId = undefined
+	loading.value = false
+	statusMessage.value = ""
+	streamBuffer.value = ""
+	error.value = data.message || "Generation failed. Please check your Studio Settings and try again."
+}
+
+function onModifyProgress(data: any) {
+	statusMessage.value = data.message || "Updating…"
+}
+
+function onModifyStream(data: any) {
+	canvasStore.isAIStreaming = true
+	modifyStreamBuffer.value += data.chunk || ""
+	const block = tryParseJsonBlock(modifyStreamBuffer.value)
+	if (block) {
+		replaceBlockInTree(data.component_id, getBlockInstance(block))
+	}
+}
+
+async function onModifyComplete(data: any) {
+	canvasStore.isAIStreaming = false
+	loading.value = false
+	statusMessage.value = ""
+	modifyStreamBuffer.value = ""
+
+	const block: Block = data.block
+	if (!block) {
+		error.value = "No block was returned. Try a more specific request."
+		return
+	}
+
+	replaceBlockInTree(data.component_id, getBlockInstance(block))
+	canvasStore.activeCanvas?.history?.resume(historyPauseId, true)
+	historyPauseId = undefined
+	toast.success("Block updated")
+	prompt.value = ""
+	reloadSession()
+}
+
+function onModifyError(data: any) {
+	canvasStore.isAIStreaming = false
+	canvasStore.activeCanvas?.history?.resume(historyPauseId)
+	historyPauseId = undefined
+	loading.value = false
+	statusMessage.value = ""
+	modifyStreamBuffer.value = ""
+	error.value = data.message || "Update failed. Please try again."
+}
+
+function replaceBlockInTree(componentId: string, newBlock: Block) {
+	const canvas = canvasStore.activeCanvas
+	if (!canvas) return
+	const oldBlock = canvas.findBlock(componentId)
+	if (!oldBlock) return
+	const parent = oldBlock.getParentBlock()
+	if (!parent) return
+	parent.replaceChild(oldBlock, newBlock)
+}
+
+function setupListeners() {
+	if (!socket || !pageId.value) return
+	const id = pageId.value
+	socket.on(`ai_generation_progress_${id}`, onProgress)
+	socket.on(`ai_generation_stream_${id}`, onStream)
+	socket.on(`ai_generation_complete_${id}`, onComplete)
+	socket.on(`ai_generation_error_${id}`, onError)
+	socket.on(`ai_modify_progress_${id}`, onModifyProgress)
+	socket.on(`ai_modify_stream_${id}`, onModifyStream)
+	socket.on(`ai_modify_complete_${id}`, onModifyComplete)
+	socket.on(`ai_modify_error_${id}`, onModifyError)
+}
+
+function detachListeners() {
+	if (!socket || !pageId.value) return
+	const id = pageId.value
+	socket.off(`ai_generation_progress_${id}`, onProgress)
+	socket.off(`ai_generation_stream_${id}`, onStream)
+	socket.off(`ai_generation_complete_${id}`, onComplete)
+	socket.off(`ai_generation_error_${id}`, onError)
+	socket.off(`ai_modify_progress_${id}`, onModifyProgress)
+	socket.off(`ai_modify_stream_${id}`, onModifyStream)
+	socket.off(`ai_modify_complete_${id}`, onModifyComplete)
+	socket.off(`ai_modify_error_${id}`, onModifyError)
+}
+
+watch(
+	() => pageId.value,
+	(newId, oldId) => {
+		if (oldId) detachListeners()
+		if (newId) {
+			setupListeners()
+			sessionResource.submit({ page_id: newId })
+		}
+	},
+	{ immediate: true },
+)
+
+async function generate() {
+	if (!prompt.value.trim()) return
+	loading.value = true
+	error.value = ""
+	statusMessage.value = ""
+
+	messages.value = [...messages.value, { id: Date.now(), role: "user", content: prompt.value }]
+	scrollToBottom()
+
+	historyPauseId = canvasStore.activeCanvas?.history?.pause()
+	try {
+		if (isModifyMode.value && selectedBlock.value) {
+			await call("studio.ai.page_generator.modify_block_from_prompt", {
+				prompt: prompt.value,
+				block_context: getBlockString(selectedBlock.value),
+				model: selectedModel.value,
+				page_id: pageId.value,
+				component_id: selectedBlock.value.componentId,
+			})
+		} else {
+			await call("studio.ai.page_generator.generate_page_from_prompt", {
+				prompt: prompt.value,
+				model: selectedModel.value,
+				page_id: pageId.value,
+			})
+		}
+	} catch (e: any) {
+		canvasStore.activeCanvas?.history?.resume(historyPauseId)
+		historyPauseId = undefined
+		loading.value = false
+		statusMessage.value = ""
+		error.value = e?.message || "Failed to start. Please try again."
+	}
+}
+
+async function clearSession() {
+	await call("studio.ai.page_generator.clear_ai_session", { page_id: pageId.value })
+	messages.value = []
+}
+</script>
diff --git a/frontend/src/components/ComponentStyles.vue b/frontend/src/components/ComponentStyles.vue
index 35e63d17..405eff12 100644
--- a/frontend/src/components/ComponentStyles.vue
+++ b/frontend/src/components/ComponentStyles.vue
@@ -538,19 +538,34 @@ const styleSectionProperties = [
 		getProps: () => {
 			return {
 				label: "BG Color",
-				modelValue: blockController.getStyle("background"),
+				modelValue: blockController.getStyle("backgroundColor"),
 				property: "backgroundColor",
 			}
 		},
 		searchKeyWords: "Background, BackgroundColor, Background Color, BG, BGColor, BG Color",
 		events: {
-			"update:modelValue": (val: StyleValue) => blockController.setStyle("background", val),
+			"update:modelValue": (val: StyleValue) => blockController.setStyle("backgroundColor", val),
 		},
 		allowDynamicValue: true,
 		getValue: () => {
-			return blockController.getStyle("background")
+			return blockController.getStyle("backgroundColor")
 		},
 	},
+	{
+		component: ColorInput,
+		getProps: () => {
+			return {
+				label: "Text Color",
+				modelValue: blockController.getStyle("color"),
+				property: "textColor",
+			}
+		},
+		events: {
+			"update:modelValue": (val: StyleValue) => blockController.setStyle("color", val),
+		},
+		allowDynamicValue: true,
+		searchKeyWords: "Text, Color, TextColor, Text Color",
+	},
 	{
 		component: ColorInput,
 		getProps: () => {
@@ -580,21 +595,6 @@ const styleSectionProperties = [
 			return blockController.getStyle("borderColor")
 		},
 	},
-	{
-		component: ColorInput,
-		getProps: () => {
-			return {
-				label: "Text Color",
-				modelValue: blockController.getStyle("color"),
-				property: "textColor",
-			}
-		},
-		events: {
-			"update:modelValue": (val: StyleValue) => blockController.setStyle("color", val),
-		},
-		allowDynamicValue: true,
-		searchKeyWords: "Text, Color, TextColor, Text Color",
-	},
 	{
 		component: InlineInput,
 		getProps: () => {
diff --git a/frontend/src/components/PagesPanel.vue b/frontend/src/components/PagesPanel.vue
index 4d817d18..a4db2e88 100644
--- a/frontend/src/components/PagesPanel.vue
+++ b/frontend/src/components/PagesPanel.vue
@@ -1,6 +1,6 @@
 <template>
-	<div class="flex h-full flex-col">
-		<div class="flex flex-col space-y-1">
+	<div class="flex h-full flex-col overflow-hidden">
+		<div class="flex flex-col space-y-1 overflow-y-auto hide-scrollbar">
 			<div class="w-full" v-for="page in store.appPages" :key="page.name">
 				<div
 					@click="openPage(page)"
@@ -43,12 +43,14 @@
 			</div>
 		</div>
 
-		<router-link
-			v-if="store.activeApp"
-			:to="{ name: 'StudioPage', params: { appID: store.activeApp?.name, pageID: 'new' } }"
-		>
-			<Button icon-left="plus" class="mt-5 w-full">New Page</Button>
-		</router-link>
+		<div class="mt-4 flex-shrink-0">
+			<router-link
+				v-if="store.activeApp"
+				:to="{ name: 'StudioPage', params: { appID: store.activeApp?.name, pageID: 'new' } }"
+			>
+				<Button icon-left="plus" class="w-full">New Page</Button>
+			</router-link>
+		</div>
 	</div>
 </template>
 
diff --git a/frontend/src/components/StudioCanvas.vue b/frontend/src/components/StudioCanvas.vue
index 492cf812..6a09b5a7 100644
--- a/frontend/src/components/StudioCanvas.vue
+++ b/frontend/src/components/StudioCanvas.vue
@@ -18,7 +18,6 @@
 
 		<div
 			class="fixed flex gap-40"
-			:class="canvasStore.editingMode === 'page' ? 'h-full' : ''"
 			ref="canvas"
 			:style="{
 				transformOrigin: 'top center',
@@ -44,7 +43,8 @@
 				</div>
 			</div>
 			<div
-				class="canvas relative flex h-full bg-surface-white shadow-2xl contain-layout"
+				class="canvas relative flex bg-surface-white shadow-2xl contain-layout"
+				:class="canvasStore.editingMode === 'page' ? 'min-h-[100dvh]' : ''"
 				:style="{
 					...canvasStyles,
 					background: canvasProps.background,
@@ -225,10 +225,6 @@ function selectBlock(block: Block, e: MouseEvent | null, multiSelect = false, se
 		setActiveBreakpoint(breakpoint)
 	}
 
-	if (block.isContainer()) {
-		store.studioLayout.leftPanelActiveTab = "Layers"
-	}
-
 	if (block.isText() || block.isContainer()) {
 		// combined props and styles
 		store.studioLayout.rightPanelActiveTab = "Styles"
diff --git a/frontend/src/components/StudioComponent.vue b/frontend/src/components/StudioComponent.vue
index 724beed4..dcd79c3d 100644
--- a/frontend/src/components/StudioComponent.vue
+++ b/frontend/src/components/StudioComponent.vue
@@ -348,7 +348,8 @@ watch(
 const error = ref<Error | null>(null)
 onErrorCaptured((err, _instance, info) => {
 	const isRouterError = err.message.includes("No match for")
-	if (isRouterError) {
+	if (isRouterError || canvasStore.isAIStreaming) {
+		error.value = null
 		return false
 	}
 	console.error(
diff --git a/frontend/src/components/StudioLeftPanel.vue b/frontend/src/components/StudioLeftPanel.vue
index 008e7255..3d7d60ec 100644
--- a/frontend/src/components/StudioLeftPanel.vue
+++ b/frontend/src/components/StudioLeftPanel.vue
@@ -30,7 +30,7 @@
 			<div
 				v-show="store.studioLayout.showLeftPanel"
 				:style="{ width: `${store.studioLayout.leftPanelWidth - 48}px` }"
-				class="overflow-auto border-r-[1px] pb-5 hide-scrollbar"
+				class="flex flex-col overflow-auto border-r-[1px] hide-scrollbar"
 			>
 				<PanelResizer
 					:dimension="store.studioLayout.leftPanelWidth"
@@ -39,7 +39,7 @@
 					@resize="(width) => (store.studioLayout.leftPanelWidth = width)"
 				/>
 				<div
-					class="sticky top-0 z-[12] flex justify-between border-b-[1px] border-gray-200 bg-white p-3 text-base font-semibold text-gray-800"
+					class="sticky left-0 top-0 z-[12] flex w-full shrink-0 justify-between border-b-[1px] border-gray-200 bg-white p-3 text-base font-semibold text-gray-800"
 				>
 					{{ activeTab }}
 					<IconButton
@@ -63,8 +63,15 @@
 				<DataPanel v-show="activeTab === 'Data'" />
 
 				<div v-show="activeTab === 'Code'">
-					<CodePanel class="p-4" v-if="store.activePage" :page="store.activePage" :key="store.selectedPage" />
+					<CodePanel
+						class="p-4"
+						v-if="store.activePage"
+						:page="store.activePage"
+						:key="store.selectedPage ?? undefined"
+					/>
 				</div>
+
+				<AIChatPanel v-show="activeTab === 'AI Assistant'" />
 			</div>
 		</transition>
 	</div>
@@ -81,6 +88,7 @@ import ComponentLayers from "@/components/ComponentLayers.vue"
 import DataPanel from "@/components/DataPanel.vue"
 import CodePanel from "@/components/CodePanel.vue"
 import IconButton from "@/components/IconButton.vue"
+import AIChatPanel from "@/components/AIChatPanel.vue"
 
 import Block from "@/utils/block"
 import useStudioStore from "@/stores/studioStore"
@@ -108,6 +116,10 @@ const sidebarMenu = [
 		label: "Code",
 		icon: "code",
 	},
+	{
+		label: "AI Assistant",
+		icon: "zap",
+	},
 ]
 const store = useStudioStore()
 const canvasStore = useCanvasStore()
diff --git a/frontend/src/components/StudioSettingsDialog.vue b/frontend/src/components/StudioSettingsDialog.vue
new file mode 100644
index 00000000..daad140b
--- /dev/null
+++ b/frontend/src/components/StudioSettingsDialog.vue
@@ -0,0 +1,87 @@
+<template>
+	<Dialog v-model="showDialog" :options="{ title: 'Studio Settings', size: 'lg' }" @after-leave="reset">
+		<template #body-content>
+			<div class="flex flex-col gap-3">
+				<FormControl
+					label="OpenRouter API Key"
+					type="password"
+					variant="outline"
+					v-model="apiKey"
+					placeholder="sk-or-..."
+				>
+					<template #description>
+						<p class="text-xs leading-normal text-ink-gray-5">
+							Get API key from
+							<a
+								href="https://openrouter.ai/keys"
+								target="_blank"
+								rel="noopener noreferrer"
+								class="underline"
+							>
+								openrouter.ai/keys
+							</a>
+							— supports Claude, Gemini, GPT and more under one key.
+						</p>
+					</template>
+				</FormControl>
+			</div>
+		</template>
+
+		<template #actions>
+			<div class="space-y-1">
+				<ErrorMessage class="mb-2" :message="error" />
+				<Button variant="solid" label="Save" @click="save" class="w-full" :loading="saving" />
+			</div>
+		</template>
+	</Dialog>
+</template>
+
+<script lang="ts" setup>
+import { ref, watch } from "vue"
+import { Dialog, FormControl, ErrorMessage } from "frappe-ui"
+import { toast } from "vue-sonner"
+import { studioSettings } from "@/data/studioSettings"
+
+const showDialog = defineModel("showDialog", { type: Boolean, required: true })
+
+const apiKey = ref("")
+const error = ref("")
+const saving = ref(false)
+
+watch(
+	() => showDialog.value,
+	async (open) => {
+		if (!open) return
+		if (!studioSettings.doc) {
+			await studioSettings.reload()
+		}
+		apiKey.value = studioSettings.doc?.ai_api_key || ""
+		error.value = ""
+	},
+	{ immediate: true },
+)
+
+function reset() {
+	apiKey.value = ""
+	error.value = ""
+}
+
+function save() {
+	saving.value = true
+	error.value = ""
+	studioSettings.setValue
+		.submit({
+			ai_api_key: apiKey.value,
+		})
+		.then(() => {
+			showDialog.value = false
+			toast.success("Studio Settings saved")
+		})
+		.catch((e: any) => {
+			error.value = e?.message || "Failed to save settings"
+		})
+		.finally(() => {
+			saving.value = false
+		})
+}
+</script>
diff --git a/frontend/src/components/StudioToolbar.vue b/frontend/src/components/StudioToolbar.vue
index 3461f2c0..2084da54 100644
--- a/frontend/src/components/StudioToolbar.vue
+++ b/frontend/src/components/StudioToolbar.vue
@@ -18,6 +18,11 @@
 								icon: 'settings',
 								onClick: () => (showAppDialog = true),
 							},
+							{
+								label: 'Studio Settings',
+								icon: 'sliders',
+								onClick: () => (store.showStudioSettingsDialog = true),
+							},
 							{
 								label: 'Delete App',
 								icon: 'trash-2',
@@ -127,8 +132,9 @@
 		<AppDialog
 			v-model:showDialog="showAppDialog"
 			:app="store.activeApp"
-			@update="(app) => store.setApp(app.name)"
+			@update="(app: StudioApp) => store.setApp(app.name)"
 		/>
+		<StudioSettingsDialog v-model:showDialog="store.showStudioSettingsDialog" />
 	</div>
 </template>
 
@@ -142,11 +148,13 @@ import PageOptions from "@/components/PageOptions.vue"
 import StudioLogo from "@/components/Icons/StudioLogo.vue"
 import ExportAppDialog from "@/components/ExportAppDialog.vue"
 import PublishButton from "@/components/PublishButton.vue"
+import StudioSettingsDialog from "@/components/StudioSettingsDialog.vue"
 
 import type { StudioMode } from "@/types"
 import session from "@/utils/session"
 import LucideArrowUpFromLine from "~icons/lucide/arrow-up-from-line"
 import { isObjectEmpty, openInDesk } from "@/utils/helpers"
+import { StudioApp } from "@/types/Studio/StudioApp"
 
 const store = useStudioStore()
 const canvasStore = useCanvasStore()
diff --git a/frontend/src/data/components.ts b/frontend/src/data/components.ts
index b06fe5d0..5c24a7ef 100644
--- a/frontend/src/data/components.ts
+++ b/frontend/src/data/components.ts
@@ -9,7 +9,6 @@ import LucideUser from "~icons/lucide/user"
 import LucideChevronsRight from "~icons/lucide/chevrons-right"
 import LucideBadgeCheck from "~icons/lucide/badge-check"
 import LucideRectangleHorizontal from "~icons/lucide/rectangle-horizontal"
-import LucideIdCard from "~icons/lucide/id-card"
 import LucideCircleCheck from "~icons/lucide/circle-check"
 import LucideCalendar from "~icons/lucide/calendar"
 import LucideClock from "~icons/lucide/clock"
@@ -158,15 +157,6 @@ export const COMPONENTS: FrappeUIComponents = {
 			variant: "solid",
 		},
 	},
-	Card: {
-		name: "Card",
-		title: "Card",
-		icon: LucideIdCard,
-		initialState: {
-			title: "John Doe",
-			subtitle: "Engineering Lead",
-		},
-	},
 	Checkbox: {
 		name: "Checkbox",
 		title: "Checkbox",
diff --git a/frontend/src/data/studioSettings.ts b/frontend/src/data/studioSettings.ts
new file mode 100644
index 00000000..bd343f1e
--- /dev/null
+++ b/frontend/src/data/studioSettings.ts
@@ -0,0 +1,7 @@
+import { createDocumentResource } from "frappe-ui"
+
+export const studioSettings = createDocumentResource({
+	doctype: "Studio Settings",
+	name: "Studio Settings",
+	auto: true,
+})
diff --git a/frontend/src/globals.ts b/frontend/src/globals.ts
index 8580e1b5..089900d0 100644
--- a/frontend/src/globals.ts
+++ b/frontend/src/globals.ts
@@ -6,7 +6,6 @@ import {
 	Badge,
 	Breadcrumbs,
 	Button,
-	Card,
 	Checkbox,
 	Combobox,
 	DatePicker,
@@ -75,7 +74,6 @@ export function registerGlobalComponents(app: App) {
 	app.component("Badge", Badge)
 	app.component("Breadcrumbs", Breadcrumbs)
 	app.component("Button", Button)
-	app.component("Card", Card)
 	app.component("Checkbox", Checkbox)
 	app.component("Combobox", Combobox)
 	app.component("DatePicker", DatePicker)
diff --git a/frontend/src/main.ts b/frontend/src/main.ts
index 0a7f4e2d..62262b81 100644
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@@ -13,6 +13,7 @@ import { registerGlobalComponents } from "./globals"
 import { COMPONENTS } from "@/data/components"
 import Block from "@/utils/block"
 import "@/utils/appUtilsRenderer"
+import { initSocket } from "@/socket"
 
 Block.setComponents(COMPONENTS)
 
@@ -40,6 +41,7 @@ if (window.is_developer_mode && typeof window.is_developer_mode === "string") {
 	window.is_developer_mode = window.is_developer_mode === "1" || window.is_developer_mode === "True"
 }
 
+let socket
 studio_router.isReady().then(async () => {
 	if (import.meta.env.DEV) {
 		await frappeRequest({
@@ -48,8 +50,14 @@ studio_router.isReady().then(async () => {
 			for (let key in values) {
 				window[key] = values[key]
 			}
+			socket = initSocket()
+			studio.provide("socket", socket)
+			studio.mount("#studio")
 		})
+	} else {
+		socket = initSocket()
+		studio.provide("socket", socket)
+		studio.mount("#studio")
 	}
 
-	studio.mount("#studio")
 })
\ No newline at end of file
diff --git a/frontend/src/pages/StudioPage.vue b/frontend/src/pages/StudioPage.vue
index 75199d78..5d8a4622 100644
--- a/frontend/src/pages/StudioPage.vue
+++ b/frontend/src/pages/StudioPage.vue
@@ -212,7 +212,8 @@ watch(
 			store.selectedPage &&
 			!pageCanvas.value?.canvasProps?.settingCanvas &&
 			!store.settingPage &&
-			!store.savingPage
+			!store.savingPage &&
+			!canvasStore.isAIStreaming
 		) {
 			store.savingPage = true
 			if (canvasStore.editingMode === "page") {
diff --git a/frontend/src/socket.js b/frontend/src/socket.js
new file mode 100644
index 00000000..863f8763
--- /dev/null
+++ b/frontend/src/socket.js
@@ -0,0 +1,21 @@
+import { io } from "socket.io-client"
+import { socketio_port } from "../../../../sites/common_site_config.json"
+
+let socket = null
+export function initSocket() {
+	let host = window.location.hostname
+	let siteName = import.meta.env.DEV ? host : window.site_name
+	let port = window.location.port ? `:${socketio_port}` : ""
+	let protocol = port ? "http" : "https"
+	let url = `${protocol}://${host}${port}/${siteName}`
+
+	socket = io(url, {
+		withCredentials: true,
+		reconnectionAttempts: 5,
+	})
+	return socket
+}
+
+export function useSocket() {
+	return socket
+}
diff --git a/frontend/src/stores/canvasStore.ts b/frontend/src/stores/canvasStore.ts
index 213ce137..5ee838c9 100644
--- a/frontend/src/stores/canvasStore.ts
+++ b/frontend/src/stores/canvasStore.ts
@@ -45,6 +45,8 @@ const useCanvasStore = defineStore("canvasStore", () => {
 		})
 	}
 
+	const isAIStreaming = ref(false)
+
 	// drag & drop
 	const isDragging = ref(false)
 	const layerDraggingOverBlock = ref<string | null>(null)
@@ -183,6 +185,8 @@ const useCanvasStore = defineStore("canvasStore", () => {
 		showCodeDialog,
 		editCode,
 		editableCode,
+		// ai streaming
+		isAIStreaming,
 		// drag & drop
 		dropTarget,
 		isDragging,
diff --git a/frontend/src/stores/studioStore.ts b/frontend/src/stores/studioStore.ts
index 60739db0..7a9e5156 100644
--- a/frontend/src/stores/studioStore.ts
+++ b/frontend/src/stores/studioStore.ts
@@ -44,6 +44,7 @@ const useStudioStore = defineStore("store", () => {
 	// dialogs
 	const showSlotEditorDialog = ref(false)
 	const showSearchBlock = ref(false)
+	const showStudioSettingsDialog = ref(false)
 
 	// studio apps
 	const activeApp = ref<StudioApp | null>(null)
@@ -460,6 +461,7 @@ const useStudioStore = defineStore("store", () => {
 		// dialogs
 		showSlotEditorDialog,
 		showSearchBlock,
+		showStudioSettingsDialog,
 		// studio app
 		activeApp,
 		setApp,
diff --git a/frontend/src/types/index.ts b/frontend/src/types/index.ts
index d2e6e133..dd1f511b 100644
--- a/frontend/src/types/index.ts
+++ b/frontend/src/types/index.ts
@@ -23,7 +23,7 @@ export interface BlockOptions {
 	rawStyles?: BlockStyleMap
 	mobileStyles?: BlockStyleMap
 	tabletStyles?: BlockStyleMap
-	blockName?: string
+	blockName?: string // optional user-friendly name for the block
 	parentBlock?: Block | null
 	classes?: string[]
 	parentSlotName?: string // for top-level blocks inside a slot
@@ -149,7 +149,7 @@ export type Filter = {
 	field: DocTypeField
 }
 
-export type LeftPanelOptions = "Pages" | "Add Component" | "Layers" | "Data" | "Code"
+export type LeftPanelOptions = "Pages" | "Add Component" | "Layers" | "Data" | "Code" | "AI Assistant"
 export type RightPanelOptions = "Properties" | "Styles" | "Events" | "Interface"
 export type leftPanelComponentTabOptions = "Standard" | "Custom"
 
diff --git a/frontend/src/utils/blockCodec.ts b/frontend/src/utils/blockCodec.ts
new file mode 100644
index 00000000..13527170
--- /dev/null
+++ b/frontend/src/utils/blockCodec.ts
@@ -0,0 +1,170 @@
+import { BlockOptions } from "@/types"
+
+/**
+ * Expand a compact node (name/style/c/props...) into Studio block format
+ * (componentName/baseStyles/children/componentProps...).
+ * Mirrors BlockCodec.expand() in studio/ai/block_codec.py.
+ */
+export function expandBlock(node: Record<string, any>): BlockOptions {
+	const block: BlockOptions = {
+		componentName: node.name ?? "container",
+		baseStyles: node.style ?? {},
+		rawStyles: node.rstyle ?? {},
+		componentProps: node.props ?? {},
+		componentSlots: node.slots ?? {},
+		mobileStyles: node.mstyle ?? {},
+		tabletStyles: node.tstyle ?? {},
+		children: Array.isArray(node.c) ? node.c.map(expandBlock) : [],
+	}
+
+	if (node.id) block.componentId = node.id
+	if (node.originalElement) block.originalElement = node.originalElement
+	if (node.label) block.blockName = node.label
+
+	return block
+}
+
+/**
+ * Try to parse a partial JSON stream buffer into a Studio block.
+ * The buffer is usually incomplete mid-stream (unclosed strings/brackets), so we
+ * best-effort repair it: close the open string, drop dangling trailing tokens, and
+ * close open brackets. If that still fails we trim back one member and retry.
+ */
+export function tryParseJsonBlock(buffer: string): BlockOptions | null {
+	const text = stripFences(buffer)
+	if (!text) return null
+	let parsed = parsePartialJson(text)
+	if (Array.isArray(parsed)) parsed = parsed[0]
+	if (!parsed || typeof parsed !== "object" || !("name" in parsed)) return null
+	return expandBlock(parsed as Record<string, any>)
+}
+
+function stripFences(text: string): string {
+	return text
+		.trim()
+		.replace(/^```(?:json|yaml)?\s*/i, "")
+		.replace(/```\s*$/i, "")
+		.trim()
+}
+
+function parsePartialJson(text: string): any {
+	try {
+		return JSON.parse(text)
+	} catch {
+		// fall through to repair
+	}
+
+	let working = escapeInnerQuotes(text)
+	for (let attempt = 0; attempt < 8; attempt++) {
+		const { candidate, trimmed } = repair(working)
+		if (candidate) {
+			try {
+				return JSON.parse(candidate)
+			} catch {
+				// candidate didn't parse; retry on the trimmed buffer
+			}
+		}
+		if (!trimmed || trimmed === working) return null
+		working = trimmed
+	}
+	return null
+}
+
+
+/**
+ * Escape stray double-quotes inside string values. A `"` only legitimately ends a
+ * string when the next non-space char is structural (`,` `}` `]` `:` or EOF);
+ * otherwise it's unescaped content (e.g. He said "hi") and we escape it.
+ */
+function escapeInnerQuotes(text: string): string {
+	let out = ""
+	let inString = false
+	for (let i = 0; i < text.length; i++) {
+		const ch = text[i]
+		if (!inString) {
+			out += ch
+			if (ch === '"') inString = true
+			continue
+		}
+		if (ch === "\\") {
+			out += ch + (text[i + 1] ?? "")
+			i++
+			continue
+		}
+		if (ch === '"') {
+			let j = i + 1
+			while (j < text.length && /\s/.test(text[j])) j++
+			const next = j < text.length ? text[j] : ""
+			if (next === "" || ",}]:".includes(next)) {
+				out += ch
+				inString = false
+			} else {
+				out += '\\"'
+			}
+			continue
+		}
+		out += ch
+	}
+	return out
+}
+
+interface Repair {
+	candidate: string // best guess at a complete, parseable JSON string
+	trimmed: string // text with its last (incomplete) member removed, for retry
+}
+
+/**
+ * Scan `text` once, then produce:
+ *  - candidate: text with the open string closed, trailing comma/dangling key
+ *    dropped, and all open brackets closed.
+ *  - trimmed: text cut back to the last structural boundary (a top-of-container
+ *    `,`, `{` or `[`), so a failed candidate can be retried minus one member.
+ */
+function repair(text: string): Repair {
+	const closers: string[] = []
+	let inString = false
+	let escaped = false
+	let lastBoundary = -1
+
+	for (let i = 0; i < text.length; i++) {
+		const ch = text[i]
+		if (inString) {
+			if (escaped) escaped = false
+			else if (ch === "\\") escaped = true
+			else if (ch === '"') inString = false
+			continue
+		}
+		if (ch === '"') inString = true
+		else if (ch === "{") {
+			closers.push("}")
+			lastBoundary = i
+		} else if (ch === "[") {
+			closers.push("]")
+			lastBoundary = i
+		} else if (ch === "}" || ch === "]") closers.pop()
+		else if (ch === ",") lastBoundary = i
+	}
+
+	let candidate = inString ? text + '"' : text
+	let prev = ""
+	while (candidate !== prev) {
+		prev = candidate
+		candidate = candidate.replace(/\s+$/, "")
+		if (candidate.endsWith(",")) {
+			candidate = candidate.slice(0, -1)
+		} else {
+			// dangling `"key":` with no value yet
+			const dangling = candidate.match(/,?\s*"(?:[^"\\]|\\.)*"\s*:$/)
+			if (dangling) candidate = candidate.slice(0, candidate.length - dangling[0].length)
+		}
+	}
+	for (let i = closers.length - 1; i >= 0; i--) candidate += closers[i]
+
+	let trimmed = ""
+	if (lastBoundary >= 0) {
+		// keep an opening bracket (empty container is valid); drop a trailing comma
+		trimmed = text[lastBoundary] === "," ? text.slice(0, lastBoundary) : text.slice(0, lastBoundary + 1)
+	}
+
+	return { candidate, trimmed }
+}
diff --git a/frontend/src/utils/constants.js b/frontend/src/utils/constants.js
index ed76ffa6..50e28603 100644
--- a/frontend/src/utils/constants.js
+++ b/frontend/src/utils/constants.js
@@ -5,7 +5,6 @@ export const FRAPPE_UI_COMPONENTS = [
 	"Badge",
 	"Button",
 	"Breadcrumbs",
-	"Card",
 	"Checkbox",
 	"Calendar",
 	"Combobox",
diff --git a/frontend/src/utils/useCanvasHistory.ts b/frontend/src/utils/useCanvasHistory.ts
index b2336180..c5a95793 100644
--- a/frontend/src/utils/useCanvasHistory.ts
+++ b/frontend/src/utils/useCanvasHistory.ts
@@ -8,7 +8,7 @@ type CanvasState = {
 	block: string;
 	selectedBlockIds: Set<string>;
 };
-type PauseId = string & { __brand: "PauseId" };
+export type PauseId = string & { __brand: "PauseId" };
 
 const CAPACITY = 500;
 const DEBOUNCE_DELAY = 100;
diff --git a/frontend/src/utils/useCanvasUtils.ts b/frontend/src/utils/useCanvasUtils.ts
index 71f7c19c..396f7b90 100644
--- a/frontend/src/utils/useCanvasUtils.ts
+++ b/frontend/src/utils/useCanvasUtils.ts
@@ -2,7 +2,7 @@ import type { CanvasProps } from "@/types/StudioCanvas"
 import Block from "@/utils/block"
 
 import { nextTick, reactive, Ref } from "vue"
-import { useCanvasHistory } from "@/utils/useCanvasHistory"
+import { useCanvasHistory, type PauseId } from "@/utils/useCanvasHistory"
 import { useElementBounding } from "@vueuse/core"
 import { toast } from "vue-sonner"
 import useCanvasStore from "@/stores/canvasStore"
@@ -57,9 +57,9 @@ export function useCanvasUtils(
 		return rootComponent.value;
 	}
 
-	function setRootBlock(newBlock: Block, resetCanvas = false) {
+	function setRootBlock(newBlock: Block, resetCanvas = false, resetHistory = true) {
 		rootComponent.value = newBlock
-		if (canvasHistory.value) {
+		if (canvasHistory.value && resetHistory) {
 			canvasHistory.value.dispose();
 			setupHistory();
 		}
diff --git a/pyproject.toml b/pyproject.toml
index 49e33d6b..b8fa6d4c 100644
--- a/pyproject.toml
+++ b/pyproject.toml
@@ -9,6 +9,8 @@ readme = "README.md"
 dynamic = ["version"]
 dependencies = [
     # "frappe~=15.0.0" # Installed and managed by bench.
+    "litellm==1.83.7",
+    "json_repair>=0.59.10",
 ]
 
 [build-system]
diff --git a/studio/ai/block_codec.py b/studio/ai/block_codec.py
new file mode 100644
index 00000000..614f77f2
--- /dev/null
+++ b/studio/ai/block_codec.py
@@ -0,0 +1,127 @@
+import json
+import re
+
+from json_repair import repair_json
+
+
+class BlockCodec:
+	@staticmethod
+	def compress(block: dict, depth: int = 0) -> dict:
+		if not isinstance(block, dict):
+			return block
+
+		out = {}
+
+		if cid := block.get("componentId"):
+			out["id"] = cid
+		if name := block.get("componentName"):
+			out["name"] = name
+		if orig := block.get("originalElement"):
+			out["originalElement"] = orig
+		if block.get("blockName"):
+			out["label"] = block["blockName"]
+
+		props = {k: v for k, v in (block.get("componentProps") or {}).items() if v not in (None, "", [], {})}
+		if props:
+			out["props"] = props
+
+		style = block.get("baseStyles") or {}
+		if style:
+			out["style"] = style
+
+		raw = block.get("rawStyles") or {}
+		if raw:
+			out["rstyle"] = raw
+
+		mob = block.get("mobileStyles") or {}
+		if mob:
+			out["mstyle"] = mob
+
+		tab = block.get("tabletStyles") or {}
+		if tab and depth <= 1:
+			out["tstyle"] = tab
+
+		slots = block.get("componentSlots") or {}
+		if slots:
+			out["slots"] = slots
+
+		children = [
+			BlockCodec.compress(c, depth + 1) for c in block.get("children", []) if isinstance(c, dict)
+		]
+		if children:
+			out["c"] = children
+
+		return out
+
+	@staticmethod
+	def expand(node: dict) -> dict:
+		if not isinstance(node, dict):
+			return node
+
+		block: dict = {
+			"componentName": node.get("name", "container"),
+			"baseStyles": node.get("style") or {},
+			"rawStyles": node.get("rstyle") or {},
+			"componentProps": node.get("props") or {},
+			"componentSlots": node.get("slots") or {},
+			"mobileStyles": node.get("mstyle") or {},
+			"tabletStyles": node.get("tstyle") or {},
+			"children": [BlockCodec.expand(c) for c in node.get("c", []) if isinstance(c, dict)],
+		}
+
+		if cid := node.get("id"):
+			block["componentId"] = cid
+		if orig := node.get("originalElement"):
+			block["originalElement"] = orig
+		if label := node.get("label"):
+			block["blockName"] = label
+
+		return block
+
+	@staticmethod
+	def parse_blocks(content: str) -> dict:
+		cleaned = BlockCodec.strip_fences(content)
+		try:
+			parsed = json.loads(cleaned, strict=False)
+		except json.JSONDecodeError:
+			parsed = repair_json(cleaned, return_objects=True)
+
+		if isinstance(parsed, list):
+			block = parsed[0] if parsed else {}
+		elif isinstance(parsed, dict):
+			block = parsed
+		else:
+			raise ValueError("LLM response is not a valid block object")
+
+		if not block:
+			raise ValueError("LLM response produced an empty block")
+
+		if isinstance(block, dict) and not block.get("id"):
+			block["id"] = "root"
+
+		return BlockCodec.expand(block)
+
+	@staticmethod
+	def strip_context(block_json: str) -> str:
+		"""Compress a block to compact JSON for LLM context, extracting relevant subset."""
+		try:
+			data = json.loads(block_json)
+		except (json.JSONDecodeError, TypeError):
+			return block_json
+
+		if isinstance(data, list):
+			data = data[0] if data else {}
+		if not isinstance(data, dict):
+			return block_json
+
+		return BlockCodec.to_json(BlockCodec.compress(data))
+
+	@staticmethod
+	def to_json(data) -> str:
+		"""Compact, token-efficient JSON: no whitespace, unicode kept as-is."""
+		return json.dumps(data, separators=(",", ":"), ensure_ascii=False)
+
+	@staticmethod
+	def strip_fences(text: str) -> str:
+		text = re.sub(r"^```(?:json|yaml)?\s*\n?", "", text.strip())
+		return re.sub(r"\n?```\s*$", "", text).strip()
diff --git a/studio/ai/models.py b/studio/ai/models.py
new file mode 100644
index 00000000..08c88265
--- /dev/null
+++ b/studio/ai/models.py
@@ -0,0 +1,48 @@
+import frappe
+
+from studio.utils import has_page_write_perm
+
+
+class ModelRegistry:
+	AVAILABLE = [
+		{
+			"id": "openrouter/anthropic/claude-sonnet-4-6",
+			"label": "Claude Sonnet 4.6",
+			"vision_capable": True,
+		},
+		{"id": "openrouter/anthropic/claude-opus-4.6", "label": "Claude Opus 4.6", "vision_capable": True},
+		{"id": "openrouter/anthropic/claude-haiku-4-6", "label": "Claude Haiku 4.6", "vision_capable": True},
+		{"id": "openrouter/google/gemini-3.1-pro-preview", "label": "Gemini 3.1 Pro", "vision_capable": True},
+		{"id": "openrouter/google/gemini-3-flash-preview", "label": "Gemini 3 Flash", "vision_capable": True},
+		{"id": "openrouter/openai/gpt-5-mini", "label": "GPT-5 Mini", "vision_capable": True},
+		{"id": "openrouter/qwen/qwen3.7-max", "label": "Qwen 3.7 Max", "vision_capable": False},
+		{"id": "openrouter/moonshotai/kimi-k2.6", "label": "Kimi K2.6", "vision_capable": True},
+	]
+
+	DEFAULT = "openrouter/anthropic/claude-sonnet-4-6"
+	SIMPLE = "openrouter/google/gemini-3-flash-preview"
+
+	@classmethod
+	def get_default(cls) -> str:
+		return cls.DEFAULT
+
+	@classmethod
+	def get_simple(cls) -> str:
+		return cls.SIMPLE
+
+	@classmethod
+	def get_label(cls, model_id: str) -> str:
+		for m in cls.AVAILABLE:
+			if m["id"] == model_id:
+				return m["label"]
+		return model_id
+
+	@classmethod
+	def list_all(cls) -> list:
+		return cls.AVAILABLE
+
+
+@frappe.whitelist()
+@has_page_write_perm()
+def get_ai_models() -> list:
+	return ModelRegistry.list_all()
diff --git a/studio/ai/page_generator.py b/studio/ai/page_generator.py
new file mode 100644
index 00000000..8b0d8bf0
--- /dev/null
+++ b/studio/ai/page_generator.py
@@ -0,0 +1,219 @@
+import logging
+import time
+
+import frappe
+import litellm
+from frappe import _
+
+from studio.ai.block_codec import BlockCodec
+from studio.ai.models import ModelRegistry
+from studio.ai.prompts import MODIFY_SYSTEM_PROMPT, SYSTEM_PROMPT
+from studio.ai.session import AISession
+from studio.utils import has_page_write_perm
+
+litellm.drop_params = True
+logger = frappe.logger("studio.ai")
+logger.setLevel(logging.INFO)
+
+TASK_PARAMS = {
+	"simple": {"max_tokens": 1000, "temperature": 0.5},
+	"complex": {"max_tokens": 40000, "temperature": 0.7},
+}
+
+
+def call_llm(messages: list, model: str, task_tier: str, api_key: str, stream: bool = False):
+	params = TASK_PARAMS[task_tier]
+	return litellm.completion(model=model, messages=messages, api_key=api_key, stream=stream, **params)
+
+
+def emit(event_suffix: str, page_id: str, user: str, prefix: str = "ai_generation", **kwargs):
+	frappe.publish_realtime(
+		f"{prefix}_{event_suffix}_{page_id}",
+		{"page_id": page_id, **kwargs},
+		user=user,
+	)
+
+
+PROGRESS_THROTTLE_SECS = 1.5
+GENERIC_BLOCK_NAMES = {"body", "div", "container"}
+
+
+def get_progress_stage(content: str) -> str | None:
+	"""Report the block currently being built — the most recently emitted block"""
+
+	def get_last_label(content: str) -> tuple[int, str] | None:
+		"""Return (position, value) of the last complete `"label":"value"` in the partial
+		JSON stream, or None if the label is absent or its value is still streaming."""
+		marker = '"label":"'
+		idx = content.rfind(marker)
+		if idx == -1:
+			return None
+		start = idx + len(marker)
+		end = content.find('"', start)
+		if end == -1:  # value not finished streaming yet
+			return None
+		value = content[start:end].strip()
+		return (idx, value) if value else None
+
+	candidates = []
+	found = get_last_label(content)
+	if found and found[1] not in GENERIC_BLOCK_NAMES:
+		candidates.append(found)
+	if not candidates:
+		return None
+	# the candidate appearing latest in the stream is the block being built now
+	_, value = max(candidates)
+	return f"Building {value}…"
+
+
+def run_generation_job(prompt: str, model: str, page_id: str, user: str):
+	api_key = get_api_key()
+	session = AISession.get_or_create(page_id, model)
+	context = session.build_context_string()
+	session.add_message("user", prompt, task_type="generate")
+
+	emit("progress", page_id, user, message=f"Generating with {ModelRegistry.get_label(model)}…")
+
+	system = SYSTEM_PROMPT + (f"\n\n{context}" if context else "")
+	content = ""
+	last_stage = None
+	last_progress_at = 0.0
+	try:
+		llm_messages = [
+			{"role": "system", "content": system},
+			{"role": "user", "content": f"Create a page for: {prompt}"},
+		]
+		for chunk in call_llm(llm_messages, model, "complex", api_key, stream=True):
+			delta = chunk.choices[0].delta.content
+			if not delta:
+				continue
+			content += delta
+			emit("stream", page_id, user, chunk=delta)
+
+			now = time.monotonic()
+			if now - last_progress_at >= PROGRESS_THROTTLE_SECS:
+				stage = get_progress_stage(content)
+				if stage and stage != last_stage:
+					emit("progress", page_id, user, message=stage)
+					last_stage, last_progress_at = stage, now
+
+		logger.info(f"run_generation_job stream done | model={model} length={len(content)}")
+		block = BlockCodec.parse_blocks(content)
+		session.add_message("assistant", "Page generated successfully.", task_type="generate")
+		emit("complete", page_id, user, block=block)
+
+	except Exception as e:
+		logger.error(f"run_generation_job failed: {e}\n\n{content}", exc_info=True)
+		logger.info(f"Raw LLM Output for Generate: \n{content}\n")
+		frappe.log_error(title="Studio AI: generation error", message=str(e))
+		emit("error", page_id, user, message=str(e))
+
+
+@frappe.whitelist()
+@has_page_write_perm()
+def generate_page_from_prompt(prompt: str, model: str | None, page_id: str) -> dict:
+	if not frappe.has_permission("Studio Page", ptype="write"):
+		frappe.throw(_("You do not have permission to modify pages"))
+
+	validate_api_key()
+	resolved_model = model or ModelRegistry.get_default()
+
+	frappe.enqueue(
+		run_generation_job,
+		queue="long",
+		prompt=prompt,
+		model=resolved_model,
+		page_id=page_id,
+		user=frappe.session.user,
+	)
+
+	frappe.local.response.http_status_code = 202
+	return {"status": "accepted"}
+
+
+@frappe.whitelist()
+@has_page_write_perm()
+def get_ai_session(page_id: str, model: str | None = None) -> dict:
+	session = AISession.get_or_create(page_id, model)
+	return {
+		"messages": session.get_messages(),
+		"selected_model": session._doc.selected_model or "",
+	}
+
+
+@frappe.whitelist()
+@has_page_write_perm()
+def clear_ai_session(page_id: str) -> dict:
+	session = AISession.get_or_create(page_id)
+	session.clear()
+	return {"status": "ok"}
+
+
+def run_modify_job(prompt: str, block_context: str, model: str, page_id: str, user: str, component_id: str):
+	api_key = get_api_key()
+
+	session = AISession.get_or_create(page_id, model)
+	context = session.build_context_string()
+	session.add_message("user", prompt, task_type="modify", component_id=component_id)
+
+	emit("progress", page_id, user, prefix="ai_modify", message="Updating block…")
+
+	compressed = BlockCodec.strip_context(block_context)
+	system = MODIFY_SYSTEM_PROMPT + (f"\n\nConversation history:\n{context}" if context else "")
+
+	content = ""
+	try:
+		llm_messages = [
+			{"role": "system", "content": system},
+			{"role": "user", "content": f"Current block:\n{compressed}\n\nRequest: {prompt}"},
+		]
+		for chunk in call_llm(llm_messages, model, "complex", api_key, stream=True):
+			delta = chunk.choices[0].delta.content
+			if not delta:
+				continue
+			content += delta
+			emit("stream", page_id, user, prefix="ai_modify", chunk=delta, component_id=component_id)
+
+		logger.info(f"run_modify_job stream done | model={model} length={len(content)}")
+		block = BlockCodec.parse_blocks(content)
+		session.add_message("assistant", "Block updated.", task_type="modify", component_id=component_id)
+		emit("complete", page_id, user, prefix="ai_modify", block=block, component_id=component_id)
+
+	except Exception as e:
+		logger.error(f"run_modify_job failed: {e}", exc_info=True)
+		logger.info(f"Raw LLM Output for Modify: \n{content}\n")
+		frappe.log_error(title="Studio AI: modify error", message=str(e))
+		emit("error", page_id, user, prefix="ai_modify", message=str(e))
+
+
+@frappe.whitelist()
+@has_page_write_perm()
+def modify_block_from_prompt(
+	prompt: str, block_context: str, model: str | None, page_id: str, component_id: str
+) -> dict:
+	validate_api_key()
+	resolved_model = model or ModelRegistry.get_default()
+
+	frappe.enqueue(
+		run_modify_job,
+		queue="long",
+		prompt=prompt,
+		block_context=block_context,
+		model=resolved_model,
+		page_id=page_id,
+		user=frappe.session.user,
+		component_id=component_id,
+	)
+
+	frappe.local.response.http_status_code = 202
+	return {"status": "accepted"}
+
+
+def get_api_key():
+	settings = frappe.get_single("Studio Settings")
+	return settings.get_password("ai_api_key", raise_exception=False)
+
+
+def validate_api_key():
+	if not get_api_key():
+		frappe.throw(_("OpenRouter API key is not configured. Please set it in Studio Settings."))
diff --git a/studio/ai/prompts.py b/studio/ai/prompts.py
new file mode 100644
index 00000000..df4d5a7a
--- /dev/null
+++ b/studio/ai/prompts.py
@@ -0,0 +1,149 @@
+COMPONENT_CATALOG = """AVAILABLE COMPONENTS:
+LAYOUT:
+- container: layout wrapper (renders as a div). No componentProps. Use baseStyles: display, flexDirection, gap, padding, width, height, flexWrap, alignItems, justifyContent, flexShrink, flex, etc.
+
+TEXT & DISPLAY:
+- TextBlock: {text: "string", tag: "p|h1|h2|h3|h4|h5|h6|span", fontSize: "text-2xs(11px)|text-xs(12px)|text-sm(13px)|text-base(14px)|text-lg(16px)|text-xl(18px)|text-2xl(20px)|text-3xl(24px)|text-p-2xs|text-p-xs|text-p-sm|text-p-base|text-p-lg|text-p-xl|text-p-2xl|text-p-3xl"}
+  # text-* = tight line-height (UI labels, headings); text-p-* = relaxed line-height (body copy, descriptions)
+- Badge: {variant: "subtle|solid|outline", theme: "green|red|orange|blue|gray", size: "sm|md|lg", label: "string"}
+- Avatar: {shape: "circle|square", size: "xs|sm|md|lg|xl|2xl|3xl", label: "initials", image: "url" (publicly accessible)}
+- Progress: {value: 0-100, size: "sm|md|lg", label: "string"}
+- Alert: {title: "string", description: "string", theme: "yellow|red|green|blue"}
+- ErrorMessage: {message: "string"}
+- FeatherIcon: {name: "feather-icon-name", class: "h-5 w-5"} # (icons from https://feathericons.com/)
+- ImageView: {image: "url", size: "xs|sm|md|lg|xl"}
+- Divider: (no props)
+- Tooltip: {text: "string"}
+- HTML: {html: "<p>raw html</p>"}
+
+INPUTS:
+- TextInput: {modelValue: "string", placeholder: "string"}
+- Textarea: {modelValue: "string", placeholder: "string"}
+- FormControl: {modelValue: "string", type: "text|email|number|textarea|select|date|autocomplete|password|tel|url|range", label: "string", placeholder: "string", required: "boolean", options: [{label: "string", value: "string"}] (for select and autocomplete)}
+- Select: {modelValue: "string", placeholder: "string", options: [{label: "string", value: "string"}]}
+- Checkbox: {label: "string", checked: true|false}
+- Switch: {label: "string", description: "string", modelValue: true|false}
+- DatePicker: {modelValue: "string", placeholder: "string"}
+- TimePicker: {modelValue: "string", placeholder: "string"}
+- DateTimePicker: {modelValue: "string", placeholder: "string"}
+- MultiSelect: {modelValue: [], placeholder: "string", options: [{label: "string", value: "string"}]}
+- Rating: {modelValue: 0, label: "string"}
+- FileUploader: {label: "string", fileTypes: "['image/*']"}
+- TextEditor: {modelValue: "string", editable: true, fixedMenu: true}
+- FormLabel: {label: "string"} (for inputs that don't have a built-in label prop, e.g. Textarea, TextEditor, etc.)
+
+ACTIONS:
+- Button: {label: "string", variant: "solid|subtle|outline|ghost", size: "sm|md|lg|xl|2xl", theme: "gray (DEFAULT — omit unless red/green/blue is semantically required)"}
+- Dropdown: {options: [{label: "string", icon: "feather-icon"}], button: {label: "string"}}
+
+NAVIGATION:
+- Breadcrumbs: {items: [{label: "string", route: "string"}]}
+- Tabs: {tabs: [{label: "string"}]}
+- TabButtons: {buttons: [{label: "string", value: "string"}], modelValue: "string"}
+- Sidebar: {header: {title: "string", subtitle: "string"}, sections: [{label: "string", items: [{label: "string", icon: "{{ getIcon('icon-name') }}", to: "string"}]}]}
+  # icon-name must be a valid kebab-case lucide icon from https://lucide.dev/icons
+
+DATA DISPLAY:
+- ListView: {columns: [{label: "string", key: "string", width: number}], rows: [{key: value}], rowKey: "string"}
+- NumberChart: {config: {title: "string", value: number, prefix: "string", delta: number}}
+- AxisChart: {config: {data: [{xKey: val, yKey: val}], xAxis: {key: "dataFieldName", type: "category|time"}, yAxis: {title: "string"}, series: [{name: "dataFieldName" (should match data field key, not label), type: "bar|line"}]}}
+- DonutChart: {config: {data: [{cat: val, val: number}], categoryColumn: "string", valueColumn: "string"}}
+- Filter: {doctype: "string", filters: {}}
+- Link: {doctype: "string"}
+- Tree: {nodeKey: "string", node: {name: "string", label: "string", children: []}}
+- Repeater: (no props — repeats child template over data)
+- Calendar: {config: {defaultMode: "Month"}, events: []}
+
+AUTOCOMPLETE:
+- Autocomplete: {modelValue: "string", placeholder: "string", options: [{label: "string", value: "string"}]}
+- Combobox: {modelValue: "string", placeholder: "string", options: [{group: "string", options: [{label, value}]}]}
+"""
+
+STYLING_RULES = """COMPONENT STYLING RULES:
+STYLE PROPERTY ROUTING — use the correct key:
+- `style:` (panel-editable) — use ONLY these properties:
+  Layout: display, flexDirection, justifyContent, alignItems, alignContent, alignSelf, flexWrap, flex, flexGrow, flexShrink, flexBasis, gap, rowGap, columnGap, overflowX, overflowY
+  Grid: gridTemplateColumns, gridTemplateRows, gridColumn, gridRow
+  Dimension: width, minWidth, maxWidth, height, minHeight, maxHeight
+  Position: position, top, right, bottom, left, zIndex
+  Spacing: margin, padding (and per-side: marginTop, marginRight, marginBottom, marginLeft, paddingTop, paddingRight, paddingBottom, paddingLeft)
+  Typography: fontWeight, lineHeight, color, letterSpacing, textTransform, textAlign
+  Visual: backgroundColor, borderColor, borderWidth, borderStyle, borderRadius, boxShadow, cursor
+- `rstyle:` (raw styles) — for ALL other CSS properties not listed above: opacity, objectFit, objectPosition, whiteSpace, textOverflow, textDecoration, fontStyle, fontFamily, transform, transition, animation, wordBreak, overflowWrap, etc. Keep rstyle minimal — only include when genuinely needed.
+- `mstyle:` (mobile styles) and `tstyle:` (tablet styles) — same properties as `style`, but for mobile and tablet breakpoints. Only include properties that need to change on mobile/tablet — do not duplicate the entire style object.
+- Make sure entire page is RESPONSIVE - Use %, rem for responsive widths. Top-level sections MUST be 100% width
+
+CSS VARIABLE RULES:
+- Always use CSS variables. Avoid raw hex colors/values.
+  - backgroundColor: var(--surface-white) | var(--surface-gray-1..7) | var(--surface-cards) | var(--surface-red-1) | var(--surface-green-1) | var(--surface-amber-1) | var(--surface-blue-1)
+  - color (text): var(--ink-white) | var(--ink-gray-1..9)
+  - borderColor: var(--outline-white) | var(--outline-gray-1..5) | var(--outline-red-1..3) | var(--outline-green-1..2) | var(--outline-amber-1..2) | var(--outline-blue-1) | var(--outline-orange-1)
+  - borderRadius: "0px" (none) | "0.25rem" (sm) | "0.5rem" (DEFAULT) | "0.625rem" (md) | "0.75rem" (lg) | "1rem" (xl) | "1.25rem" (2xl) | "9999px" (full)
+- borderRadius — apply borderRadius (0.5rem by default) on cards, panels, containers by default, but NOT on full-width sections that span the entire viewport width.
+- NEVER use the `border` shorthand property or per-side border properties: borderTopColor, borderTopWidth, borderTopStyle, borderLeftColor, borderLeftWidth, borderLeftStyle, borderRightColor, borderRightWidth, borderRightStyle, borderBottomColor, borderBottomWidth, borderBottomStyle — these are NOT in the style panel
+- For full borders: borderColor, borderWidth (e.g. "1px"), borderStyle — always set all three together
+- For one-sided borders: use CSS shorthand values — e.g. top-only: borderWidth: "4px 0px 0px 0px", borderColor: "var(--outline-blue-1)", borderStyle: "solid"
+- Button: use size prop ("sm"|"md"|"lg"|"xl"|"2xl") for sizing — DO NOT set height in style. NEVER use any other `theme` except gray or default unless prompted. Only use colored themes (blue, red, green) when semantically meaningful: destructive actions → red, success/confirmed → green.
+- Avoid applying visual style (color, backgroundColor, borderColor, fontSize) to frappe-ui components — their props handle this. Only use style on `container` components for layout (width, flex, margin, etc.)."""
+
+OUTPUT_FORMAT_RULES = """JSON OUTPUT RULES (critical — invalid JSON breaks parsing):
+- Return ONLY a single valid, minified JSON object. No markdown fences, no comments, no explanations before or after.
+- Use double quotes for every key and every string value. No bare/unquoted values except numbers, true, false, and null. Single quotes are NOT valid JSON.
+- No trailing commas.
+- Omit keys whose value is null, empty string, empty object, or empty array.
+"""
+
+SYSTEM_PROMPT = f"""You are an expert UI Web developer & designer specializing in creating responsive app pages for Frappe Studio, a Vue.js-based low-code app builder. Your task is to generate a compact JSON block tree that Studio will render as a live Vue application. Each block in the tree maps to a Vue component (from frappe-ui or Studio) or native html element (div).
+
+BLOCK SCHEMA (each block is a JSON object with these optional keys):
+- "name": componentName        — required, must match the catalog exactly
+- "originalElement": "div"|"body" — required for container and root blocks
+- "label": descriptive name
+- "props": {{ }}                  — component-specific props
+- "style": {{ }}                  — panel-editable CSS (see STYLE PROPERTY ROUTING below)
+- "rstyle": {{ }}                 — raw CSS for properties not in the style panel
+- "mstyle": {{ }}                 — mobile style overrides
+- "tstyle": {{ }}                 — tablet style overrides
+- "slots": {{ }}                  — componentSlots for frappe-ui components that hold child content
+- "c": [ ]                       — children list (array of block objects)
+
+ROOT BLOCK — always start with:
+{{"name":"div","originalElement":"body","label":"body","style":{{"display":"flex","flexDirection":"column","flexShrink":0,"width":"inherit","overflowX":"hidden","height":"100%"}},"c":[ ... ]}}
+
+LAYOUT CONTAINERS (CRITICAL — originalElement is required or children won't render):
+{{"name":"container","originalElement":"div","label":"container","style":{{"display":"flex","flexDirection":"row"|"column","gap":"...","padding":"..."}},"c":[ ... ]}}
+- Use container for all inner layout wrappers — never use "div" as name for inner blocks
+- flexDirection "row" for horizontal layouts, "column" for vertical
+- Use gap, padding for spacing. width "100%" for full-width sections. flex "1" to fill space.
+
+{STYLING_RULES}
+
+{COMPONENT_CATALOG}
+
+{OUTPUT_FORMAT_RULES}
+
+RULES:
+- name must exactly match a component from the catalog above (or "div" for root, "container" for inner wrappers)
+- style keys must be camelCase CSS (backgroundColor, borderRadius, etc.)
+- Do NOT include id (componentId is auto-generated by Studio)
+- Do NOT include parentBlock
+- Keep props to only what's relevant to the description
+
+EXAMPLE — "A login form with email, password and a submit button":
+{{"name":"div","originalElement":"body","label":"body","style":{{"display":"flex","flexDirection":"column","flexShrink":0,"width":"inherit","overflowX":"hidden","height":"100%"}},"c":[{{"name":"container","originalElement":"div","label":"page","style":{{"display":"flex","flexDirection":"column","alignItems":"center","justifyContent":"center","flex":"1","padding":"24px"}},"c":[{{"name":"container","originalElement":"div","label":"card","style":{{"display":"flex","flexDirection":"column","gap":"16px","width":"100%","maxWidth":"400px","padding":"32px","backgroundColor":"var(--surface-white)","borderRadius":"0.75rem"}},"c":[{{"name":"TextBlock","props":{{"text":"Sign In","tag":"h2","fontSize":"text-2xl"}},"style":{{"fontWeight":"600","color":"var(--ink-gray-9)"}}}},{{"name":"TextInput","props":{{"placeholder":"Email address"}}}},{{"name":"FormControl","props":{{"type":"password","label":"Password","placeholder":"Enter password"}}}},{{"name":"Button","props":{{"label":"Sign In","variant":"solid"}}}}]}}]}}]}}
+"""
+
+
+MODIFY_SYSTEM_PROMPT = f"""You modify app page sections for Frappe Studio as an expert designer & developer. You will receive the JSON of a selected block and a user request. Return a modified version of that block.
+
+MODIFICATION RULES:
+- Preserve ALL id (componentId) values exactly as given — never change or omit them
+- Change ONLY what the user explicitly requests; leave everything else untouched
+- Return the COMPLETE block structure starting from the provided root node
+
+{COMPONENT_CATALOG}
+
+{STYLING_RULES}
+
+{OUTPUT_FORMAT_RULES}
+"""
diff --git a/studio/ai/session.py b/studio/ai/session.py
new file mode 100644
index 00000000..2982cf5a
--- /dev/null
+++ b/studio/ai/session.py
@@ -0,0 +1,100 @@
+import json
+
+import frappe
+
+
+class AISession:
+	DOCTYPE = "Studio AI Session"
+	MAX_MESSAGES = 24
+
+	def __init__(self, doc):
+		self._doc = doc
+
+	@classmethod
+	def get_or_create(cls, page_id: str, model: str | None = None, user: str | None = None):
+		user = user or frappe.session.user
+
+		session_name = frappe.db.get_value(
+			cls.DOCTYPE,
+			{"page": page_id, "user": user},
+			"name",
+		)
+		if session_name:
+			doc = frappe.get_doc(cls.DOCTYPE, str(session_name))
+			if model and not doc.selected_model:
+				doc.selected_model = model
+				doc.save(ignore_permissions=True)
+			return cls(doc)
+
+		doc = frappe.get_doc(
+			{
+				"doctype": cls.DOCTYPE,
+				"page": page_id,
+				"user": user,
+				"selected_model": model or "",
+				"messages_json": "[]",
+				"last_interaction_on": frappe.utils.now_datetime(),
+			}
+		)
+		doc.insert(ignore_permissions=True)
+		return cls(doc)
+
+	def get_messages(self) -> list[dict]:
+		try:
+			messages = json.loads(self._doc.messages_json or "[]")
+		except json.JSONDecodeError:
+			return []
+		return messages if isinstance(messages, list) else []
+
+	def _save_messages(self, messages: list[dict], task_type: str | None = None):
+		trimmed = messages[-self.MAX_MESSAGES :]
+		self._doc.messages_json = json.dumps(trimmed, separators=(",", ":"))
+		self._doc.last_interaction_on = frappe.utils.now_datetime()
+		if task_type:
+			self._doc.last_task_type = task_type
+		self._doc.save(ignore_permissions=True)
+
+	def add_message(
+		self,
+		role: str,
+		content: str,
+		*,
+		message_type: str = "chat",
+		task_type: str | None = None,
+		component_id: str | None = None,
+		metadata: dict | None = None,
+	):
+		messages = self.get_messages()
+		messages.append(
+			{
+				"id": frappe.generate_hash(length=10),
+				"role": role,
+				"content": content,
+				"message_type": message_type,
+				"task_type": task_type,
+				"component_id": component_id,
+				"created_at": str(frappe.utils.now_datetime()),
+				"metadata": metadata or {},
+			}
+		)
+		self._save_messages(messages, task_type=task_type)
+
+	def build_context_string(self) -> str:
+		history_lines = []
+		for message in self.get_messages()[-10:]:
+			role = message.get("role") or "user"
+			content = (message.get("content") or "").strip()
+			if not content:
+				continue
+			prefix = "User" if role == "user" else "Assistant"
+			history_lines.append(f"{prefix}: {content}")
+
+		if not history_lines:
+			return ""
+		return "Conversation history for this page:\n" + "\n".join(history_lines)
+
+	def clear(self):
+		self._doc.messages_json = "[]"
+		self._doc.last_task_type = None
+		self._doc.last_interaction_on = frappe.utils.now_datetime()
+		self._doc.save(ignore_permissions=True)
diff --git a/studio/constants.py b/studio/constants.py
index 876bb5c2..b4f0a8fe 100644
--- a/studio/constants.py
+++ b/studio/constants.py
@@ -11,7 +11,6 @@
 	"Badge",
 	"Button",
 	"Breadcrumbs",
-	"Card",
 	"Checkbox",
 	"Calendar",
 	"Combobox",
diff --git a/studio/studio/doctype/studio_ai_session/__init__.py b/studio/studio/doctype/studio_ai_session/__init__.py
new file mode 100644
index 00000000..e69de29b
diff --git a/studio/studio/doctype/studio_ai_session/studio_ai_session.json b/studio/studio/doctype/studio_ai_session/studio_ai_session.json
new file mode 100644
index 00000000..0c50e2c9
--- /dev/null
+++ b/studio/studio/doctype/studio_ai_session/studio_ai_session.json
@@ -0,0 +1,97 @@
+{
+ "actions": [],
+ "creation": "2026-05-26 12:00:00.000000",
+ "default_view": "List",
+ "doctype": "DocType",
+ "engine": "InnoDB",
+ "field_order": [
+  "page",
+  "user",
+  "selected_model",
+  "last_task_type",
+  "is_running",
+  "last_interaction_on",
+  "messages_json"
+ ],
+ "fields": [
+  {
+   "fieldname": "page",
+   "fieldtype": "Link",
+   "in_list_view": 1,
+   "label": "Page",
+   "options": "Studio Page",
+   "reqd": 1
+  },
+  {
+   "fieldname": "user",
+   "fieldtype": "Link",
+   "in_list_view": 1,
+   "label": "User",
+   "options": "User",
+   "reqd": 1
+  },
+  {
+   "fieldname": "selected_model",
+   "fieldtype": "Data",
+   "label": "Selected Model"
+  },
+  {
+   "fieldname": "last_task_type",
+   "fieldtype": "Data",
+   "label": "Last Task Type"
+  },
+  {
+   "default": "0",
+   "fieldname": "is_running",
+   "fieldtype": "Check",
+   "label": "Is Running"
+  },
+  {
+   "fieldname": "last_interaction_on",
+   "fieldtype": "Datetime",
+   "in_list_view": 1,
+   "label": "Last Interaction On",
+   "read_only": 1
+  },
+  {
+   "fieldname": "messages_json",
+   "fieldtype": "Long Text",
+   "label": "Messages JSON"
+  }
+ ],
+ "hide_toolbar": 1,
+ "index_web_pages_for_search": 1,
+ "links": [],
+ "modified": "2026-05-26 12:00:00.000000",
+ "modified_by": "Administrator",
+ "module": "Studio",
+ "name": "Studio AI Session",
+ "naming_rule": "Random",
+ "owner": "Administrator",
+ "permissions": [
+  {
+   "create": 1,
+   "delete": 1,
+   "email": 1,
+   "export": 1,
+   "print": 1,
+   "read": 1,
+   "report": 1,
+   "role": "System Manager",
+   "share": 1,
+   "write": 1
+  },
+  {
+   "create": 1,
+   "delete": 1,
+   "read": 1,
+   "role": "Studio User",
+   "write": 1
+  }
+ ],
+ "row_format": "Dynamic",
+ "sort_field": "modified",
+ "sort_order": "DESC",
+ "states": [],
+ "title_field": "page"
+}
diff --git a/studio/studio/doctype/studio_ai_session/studio_ai_session.py b/studio/studio/doctype/studio_ai_session/studio_ai_session.py
new file mode 100644
index 00000000..12ffec39
--- /dev/null
+++ b/studio/studio/doctype/studio_ai_session/studio_ai_session.py
@@ -0,0 +1,23 @@
+# Copyright (c) 2026, Frappe Technologies Pvt Ltd and contributors
+# For license information, please see license.txt
+from frappe.model.document import Document
+
+
+class StudioAISession(Document):
+	# begin: auto-generated types
+	# This code is auto-generated. Do not modify anything in this block.
+
+	from typing import TYPE_CHECKING
+
+	if TYPE_CHECKING:
+		from frappe.types import DF
+
+		is_running: DF.Check
+		last_interaction_on: DF.Datetime | None
+		last_task_type: DF.Data | None
+		messages_json: DF.LongText | None
+		page: DF.Link
+		selected_model: DF.Data | None
+		user: DF.Link
+
+	# end: auto-generated types
diff --git a/studio/studio/doctype/studio_app/test_studio_app.py b/studio/studio/doctype/studio_app/test_studio_app.py
index 48b665e0..4e27de56 100644
--- a/studio/studio/doctype/studio_app/test_studio_app.py
+++ b/studio/studio/doctype/studio_app/test_studio_app.py
@@ -30,7 +30,7 @@ def test_extracts_nested_children_components(self):
 		blocks = json.dumps(
 			[
 				{
-					"componentName": "Card",
+					"componentName": "Alert",
 					"children": [
 						{"componentName": "Badge", "children": []},
 						{
@@ -45,7 +45,7 @@ def test_extracts_nested_children_components(self):
 
 		builder = StudioAppBuilder(app.name, is_standard=False)
 		builder.get_app_components()
-		self.assertIn("Card", builder.components)
+		self.assertIn("Alert", builder.components)
 		self.assertIn("Badge", builder.components)
 		self.assertIn("Avatar", builder.components)
 		self.assertNotIn("div", builder.components)
@@ -100,7 +100,7 @@ def test_extracts_h_function_components(self):
 				{
 					"componentName": "div",
 					"children": [],
-					"render": 'h(Card, {}, [h(Button, { label: "OK" }), h(Badge, { text: "New" })])',
+					"render": 'h(Alert, {}, [h(Button, { label: "OK" }), h(Badge, { text: "New" })])',
 				}
 			]
 		)
@@ -108,20 +108,20 @@ def test_extracts_h_function_components(self):
 
 		builder = StudioAppBuilder(app.name, is_standard=False)
 		builder.get_app_components()
-		self.assertIn("Card", builder.components)
+		self.assertIn("Alert", builder.components)
 		self.assertIn("Button", builder.components)
 		self.assertIn("Badge", builder.components)
 
 	def test_extracts_components_from_multiple_pages(self):
 		app = make_studio_app(app_title="Multi Page App", app_name="multi-page-app")
-		blocks_1 = json.dumps([{"componentName": "Card", "children": []}])
+		blocks_1 = json.dumps([{"componentName": "Alert", "children": []}])
 		blocks_2 = json.dumps([{"componentName": "Avatar", "children": []}])
 		make_studio_page(app.name, page_title="Page One", route="/page-one", blocks=blocks_1, published=1)
 		make_studio_page(app.name, page_title="Page Two", route="/page-two", blocks=blocks_2, published=1)
 
 		builder = StudioAppBuilder(app.name, is_standard=False)
 		builder.get_app_components()
-		self.assertIn("Card", builder.components)
+		self.assertIn("Alert", builder.components)
 		self.assertIn("Avatar", builder.components)
 
 	def test_ignores_unpublished_pages(self):
@@ -136,7 +136,7 @@ def test_ignores_unpublished_pages(self):
 
 	def test_get_published_custom_apps(self):
 		app = make_studio_app(app_title="Published Custom", app_name="published-custom")
-		blocks = json.dumps([{"componentName": "Card", "children": []}])
+		blocks = json.dumps([{"componentName": "Alert", "children": []}])
 		make_studio_page(app.name, page_title="Pub Page", blocks=blocks, published=1)
 
 		unpublished_app = make_studio_app(app_title="Unpublished Custom", app_name="unpublished-custom")
@@ -148,7 +148,7 @@ def test_get_published_custom_apps(self):
 			is_standard=1,
 			frappe_app="studio",
 		)
-		blocks = json.dumps([{"componentName": "Card", "children": []}])
+		blocks = json.dumps([{"componentName": "Alert", "children": []}])
 		make_studio_page(standard_app.name, page_title="Std Page", blocks=blocks, published=1)
 
 		result = get_published_custom_apps()
@@ -179,7 +179,7 @@ def test_get_app_components_from_files(self):
 	def test_get_app_components_from_files_with_string_blocks(self):
 		"""Blocks stored as a JSON string (instead of list) should also be parsed."""
 		app_name = "str-blocks-app"
-		blocks = [{"componentName": "Card", "children": []}]
+		blocks = [{"componentName": "Alert", "children": []}]
 		page_data = {"blocks": json.dumps(blocks)}
 
 		with mock_studio_app_files(app_name, pages={"page": page_data}) as studio_folder:
@@ -187,7 +187,7 @@ def test_get_app_components_from_files_with_string_blocks(self):
 			with patch("studio.build.get_studio_folder", return_value=studio_folder):
 				builder.get_app_components_from_files()
 
-			self.assertIn("Card", builder.components)
+			self.assertIn("Alert", builder.components)
 
 	def test_get_app_components_from_files_with_studio_components(self):
 		"""Studio components referenced in pages should be recursively resolved from disk."""
@@ -195,7 +195,7 @@ def test_get_app_components_from_files_with_studio_components(self):
 		page_data = {"blocks": [{"componentName": "MyWidget", "isStudioComponent": True, "children": []}]}
 		comp_data = {
 			"name": "MyWidget",
-			"block": {"componentName": "Card", "children": [{"componentName": "Badge", "children": []}]},
+			"block": {"componentName": "Alert", "children": [{"componentName": "Badge", "children": []}]},
 		}
 
 		with mock_studio_app_files(
@@ -205,7 +205,7 @@ def test_get_app_components_from_files_with_studio_components(self):
 			with patch("studio.build.get_studio_folder", return_value=studio_folder):
 				builder.get_app_components_from_files()
 
-			self.assertIn("Card", builder.components)
+			self.assertIn("Alert", builder.components)
 			self.assertIn("Badge", builder.components)
 
 	def test_build_paths_for_standard_app(self):
diff --git a/studio/studio/doctype/studio_page/studio_page.py b/studio/studio/doctype/studio_page/studio_page.py
index a033ff2a..f46bcaa2 100644
--- a/studio/studio/doctype/studio_page/studio_page.py
+++ b/studio/studio/doctype/studio_page/studio_page.py
@@ -145,10 +145,15 @@ def has_blocks(self, check_draft: bool = False):
 		return False
 
 	def on_trash(self):
+		self.delete_ai_sessions()
 		if can_export(self):
 			path = self.get_folder_path(with_filename=True)
 			delete_file(path)
 
+	def delete_ai_sessions(self):
+		for session in frappe.get_all("Studio AI Session", filters={"page": self.name}, pluck="name"):
+			frappe.delete_doc("Studio AI Session", session, ignore_missing=True)
+
 	def validate_variables(self):
 		# check for duplicate variable names and show the duplicate variable name
 		variable_names = [variable.variable_name for variable in self.variables]
diff --git a/studio/studio/doctype/studio_settings/__init__.py b/studio/studio/doctype/studio_settings/__init__.py
new file mode 100644
index 00000000..e69de29b
diff --git a/studio/studio/doctype/studio_settings/studio_settings.js b/studio/studio/doctype/studio_settings/studio_settings.js
new file mode 100644
index 00000000..36fef84e
--- /dev/null
+++ b/studio/studio/doctype/studio_settings/studio_settings.js
@@ -0,0 +1,8 @@
+// Copyright (c) 2026, Frappe Technologies Pvt Ltd and contributors
+// For license information, please see license.txt
+
+// frappe.ui.form.on("Studio Settings", {
+// 	refresh(frm) {
+
+// 	},
+// });
diff --git a/studio/studio/doctype/studio_settings/studio_settings.json b/studio/studio/doctype/studio_settings/studio_settings.json
new file mode 100644
index 00000000..685b0416
--- /dev/null
+++ b/studio/studio/doctype/studio_settings/studio_settings.json
@@ -0,0 +1,41 @@
+{
+ "actions": [],
+ "creation": "2025-05-24 00:00:00",
+ "doctype": "DocType",
+ "engine": "InnoDB",
+ "field_order": [
+  "ai_section",
+  "ai_api_key"
+ ],
+ "fields": [
+  {
+   "fieldname": "ai_section",
+   "fieldtype": "Section Break",
+   "label": "AI Settings"
+  },
+  {
+   "description": "API key for the selected AI model provider",
+   "fieldname": "ai_api_key",
+   "fieldtype": "Password",
+   "label": "AI API Key"
+  }
+ ],
+ "issingle": 1,
+ "links": [],
+ "modified": "2026-05-26 17:44:02.690418",
+ "modified_by": "Administrator",
+ "module": "Studio",
+ "name": "Studio Settings",
+ "owner": "Administrator",
+ "permissions": [
+  {
+   "read": 1,
+   "role": "System Manager",
+   "write": 1
+  }
+ ],
+ "row_format": "Dynamic",
+ "sort_field": "creation",
+ "sort_order": "DESC",
+ "states": []
+}
diff --git a/studio/studio/doctype/studio_settings/studio_settings.py b/studio/studio/doctype/studio_settings/studio_settings.py
new file mode 100644
index 00000000..3707690d
--- /dev/null
+++ b/studio/studio/doctype/studio_settings/studio_settings.py
@@ -0,0 +1,20 @@
+# Copyright (c) 2025, Frappe Technologies Pvt Ltd and contributors
+# For license information, please see license.txt
+
+import frappe
+from frappe.model.document import Document
+
+
+class StudioSettings(Document):
+	# begin: auto-generated types
+	# This code is auto-generated. Do not modify anything in this block.
+
+	from typing import TYPE_CHECKING
+
+	if TYPE_CHECKING:
+		from frappe.types import DF
+
+		ai_api_key: DF.Password | None
+	# end: auto-generated types
+
+	pass
diff --git a/studio/studio/doctype/studio_settings/test_studio_settings.py b/studio/studio/doctype/studio_settings/test_studio_settings.py
new file mode 100644
index 00000000..19d96980
--- /dev/null
+++ b/studio/studio/doctype/studio_settings/test_studio_settings.py
@@ -0,0 +1,20 @@
+# Copyright (c) 2026, Frappe Technologies Pvt Ltd and Contributors
+# See license.txt
+
+# import frappe
+from frappe.tests import IntegrationTestCase
+
+# On IntegrationTestCase, the doctype test records and all
+# link-field test record dependencies are recursively loaded
+# Use these module variables to add/remove to/from that list
+EXTRA_TEST_RECORD_DEPENDENCIES = []  # eg. ["User"]
+IGNORE_TEST_RECORD_DEPENDENCIES = []  # eg. ["User"]
+
+
+class IntegrationTestStudioSettings(IntegrationTestCase):
+	"""
+	Integration tests for StudioSettings.
+	Use this class for testing interactions between multiple components.
+	"""
+
+	pass
diff --git a/studio/utils.py b/studio/utils.py
index ec0af92b..86450375 100644
--- a/studio/utils.py
+++ b/studio/utils.py
@@ -1,4 +1,7 @@
 import re
+from functools import wraps
+
+import frappe
 
 
 def camel_case_to_kebab_case(text, remove_spaces=False):
@@ -8,3 +11,24 @@ def camel_case_to_kebab_case(text, remove_spaces=False):
 	if remove_spaces:
 		text = text.replace(" ", "")
 	return text
+
+
+def has_page_write_perm(message: str | None = None):
+	"""Decorator to check if user has permission to edit Studio Page.
+
+	Args:
+	        message: Custom error message to display if permission is denied.
+	                 If not provided, defaults to "You do not have permission to modify pages"
+	"""
+
+	def decorator(fn):
+		@wraps(fn)
+		def wrapper(*args, **kwargs):
+			if not frappe.has_permission("Studio Page", ptype="write"):
+				error_message = message or frappe._("You do not have permission to modify pages")
+				frappe.throw(error_message)
+			return fn(*args, **kwargs)
+
+		return wrapper
+
+	return decorator