diff --git a/.cursor/mcp.json b/.cursor/mcp.json
new file mode 100644
index 0000000..751eff8
--- /dev/null
+++ b/.cursor/mcp.json
@@ -0,0 +1,7 @@
+{
+  "mcpServers": {
+    "svelte": {
+      "url": "https://mcp.svelte.dev/mcp"
+    }
+  }
+}
diff --git a/.vscode/mcp.json b/.vscode/mcp.json
new file mode 100644
index 0000000..e6345a7
--- /dev/null
+++ b/.vscode/mcp.json
@@ -0,0 +1,7 @@
+{
+  "servers": {
+    "svelte": {
+      "url": "https://mcp.svelte.dev/mcp"
+    }
+  }
+}
diff --git a/AGENTS.md b/AGENTS.md
new file mode 100644
index 0000000..a6e66ff
--- /dev/null
+++ b/AGENTS.md
@@ -0,0 +1,23 @@
+You are able to use the Svelte MCP server, where you have access to comprehensive Svelte 5 and SvelteKit documentation. Here's how to use the available tools effectively:
+
+## Available MCP Tools:
+
+### 1. list-sections
+
+Use this FIRST to discover all available documentation sections. Returns a structured list with titles, use_cases, and paths.
+When asked about Svelte or SvelteKit topics, ALWAYS use this tool at the start of the chat to find relevant sections.
+
+### 2. get-documentation
+
+Retrieves full documentation content for specific sections. Accepts single or multiple sections.
+After calling the list-sections tool, you MUST analyze the returned documentation sections (especially the use_cases field) and then use the get-documentation tool to fetch ALL documentation sections that are relevant for the user's task.
+
+### 3. svelte-autofixer
+
+Analyzes Svelte code and returns issues and suggestions.
+You MUST use this tool whenever writing Svelte code before sending it to the user. Keep calling it until no issues or suggestions are returned.
+
+### 4. playground-link
+
+Generates a Svelte Playground link with the provided code.
+After completing the code, ask the user if they want a playground link. Only call this tool after user confirmation and NEVER if code was written to files in their project.
diff --git a/package.json b/package.json
index 3a538bd..f9c6ee7 100644
--- a/package.json
+++ b/package.json
@@ -99,4 +99,4 @@
     "preview": ""
   },
   "homepage": ""
-}
\ No newline at end of file
+}
diff --git a/packages/graphics-components/src/components/Scroller/Scroller.stories.svelte b/packages/graphics-components/src/components/Scroller/Scroller.stories.svelte
index ca233b3..d324369 100644
--- a/packages/graphics-components/src/components/Scroller/Scroller.stories.svelte
+++ b/packages/graphics-components/src/components/Scroller/Scroller.stories.svelte
@@ -140,7 +140,7 @@
   }}
 />
 
-<Story name="ArchieML and ai2svelte" exportName="ArchieML">
+<Story name="ArchieML and ai2svelte" exportName="ArchieML" asChild>
   <Scroller
     id={docBlock.id}
     foregroundPosition={docBlock.foregroundPosition}
@@ -181,6 +181,7 @@
 <Story
   name="Custom foreground with ArchiemL"
   exportName="CustomforegroundArchieML"
+  asChild
 >
   <Scroller
     id={docBlockCustomForeground.id}
diff --git a/packages/graphics-components/src/components/ScrollerBase/ScrollerBase.stories.svelte b/packages/graphics-components/src/components/ScrollerBase/ScrollerBase.stories.svelte
index e8cbb78..50805ca 100644
--- a/packages/graphics-components/src/components/ScrollerBase/ScrollerBase.stories.svelte
+++ b/packages/graphics-components/src/components/ScrollerBase/ScrollerBase.stories.svelte
@@ -9,4 +9,6 @@
   });
 </script>
 
-<Story name="Demo"><ScrollerDemo /></Story>
+<Story name="Demo" asChild>
+  <ScrollerDemo />
+</Story>
diff --git a/packages/graphics-components/src/components/ScrollerBase/ScrollerBase.svelte b/packages/graphics-components/src/components/ScrollerBase/ScrollerBase.svelte
index 13a8c11..f4247e4 100644
--- a/packages/graphics-components/src/components/ScrollerBase/ScrollerBase.svelte
+++ b/packages/graphics-components/src/components/ScrollerBase/ScrollerBase.svelte
@@ -219,12 +219,12 @@
     style="{style}{widthStyle}"
   >
     <svelte-scroller-background bind:this={background}>
-      {@render backgroundSnippet()}
+      {@render backgroundSnippet?.()}
     </svelte-scroller-background>
   </svelte-scroller-background-container>
 
   <svelte-scroller-foreground bind:this={foreground}>
-    {@render foregroundSnippet()}
+    {@render foregroundSnippet?.()}
   </svelte-scroller-foreground>
 </svelte-scroller-outer>
 
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index 18ec407..2614670 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -1,2 +1,4 @@
 packages:
   - 'packages/*'
+onlyBuiltDependencies:
+  - esbuild