diff --git a/app/web_ui/src/lib/utils/formatters.ts b/app/web_ui/src/lib/utils/formatters.ts
index 436d12773..a8abb3a70 100644
--- a/app/web_ui/src/lib/utils/formatters.ts
+++ b/app/web_ui/src/lib/utils/formatters.ts
@@ -1,4 +1,5 @@
 import {
+  type ChunkerConfig,
   type ChunkerType,
   type EvalConfigType,
   type OutputFormat,
@@ -164,6 +165,22 @@ export function chunker_type_format(chunker_type: ChunkerType): string {
   }
 }
 
+export function format_chunker_config_overview(config: ChunkerConfig) {
+  const props = config.properties
+  switch (config.chunker_type) {
+    case "fixed_window":
+      return `${chunker_type_format(config.chunker_type)} • Size: ${props.chunk_size || "N/A"} words • Overlap: ${props.chunk_overlap || "N/A"} words`
+    case "semantic":
+      return `${chunker_type_format(config.chunker_type)} • Buffer: ${props.buffer_size || "N/A"} • Threshold: ${props.breakpoint_percentile_threshold || "N/A"}`
+    default: {
+      // type check will catch missing cases
+      const unknownChunkerType: never = config.chunker_type
+      console.error(`Invalid chunker type: ${unknownChunkerType}`)
+      return "unknown"
+    }
+  }
+}
+
 export function capitalize(str: string | undefined | null): string {
   if (!str) {
     return ""
diff --git a/app/web_ui/src/routes/(app)/docs/rag_configs/[project_id]/[rag_config_id]/rag_config/+page.svelte b/app/web_ui/src/routes/(app)/docs/rag_configs/[project_id]/[rag_config_id]/rag_config/+page.svelte
index 16e163b80..99b313792 100644
--- a/app/web_ui/src/routes/(app)/docs/rag_configs/[project_id]/[rag_config_id]/rag_config/+page.svelte
+++ b/app/web_ui/src/routes/(app)/docs/rag_configs/[project_id]/[rag_config_id]/rag_config/+page.svelte
@@ -29,6 +29,7 @@
   import Warning from "$lib/ui/warning.svelte"
   import posthog from "posthog-js"
   import { uncache_available_tools } from "$lib/stores"
+  import { goto } from "$app/navigation"
 
   $: project_id = $page.params.project_id
   $: rag_config_id = $page.params.rag_config_id
@@ -241,6 +242,14 @@
               },
             },
           ]),
+      {
+        label: "Clone",
+        handler: () => {
+          goto(
+            `/docs/rag_configs/${project_id}/${rag_config_id}/rag_config/clone`,
+          )
+        },
+      },
       {
         label: rag_config?.is_archived ? "Unarchive" : "Archive",
         primary: rag_config?.is_archived,
diff --git a/app/web_ui/src/routes/(app)/docs/rag_configs/[project_id]/[rag_config_id]/rag_config/clone/+page.svelte b/app/web_ui/src/routes/(app)/docs/rag_configs/[project_id]/[rag_config_id]/rag_config/clone/+page.svelte
new file mode 100644
index 000000000..1296c83b5
--- /dev/null
+++ b/app/web_ui/src/routes/(app)/docs/rag_configs/[project_id]/[rag_config_id]/rag_config/clone/+page.svelte
@@ -0,0 +1,92 @@
+<script lang="ts">
+  import { page } from "$app/stores"
+  import AppPage from "../../../../../../app_page.svelte"
+  import { goto } from "$app/navigation"
+  import { client } from "$lib/api_client"
+  import { createKilnError, KilnError } from "$lib/utils/error_handlers"
+  import type { RagConfigWithSubConfigs } from "$lib/types"
+  import { onMount } from "svelte"
+  import EditRagConfigForm from "../../../create_rag_config/edit_rag_config_form.svelte"
+
+  $: project_id = $page.params.project_id
+  $: rag_config_id = $page.params.rag_config_id
+
+  let loading: boolean = true
+  let error: KilnError | null = null
+  let rag_config: RagConfigWithSubConfigs | null = null
+
+  onMount(async () => {
+    await get_rag_config()
+  })
+
+  async function get_rag_config() {
+    try {
+      loading = true
+      const { data: rag_config_data, error: get_rag_config_error } =
+        await client.GET(
+          "/api/projects/{project_id}/rag_configs/{rag_config_id}",
+          {
+            params: {
+              path: {
+                project_id,
+                rag_config_id,
+              },
+            },
+          },
+        )
+
+      if (get_rag_config_error) {
+        throw get_rag_config_error
+      }
+
+      rag_config = rag_config_data
+    } catch (e) {
+      error = createKilnError(e)
+    } finally {
+      loading = false
+    }
+  }
+</script>
+
+<div class="max-w-[900px]">
+  <AppPage
+    title="Clone Search Tool (RAG)"
+    subtitle="This creates a new search tool, based on the configuration of the existing tool."
+    sub_subtitle="Read the Docs"
+    sub_subtitle_link="https://docs.kiln.tech/docs/documents-and-search-rag#building-a-search-tool"
+    breadcrumbs={[
+      {
+        label: "Docs & Search",
+        href: `/docs/${project_id}`,
+      },
+      {
+        label: "Search Tools",
+        href: `/docs/rag_configs/${project_id}`,
+      },
+    ]}
+  >
+    {#if loading}
+      <div class="w-full min-h-[50vh] flex justify-center items-center">
+        <div class="loading loading-spinner loading-lg"></div>
+      </div>
+    {:else if error}
+      <div class="w-full min-h-[50vh] flex justify-center items-center">
+        <div class="text-red-500">{error.message}</div>
+      </div>
+    {:else if !rag_config}
+      <div class="w-full min-h-[50vh] flex justify-center items-center">
+        <div class="text-red-500">Search Tool not found</div>
+      </div>
+    {:else}
+      <EditRagConfigForm
+        initial_rag_config={{
+          ...rag_config,
+          name: `Copy of ${rag_config.name}`,
+        }}
+        on:success={() => {
+          goto(`/docs/rag_configs/${project_id}`)
+        }}
+      />
+    {/if}
+  </AppPage>
+</div>
diff --git a/app/web_ui/src/routes/(app)/docs/rag_configs/[project_id]/[rag_config_id]/rag_config/clone/+page.ts b/app/web_ui/src/routes/(app)/docs/rag_configs/[project_id]/[rag_config_id]/rag_config/clone/+page.ts
new file mode 100644
index 000000000..9786e09d9
--- /dev/null
+++ b/app/web_ui/src/routes/(app)/docs/rag_configs/[project_id]/[rag_config_id]/rag_config/clone/+page.ts
@@ -0,0 +1 @@
+export const prerender = false
diff --git a/app/web_ui/src/routes/(app)/docs/rag_configs/[project_id]/create_rag_config/+page.svelte b/app/web_ui/src/routes/(app)/docs/rag_configs/[project_id]/create_rag_config/+page.svelte
index 1b671e3ca..d3b98e04f 100644
--- a/app/web_ui/src/routes/(app)/docs/rag_configs/[project_id]/create_rag_config/+page.svelte
+++ b/app/web_ui/src/routes/(app)/docs/rag_configs/[project_id]/create_rag_config/+page.svelte
@@ -1,941 +1,49 @@
 <script lang="ts">
   import { page } from "$app/stores"
-  import { client } from "$lib/api_client"
-  import { createKilnError, type KilnError } from "$lib/utils/error_handlers"
-  import FormElement from "$lib/utils/form_element.svelte"
   import AppPage from "../../../../app_page.svelte"
-  import FormContainer from "$lib/utils/form_container.svelte"
   import { goto } from "$app/navigation"
-  import type { OptionGroup } from "$lib/ui/fancy_select_types"
-  import { onMount } from "svelte"
-  import Dialog from "$lib/ui/dialog.svelte"
-  import CreateExtractorForm from "../../../extractors/[project_id]/create_extractor/create_extractor_form.svelte"
-  import CreateChunkerForm from "./create_chunker_form.svelte"
-  import CreateEmbeddingForm from "./create_embedding_form.svelte"
-  import CreateVectorStoreForm from "./create_vector_store_form.svelte"
-  import TagSelector from "./tag_selector.svelte"
-  import type {
-    ExtractorConfig,
-    ChunkerConfig,
-    EmbeddingConfig,
-    VectorStoreConfig,
-  } from "$lib/types"
-  import {
-    embedding_model_name,
-    get_model_friendly_name,
-    load_available_embedding_models,
-    provider_name_from_id,
-  } from "$lib/stores"
-  import Collapse from "$lib/ui/collapse.svelte"
-  import {
-    chunker_type_format,
-    extractor_output_format,
-  } from "$lib/utils/formatters"
-  import {
-    rag_config_templates,
-    build_rag_config_sub_configs,
-  } from "../add_search_tool/rag_config_templates"
-  import PropertyList from "$lib/ui/property_list.svelte"
-  import { tool_name_validator } from "$lib/utils/input_validators"
-  import posthog from "posthog-js"
-  import { uncache_available_tools } from "$lib/stores"
-  import InfoTooltip from "$lib/ui/info_tooltip.svelte"
+  import { rag_config_templates } from "../add_search_tool/rag_config_templates"
+  import EditRagConfigForm from "./edit_rag_config_form.svelte"
 
   $: project_id = $page.params.project_id
   const template_id = $page.url.searchParams.get("template_id")
   const template = template_id ? rag_config_templates[template_id] : null
-  let customize_template_mode = false
 
   let loading: boolean = false
-  let error: KilnError | null = null
-  const DEFAULT_TOOL_NAME = "search_docs"
-  const DEFAULT_TOOL_DESCRIPTION = "Search documents for knowledge."
-  let tool_name: string = DEFAULT_TOOL_NAME
-  let tool_description: string = DEFAULT_TOOL_DESCRIPTION
-  let name: string | null = null
-  let description: string = ""
-  let selected_tags: string[] = []
-
-  let show_create_extractor_dialog: Dialog | null = null
-  let show_create_chunker_dialog: Dialog | null = null
-  let show_create_embedding_dialog: Dialog | null = null
-  let show_create_vector_store_dialog: Dialog | null = null
-
-  // Selected configs
-  let selected_extractor_config_id: string | null = null
-  let selected_chunker_config_id: string | null = null
-  let selected_embedding_config_id: string | null = null
-  let selected_vector_store_config_id: string | null = null
-
-  // Data for dropdowns
-  let extractor_configs: ExtractorConfig[] = []
-  let chunker_configs: ChunkerConfig[] = []
-  let embedding_configs: EmbeddingConfig[] = []
-  let vector_store_configs: VectorStoreConfig[] = []
-
-  // Loading states for data fetching
-  let loading_extractor_configs = false
-  let loading_chunker_configs = false
-  let loading_embedding_configs = false
-  let loading_vector_store_configs = false
-
-  // track which modal is currently open to disable the other forms
-  let modal_opened:
-    | "extractor"
-    | "chunker"
-    | "embedding"
-    | "vector_store"
-    | null = null
-
-  function handle_modal_open(
-    modal_type: "extractor" | "chunker" | "embedding" | "vector_store",
-  ) {
-    modal_opened = modal_type
-  }
-
-  function handle_modal_close() {
-    modal_opened = null
-  }
-
-  function extractor_label(extractor: ExtractorConfig) {
-    return `${get_model_friendly_name(extractor.model_name)} (${provider_name_from_id(extractor.model_provider_name)}) - ${extractor_output_format(extractor.output_format)}`
-  }
-
-  // Convert configs to option groups for fancy select
-  $: extractor_options = [
-    {
-      options: [
-        {
-          label: "New Extractor Configuration",
-          value: "create_new",
-          badge: "＋",
-          badge_color: "primary",
-        },
-      ],
-    },
-
-    ...(extractor_configs.length > 0
-      ? [
-          {
-            label: "Extractors",
-            options: extractor_configs
-              .filter((config) => !config.is_archived)
-              .map((config) => ({
-                label: extractor_label(config),
-                value: config.id,
-                description:
-                  config.name +
-                  (config.description ? " - " + config.description : ""),
-              })),
-          },
-        ]
-      : []),
-  ] as OptionGroup[]
-
-  $: chunker_options = [
-    {
-      options: [
-        {
-          label: "New Chunker Configuration",
-          value: "create_new",
-          badge: "＋",
-          badge_color: "primary",
-        },
-      ],
-    },
-    ...(chunker_configs.length > 0
-      ? [
-          {
-            label: "Chunkers",
-            options: chunker_configs.map((config) => {
-              const props = config.properties
-              let label = ""
-              if (config.chunker_type === "fixed_window") {
-                label = `${chunker_type_format(config.chunker_type)} • Size: ${props.chunk_size || "N/A"} words • Overlap: ${props.chunk_overlap || "N/A"} words`
-              } else if (config.chunker_type === "semantic") {
-                label = `${chunker_type_format(config.chunker_type)} • Buffer: ${props.buffer_size || "N/A"} • Threshold: ${props.breakpoint_percentile_threshold || "N/A"}`
-              } else {
-                label = config.name
-              }
-
-              return {
-                label,
-                value: config.id,
-                description:
-                  config.name +
-                  (config.description ? ` - ${config.description}` : ""),
-              }
-            }),
-          },
-        ]
-      : []),
-  ] as OptionGroup[]
-
-  $: embedding_options = [
-    {
-      options: [
-        {
-          label: "New Embedding Configuration",
-          value: "create_new",
-          badge: "＋",
-          badge_color: "primary",
-        },
-      ],
-    },
-    ...(embedding_configs.length > 0
-      ? [
-          {
-            label: "Embedding Models",
-            options: embedding_configs.map((config) => ({
-              label:
-                `${embedding_model_name(config.model_name, config.model_provider_name)} (${provider_name_from_id(config.model_provider_name)})` +
-                (config.properties?.dimensions
-                  ? `- ${config.properties?.dimensions} dimensions`
-                  : ""),
-              value: config.id,
-              description:
-                config.name +
-                (config.description ? " - " + config.description : ""),
-            })),
-          },
-        ]
-      : []),
-  ] as OptionGroup[]
-
-  $: vector_store_options = [
-    {
-      options: [
-        {
-          label: "New Search Index Configuration",
-          value: "create_new",
-          badge: "＋",
-          badge_color: "primary",
-        },
-      ],
-    },
-    ...(vector_store_configs.length > 0
-      ? [
-          {
-            label: "Search Index Configurations",
-            options: vector_store_configs.map((config) => ({
-              label:
-                config.store_type === "lancedb_fts"
-                  ? "Full Text Search"
-                  : config.store_type === "lancedb_vector"
-                    ? "Vector Search"
-                    : "Hybrid Search",
-              value: config.id,
-              description:
-                config.name +
-                ` (${config.properties.similarity_top_k || 10} results)`,
-            })),
-          },
-        ]
-      : []),
-  ] as OptionGroup[]
-
-  // show the create extractor dialog when the user clicks the create new extractor button
-  $: if (selected_extractor_config_id === "create_new") {
-    show_create_extractor_dialog?.show()
-    handle_modal_open("extractor")
-  } else {
-    show_create_extractor_dialog?.close()
-  }
-
-  // show the create chunker dialog when the user clicks the create new chunker button
-  $: if (selected_chunker_config_id === "create_new") {
-    show_create_chunker_dialog?.show()
-    handle_modal_open("chunker")
-  } else {
-    show_create_chunker_dialog?.close()
-  }
-
-  // show the create embedding dialog when the user clicks the create new embedding button
-  $: if (selected_embedding_config_id === "create_new") {
-    show_create_embedding_dialog?.show()
-    handle_modal_open("embedding")
-  } else {
-    show_create_embedding_dialog?.close()
-  }
-
-  // show the create vector store dialog when the user clicks the create new vector store button
-  $: if (selected_vector_store_config_id === "create_new") {
-    show_create_vector_store_dialog?.show()
-    handle_modal_open("vector_store")
-  } else {
-    show_create_vector_store_dialog?.close()
-  }
-
-  // Load data on mount
-  onMount(async () => {
-    await Promise.all([
-      load_available_embedding_models(),
-      loadExtractorConfigs(),
-      loadChunkerConfigs(),
-      loadEmbeddingConfigs(),
-      loadVectorStoreConfigs(),
-    ])
-  })
-
-  async function loadExtractorConfigs() {
-    try {
-      loading_extractor_configs = true
-      const { data, error: fetch_error } = await client.GET(
-        "/api/projects/{project_id}/extractor_configs",
-        {
-          params: {
-            path: {
-              project_id,
-            },
-          },
-        },
-      )
-
-      if (fetch_error) {
-        error = createKilnError(fetch_error)
-        return
-      }
-
-      extractor_configs = data || []
-    } finally {
-      loading_extractor_configs = false
-    }
-  }
-
-  async function loadChunkerConfigs() {
-    try {
-      loading_chunker_configs = true
-      const { data, error: fetch_error } = await client.GET(
-        "/api/projects/{project_id}/chunker_configs",
-        {
-          params: {
-            path: {
-              project_id,
-            },
-          },
-        },
-      )
-
-      if (fetch_error) {
-        error = createKilnError(fetch_error)
-        return
-      }
-
-      chunker_configs = data || []
-    } finally {
-      loading_chunker_configs = false
-    }
-  }
-
-  async function loadEmbeddingConfigs() {
-    try {
-      loading_embedding_configs = true
-      const { data, error: fetch_error } = await client.GET(
-        "/api/projects/{project_id}/embedding_configs",
-        {
-          params: {
-            path: {
-              project_id,
-            },
-          },
-        },
-      )
-
-      if (fetch_error) {
-        error = createKilnError(fetch_error)
-        return
-      }
-
-      embedding_configs = data || []
-    } finally {
-      loading_embedding_configs = false
-    }
-  }
-
-  async function loadVectorStoreConfigs() {
-    try {
-      loading_vector_store_configs = true
-      const { data, error: fetch_error } = await client.GET(
-        "/api/projects/{project_id}/vector_store_configs",
-        {
-          params: {
-            path: {
-              project_id,
-            },
-          },
-        },
-      )
-
-      if (fetch_error) {
-        error = createKilnError(fetch_error)
-        return
-      }
-
-      vector_store_configs = data || []
-    } finally {
-      loading_vector_store_configs = false
-    }
-  }
-
-  async function create_rag_config() {
-    // Special case for saving the template
-    if (template && !customize_template_mode) {
-      await save_template()
-      return
-    }
-
-    try {
-      loading = true
-      error = null
-
-      // Validate that all required configs are selected
-      if (
-        !selected_extractor_config_id ||
-        selected_extractor_config_id === "create_new"
-      ) {
-        error = createKilnError({
-          message: "Please select an extractor configuration.",
-          status: 400,
-        })
-        return
-      }
-
-      if (
-        !selected_chunker_config_id ||
-        selected_chunker_config_id === "create_new"
-      ) {
-        error = createKilnError({
-          message: "Please select a chunker configuration.",
-          status: 400,
-        })
-        return
-      }
-
-      if (
-        !selected_embedding_config_id ||
-        selected_embedding_config_id === "create_new"
-      ) {
-        error = createKilnError({
-          message: "Please select an embedding configuration.",
-          status: 400,
-        })
-        return
-      }
-
-      if (
-        !selected_vector_store_config_id ||
-        selected_vector_store_config_id === "create_new"
-      ) {
-        error = createKilnError({
-          message: "Please select a vector store configuration.",
-          status: 400,
-        })
-        return
-      }
-
-      const { error: create_error } = await client.POST(
-        "/api/projects/{project_id}/rag_configs/create_rag_config",
-        {
-          params: {
-            path: {
-              project_id,
-            },
-          },
-          body: {
-            name: name || null,
-            description: description || null,
-            tool_name: tool_name,
-            tool_description: tool_description,
-            extractor_config_id: selected_extractor_config_id,
-            chunker_config_id: selected_chunker_config_id,
-            embedding_config_id: selected_embedding_config_id,
-            vector_store_config_id: selected_vector_store_config_id,
-            tags: selected_tags.length > 0 ? selected_tags : null,
-          },
-        },
-      )
-
-      if (create_error) {
-        error = createKilnError(create_error)
-        return
-      }
-
-      let extractor_model: string | undefined = undefined
-      let chunker_type: "fixed_window" | "semantic" | undefined = undefined
-      let chunker_size: unknown = undefined
-      let chunker_overlap: unknown = undefined
-      let embedding_model: string | undefined = undefined
-      let vector_store_type: string | undefined = undefined
-      try {
-        extractor_model = extractor_configs.find(
-          (config) => config.id === selected_extractor_config_id,
-        )?.model_name
-        chunker_type = chunker_configs.find(
-          (config) => config.id === selected_chunker_config_id,
-        )?.chunker_type
-        chunker_size = chunker_configs.find(
-          (config) => config.id === selected_chunker_config_id,
-        )?.properties.chunk_size
-        chunker_overlap = chunker_configs.find(
-          (config) => config.id === selected_chunker_config_id,
-        )?.properties.chunk_overlap
-        embedding_model = embedding_configs.find(
-          (config) => config.id === selected_embedding_config_id,
-        )?.model_name
-        vector_store_type = vector_store_configs.find(
-          (config) => config.id === selected_vector_store_config_id,
-        )?.store_type
-      } catch (e) {
-        console.error(e)
-      }
-      posthog.capture("create_custom_rag_config", {
-        tag_filter: selected_tags.length > 0,
-        custom_name: tool_name !== DEFAULT_TOOL_NAME,
-        custom_description: tool_description !== DEFAULT_TOOL_DESCRIPTION,
-        extractor_model: extractor_model,
-        chunker_type: chunker_type,
-        chunker_size: chunker_size,
-        chunker_overlap: chunker_overlap,
-        embedding_model: embedding_model,
-        vector_store_type: vector_store_type,
-      })
-
-      uncache_available_tools(project_id)
-
-      goto(`/docs/rag_configs/${project_id}`)
-    } finally {
-      loading = false
-    }
-  }
-
-  async function customize_template() {
-    if (!template) {
-      return
-    }
-    try {
-      loading = true
-      // Fetch or build the sub configs
-      const {
-        extractor_config_id,
-        chunker_config_id,
-        embedding_config_id,
-        vector_store_config_id,
-      } = await build_rag_config_sub_configs(
-        template,
-        project_id,
-        extractor_configs,
-        chunker_configs,
-        embedding_configs,
-        vector_store_configs,
-      )
-      // Reload the configs, new ones may have been created in above step
-      await Promise.all([
-        loadExtractorConfigs(),
-        loadChunkerConfigs(),
-        loadEmbeddingConfigs(),
-        loadVectorStoreConfigs(),
-      ])
-      // Update the UI with the new configs
-      selected_extractor_config_id = extractor_config_id
-      selected_chunker_config_id = chunker_config_id
-      selected_embedding_config_id = embedding_config_id
-      selected_vector_store_config_id = vector_store_config_id
-      // Don't render the template anymore, let them customize it
-      customize_template_mode = true
-    } catch (err) {
-      error = createKilnError("Error customizing template: " + err)
-      return
-    } finally {
-      loading = false
-    }
-  }
-
-  async function save_template() {
-    if (!template) {
-      return
-    }
-    try {
-      loading = true
-
-      // Fetch or build the sub configs
-      const {
-        extractor_config_id,
-        chunker_config_id,
-        embedding_config_id,
-        vector_store_config_id,
-      } = await build_rag_config_sub_configs(
-        template,
-        project_id,
-        extractor_configs,
-        chunker_configs,
-        embedding_configs,
-        vector_store_configs,
-      )
-
-      // Save the rag config
-      const { error: create_error } = await client.POST(
-        "/api/projects/{project_id}/rag_configs/create_rag_config",
-        {
-          params: {
-            path: {
-              project_id,
-            },
-          },
-          body: {
-            name: template.rag_config_name,
-            tool_name: tool_name,
-            tool_description: tool_description,
-            extractor_config_id,
-            chunker_config_id,
-            embedding_config_id,
-            vector_store_config_id,
-            tags: selected_tags.length > 0 ? selected_tags : null,
-          },
-        },
-      )
-
-      if (create_error) {
-        error = createKilnError(create_error)
-        return
-      }
-
-      posthog.capture("create_rag_config_from_template", {
-        template_name: template.name,
-        tag_filter: selected_tags.length > 0,
-        custom_name: tool_name !== DEFAULT_TOOL_NAME,
-        custom_description: tool_description !== DEFAULT_TOOL_DESCRIPTION,
-      })
-
-      uncache_available_tools(project_id)
-
-      goto(`/docs/rag_configs/${project_id}`)
-    } finally {
-      loading = false
-    }
-  }
 </script>
 
-<AppPage
-  title="Create Search Tool (RAG)"
-  subtitle="Define parameters for how this tool will search and retrieve your documents"
-  sub_subtitle="Read the Docs"
-  sub_subtitle_link="https://docs.kiln.tech/docs/documents-and-search-rag#building-a-search-tool"
-  breadcrumbs={[
-    {
-      label: "Docs & Search",
-      href: `/docs/${project_id}`,
-    },
-    {
-      label: "Search Tools",
-      href: `/docs/rag_configs/${project_id}`,
-    },
-    {
-      label: "Add Search Tool",
-      href: `/docs/rag_configs/${project_id}/add_search_tool`,
-    },
-  ]}
->
-  {#if loading}
-    <div class="w-full min-h-[50vh] flex justify-center items-center">
-      <div class="loading loading-spinner loading-lg"></div>
-    </div>
-  {:else}
-    <div class="max-w-[900px]">
-      <FormContainer
-        submit_visible={true}
-        submit_label="Create Search Tool"
-        on:submit={create_rag_config}
-        {error}
-        gap={4}
-        bind:submitting={loading}
-        keyboard_submit={!modal_opened}
-      >
-        <!-- Search Tool Properties -->
-        <div class="text-xl font-bold">Part 1: Tool Properties</div>
-        <FormElement
-          label="Search Tool Name"
-          description="A unique short tool name such as 'knowledge_base_search'. Be descriptive about what data this tool can search."
-          info_description="Must be in snake_case format. It should be descriptive of what the tool does as the model will see it. When adding multiple tools to a task each tool needs a unique name, so being unique and descriptive is important."
-          inputType="input"
-          id="tool_name"
-          bind:value={tool_name}
-          validator={tool_name_validator}
-        />
-        <FormElement
-          label="Search Tool Description"
-          description="A description for the model to understand what this tool can do, and when to use it. Include a description of what data this tool can search."
-          info_description="It should be descriptive of what the tool does as the model will see it. Example of a high quality description: 'Search the customer facing help docs for information about the product.'"
-          inputType="textarea"
-          id="tool_description"
-          max_length={128}
-          bind:value={tool_description}
-        />
-
-        <!-- Tag Selection -->
-        <div class="flex flex-col gap-2">
-          <TagSelector
-            {project_id}
-            bind:selected_tags
-            on:change={(e) => (selected_tags = e.detail.selected_tags)}
-          />
-        </div>
-
-        <div>
-          <div class="text-xl font-bold mt-4">Part 2: Search Configuration</div>
-          <div class="text-xs text-gray-500 font-medium">
-            This configuration controls how the search tool will extract, index,
-            and search your documents.
-            {#if template && !customize_template_mode}
-              <InfoTooltip
-                no_pad={true}
-                tooltip_text="You selected a pre-configured search tool with these parameters."
-              />
-            {/if}
-          </div>
-        </div>
-        {#if template && !customize_template_mode}
-          <div class="flex flex-col">
-            <div class="mb-8">
-              <PropertyList
-                properties={[
-                  { name: "Template Name", value: template.name },
-                  {
-                    name: "Extractor Model",
-                    value: template.extractor.description,
-                    tooltip:
-                      "The model used to extract text from your documents (PDFs, images, videos, etc).",
-                  },
-                  {
-                    name: "Chunking Strategy",
-                    value: template.chunker.description,
-                    tooltip:
-                      "Parameters for splitting larger documents into smaller chunks for search.",
-                  },
-                  {
-                    name: "Embedding Model",
-                    value: template.embedding.description,
-                    tooltip:
-                      "The model used to convert text chunks into vectors for similarity search.",
-                  },
-                  {
-                    name: "Search Index",
-                    value: template.vector_store.description,
-                    tooltip:
-                      "How documents will be indexed and searched. Vector = semantic similarity, Full-Text = keyword search, Hybrid = both",
-                  },
-                  ...(template.notice_text
-                    ? [
-                        {
-                          name: "Note",
-                          value: template.notice_text,
-                          warn_icon: true,
-                          tooltip: template.notice_tooltip,
-                        },
-                      ]
-                    : []),
-                ]}
-              />
-              <div class="flex flex-row items-center gap-2 mt-4">
-                <button
-                  class="btn btn-sm px-6"
-                  on:click={() => {
-                    customize_template()
-                  }}
-                >
-                  Customize Configuration
-                </button>
-                <div class="badge badge-sm badge-outline">Advanced</div>
-              </div>
-            </div>
-          </div>
-        {:else}
-          <div class="flex flex-col gap-6">
-            <!-- Extractor Selection -->
-            <div class="flex flex-col gap-2">
-              {#if loading_extractor_configs}
-                <div class="flex items-center gap-2">
-                  <div class="loading loading-spinner loading-sm"></div>
-                  <span class="text-sm">Loading extractors...</span>
-                </div>
-              {:else}
-                <FormElement
-                  id="extractor_select"
-                  label="Extractor"
-                  description="Extractors convert your documents into text."
-                  info_description="Documents like PDFs, images and videos need to be converted into text so they can be searched and read by models."
-                  fancy_select_options={extractor_options}
-                  bind:value={selected_extractor_config_id}
-                  inputType="fancy_select"
-                />
-              {/if}
-            </div>
-
-            <!-- Chunker Selection -->
-            <div class="flex flex-col gap-2">
-              {#if loading_chunker_configs}
-                <div class="flex items-center gap-2">
-                  <div class="loading loading-spinner loading-sm"></div>
-                  <span class="text-sm">Loading chunkers...</span>
-                </div>
-              {:else}
-                <FormElement
-                  id="chunker_select"
-                  label="Chunker"
-                  description="Split document text into smaller chunks for search."
-                  info_description="Splitting long documents into smaller chunks allows search to find relevant information."
-                  fancy_select_options={chunker_options}
-                  bind:value={selected_chunker_config_id}
-                  inputType="fancy_select"
-                />
-              {/if}
-            </div>
-
-            <!-- Embedding Selection -->
-            <div class="flex flex-col gap-2">
-              {#if loading_embedding_configs}
-                <div class="flex items-center gap-2">
-                  <div class="loading loading-spinner loading-sm"></div>
-                  <span class="text-sm">Loading embedding models...</span>
-                </div>
-              {:else}
-                <FormElement
-                  id="embedding_select"
-                  label="Embedding Model"
-                  description="Embedding models convert document chunks into vectors for similarity search."
-                  info_description="Embedding models are a type of AI model which create searchable vectors from your chunks."
-                  fancy_select_options={embedding_options}
-                  bind:value={selected_embedding_config_id}
-                  inputType="fancy_select"
-                />
-              {/if}
-            </div>
-
-            <!-- Vector Store Selection -->
-            <div class="flex flex-col gap-2">
-              {#if loading_vector_store_configs}
-                <div class="flex items-center gap-2">
-                  <div class="loading loading-spinner loading-sm"></div>
-                  <span class="text-sm">Loading vector stores...</span>
-                </div>
-              {:else}
-                <FormElement
-                  id="vector_store_select"
-                  label="Search Index"
-                  description="Choose how documents will be indexed and searched."
-                  info_description="Full text search is fastest for keyword searches, vector search is best for semantic meaning, and hybrid combines both approaches."
-                  fancy_select_options={vector_store_options}
-                  bind:value={selected_vector_store_config_id}
-                  inputType="fancy_select"
-                />
-              {/if}
-            </div>
-          </div>
-
-          <!-- Advanced -->
-          <Collapse title="Advanced Options">
-            <FormElement
-              label="Reference Name"
-              description="A search tool name for your reference, not seen by the model. Leave blank and we'll generate one for you."
-              optional={true}
-              inputType="input"
-              id="rag_config_name"
-              bind:value={name}
-            />
-            <FormElement
-              label="Reference Description"
-              description="A description of the search tool for your reference, not seen by the model."
-              optional={true}
-              inputType="textarea"
-              id="rag_config_description"
-              bind:value={description}
-            />
-          </Collapse>
-        {/if}
-      </FormContainer>
-    </div>
-  {/if}
-</AppPage>
-
-<Dialog
-  bind:this={show_create_extractor_dialog}
-  title="Extractor Configuration"
-  subtitle="Extractors convert your documents into text."
-  width="wide"
-  on:close={() => {
-    handle_modal_close()
-    if (selected_extractor_config_id === "create_new") {
-      selected_extractor_config_id = null
-    }
-  }}
->
-  <CreateExtractorForm
-    keyboard_submit={modal_opened === "extractor"}
-    on:success={async (e) => {
-      await loadExtractorConfigs()
-      selected_extractor_config_id = e.detail.extractor_config_id
-    }}
-  />
-</Dialog>
-
-<Dialog
-  bind:this={show_create_chunker_dialog}
-  title="Chunker Configuration"
-  subtitle="Split document text into smaller chunks for search."
-  width="wide"
-  on:close={() => {
-    handle_modal_close()
-    if (selected_chunker_config_id === "create_new") {
-      selected_chunker_config_id = null
-    }
-  }}
->
-  <CreateChunkerForm
-    keyboard_submit={modal_opened === "chunker"}
-    on:success={async (e) => {
-      await loadChunkerConfigs()
-      selected_chunker_config_id = e.detail.chunker_config_id
-    }}
-  />
-</Dialog>
-
-<Dialog
-  bind:this={show_create_embedding_dialog}
-  title="Embedding Configuration"
-  subtitle="Convert text chunks into vectors for similarity search."
-  width="normal"
-  on:close={() => {
-    handle_modal_close()
-    if (selected_embedding_config_id === "create_new") {
-      selected_embedding_config_id = null
-    }
-  }}
->
-  <CreateEmbeddingForm
-    keyboard_submit={modal_opened === "embedding"}
-    on:success={async (e) => {
-      await loadEmbeddingConfigs()
-      selected_embedding_config_id = e.detail.embedding_config_id
-    }}
-  />
-</Dialog>
-
-<Dialog
-  bind:this={show_create_vector_store_dialog}
-  title="Search Index Configuration"
-  subtitle="Choose how documents will be indexed and searched."
-  width="wide"
-  on:close={() => {
-    handle_modal_close()
-    if (selected_vector_store_config_id === "create_new") {
-      selected_vector_store_config_id = null
-    }
-  }}
->
-  <CreateVectorStoreForm
-    keyboard_submit={modal_opened === "vector_store"}
-    on:success={async (e) => {
-      await loadVectorStoreConfigs()
-      selected_vector_store_config_id = e.detail.vector_store_config_id
-    }}
-  />
-</Dialog>
+<div class="max-w-[900px]">
+  <AppPage
+    title="Create Search Tool (RAG)"
+    subtitle="Define parameters for how this tool will search and retrieve your documents"
+    sub_subtitle="Read the Docs"
+    sub_subtitle_link="https://docs.kiln.tech/docs/documents-and-search-rag#building-a-search-tool"
+    breadcrumbs={[
+      {
+        label: "Docs & Search",
+        href: `/docs/${project_id}`,
+      },
+      {
+        label: "Search Tools",
+        href: `/docs/rag_configs/${project_id}`,
+      },
+      {
+        label: "Add Search Tool",
+        href: `/docs/rag_configs/${project_id}/add_search_tool`,
+      },
+    ]}
+  >
+    {#if loading}
+      <div class="w-full min-h-[50vh] flex justify-center items-center">
+        <div class="loading loading-spinner loading-lg"></div>
+      </div>
+    {:else}
+      <EditRagConfigForm
+        {template}
+        on:success={() => {
+          goto(`/docs/rag_configs/${project_id}`)
+        }}
+      />
+    {/if}
+  </AppPage>
+</div>
diff --git a/app/web_ui/src/routes/(app)/docs/rag_configs/[project_id]/create_rag_config/create_chunker_dialog.svelte b/app/web_ui/src/routes/(app)/docs/rag_configs/[project_id]/create_rag_config/create_chunker_dialog.svelte
new file mode 100644
index 000000000..584db9155
--- /dev/null
+++ b/app/web_ui/src/routes/(app)/docs/rag_configs/[project_id]/create_rag_config/create_chunker_dialog.svelte
@@ -0,0 +1,30 @@
+<script lang="ts">
+  import { createEventDispatcher } from "svelte"
+  import Dialog from "$lib/ui/dialog.svelte"
+  import CreateChunkerForm from "./create_chunker_form.svelte"
+
+  export let dialog: Dialog | null = null
+  export let keyboard_submit: boolean = false
+
+  const dispatch = createEventDispatcher<{
+    success: { chunker_config_id: string }
+    close: void
+  }>()
+</script>
+
+<Dialog
+  bind:this={dialog}
+  title="Chunker Configuration"
+  subtitle="Split document text into smaller chunks for search."
+  width="wide"
+  on:close={() => {
+    dispatch("close")
+  }}
+>
+  <CreateChunkerForm
+    {keyboard_submit}
+    on:success={(e) => {
+      dispatch("success", { chunker_config_id: e.detail.chunker_config_id })
+    }}
+  />
+</Dialog>
diff --git a/app/web_ui/src/routes/(app)/docs/rag_configs/[project_id]/create_rag_config/create_embedding_dialog.svelte b/app/web_ui/src/routes/(app)/docs/rag_configs/[project_id]/create_rag_config/create_embedding_dialog.svelte
new file mode 100644
index 000000000..421b6b059
--- /dev/null
+++ b/app/web_ui/src/routes/(app)/docs/rag_configs/[project_id]/create_rag_config/create_embedding_dialog.svelte
@@ -0,0 +1,30 @@
+<script lang="ts">
+  import { createEventDispatcher } from "svelte"
+  import Dialog from "$lib/ui/dialog.svelte"
+  import CreateEmbeddingForm from "./create_embedding_form.svelte"
+
+  export let dialog: Dialog | null = null
+  export let keyboard_submit: boolean = false
+
+  const dispatch = createEventDispatcher<{
+    success: { embedding_config_id: string }
+    close: void
+  }>()
+</script>
+
+<Dialog
+  bind:this={dialog}
+  title="Embedding Configuration"
+  subtitle="Convert text chunks into vectors for similarity search."
+  width="wide"
+  on:close={() => {
+    dispatch("close")
+  }}
+>
+  <CreateEmbeddingForm
+    {keyboard_submit}
+    on:success={(e) => {
+      dispatch("success", { embedding_config_id: e.detail.embedding_config_id })
+    }}
+  />
+</Dialog>
diff --git a/app/web_ui/src/routes/(app)/docs/rag_configs/[project_id]/create_rag_config/create_embedding_form.svelte b/app/web_ui/src/routes/(app)/docs/rag_configs/[project_id]/create_rag_config/create_embedding_form.svelte
index 104f334db..6f2700baa 100644
--- a/app/web_ui/src/routes/(app)/docs/rag_configs/[project_id]/create_rag_config/create_embedding_form.svelte
+++ b/app/web_ui/src/routes/(app)/docs/rag_configs/[project_id]/create_rag_config/create_embedding_form.svelte
@@ -18,13 +18,14 @@
   $: project_id = $page.params.project_id
 
   let loading: boolean = false
+  let loadingModels = true
   let error: KilnError | null = null
+
   let name: string = ""
   let description: string = ""
   let selectedModel: EmbeddingOptionValue | null = null
   let customDimensions: number | null = null
   let embeddingModels: OptionGroup[] = []
-  let loadingModels = true
   export let keyboard_submit: boolean = false
 
   type EmbeddingOptionValue = {
@@ -46,13 +47,12 @@
   async function loadEmbeddingModels() {
     try {
       loadingModels = true
-      const { error: modelsError, data } = await client.GET(
+      const { error: load_models_error, data } = await client.GET(
         "/api/available_embedding_models",
       )
 
-      if (modelsError) {
-        error = createKilnError(modelsError)
-        return
+      if (load_models_error) {
+        throw load_models_error
       }
 
       // Transform the API response into OptionGroup format
@@ -85,14 +85,13 @@
   }
 
   async function create_embedding_config() {
-    if (!selectedModel) {
-      error = createKilnError(new Error("Please select an embedding model"))
-      return
-    }
-
     try {
       loading = true
 
+      if (!selectedModel) {
+        throw new Error("Please select an embedding model")
+      }
+
       const properties: Record<string, string | number | boolean> = {}
       if (customDimensions && selectedModel.supports_custom_dimensions) {
         properties.dimensions = customDimensions
@@ -118,40 +117,41 @@
       )
 
       if (create_embedding_error) {
-        error = createKilnError(create_embedding_error)
-        return
+        throw create_embedding_error
       }
 
       if (!data.id) {
-        error = createKilnError(new Error("Failed to create embedding config"))
-        return
+        throw new Error("Failed to create embedding config")
       }
 
       dispatch("success", { embedding_config_id: data.id })
+    } catch (err) {
+      error = createKilnError(err)
     } finally {
       loading = false
     }
   }
 </script>
 
-<FormContainer
-  submit_visible={true}
-  submit_label="Create Embedding Config"
-  on:submit={async () => {
-    await create_embedding_config()
-  }}
-  {error}
-  gap={4}
-  bind:submitting={loading}
-  {keyboard_submit}
->
+{#if loading || loadingModels}
   <div class="flex flex-col gap-4">
-    {#if loadingModels}
-      <div class="flex items-center gap-2">
-        <div class="loading loading-spinner loading-sm"></div>
-        <span>Loading embedding models...</span>
-      </div>
-    {:else}
+    <div class="flex justify-center items-center gap-2">
+      <div class="loading loading-spinner loading-lg"></div>
+    </div>
+  </div>
+{:else}
+  <FormContainer
+    submit_visible={true}
+    submit_label="Create Embedding Config"
+    on:submit={async () => {
+      await create_embedding_config()
+    }}
+    {error}
+    gap={4}
+    bind:submitting={loading}
+    {keyboard_submit}
+  >
+    <div class="flex flex-col gap-4">
       <FormElement
         label="Embedding Model"
         description="The embedding model to use to convert your text into vectors."
@@ -161,43 +161,43 @@
         bind:value={selectedModel}
         id="embedding_model"
       />
-    {/if}
-  </div>
-  <Collapse title="Advanced Options">
-    <FormElement
-      label="Embedding Config Name"
-      description="A name to identify this embedding config. Leave blank and we'll generate one for you."
-      optional={true}
-      inputType="input"
-      id="name"
-      bind:value={name}
-    />
-    <FormElement
-      label="Description"
-      description="A description of the embedding config for you and your team. This will have no effect on the embedding config's behavior."
-      optional={true}
-      inputType="textarea"
-      id="description"
-      bind:value={description}
-    />
-
-    {#if selectedModel && selectedModel.supports_custom_dimensions}
+    </div>
+    <Collapse title="Advanced Options">
       <FormElement
-        label="Custom Embedding Dimensions"
-        description="Leave blank to use the default, or set a custom embedding size."
-        info_description="This controls the size of the vector embedding which is generated. Leave blank for the default unless you understand how to tune this."
+        label="Embedding Config Name"
+        description="A name to identify this embedding config. Leave blank and we'll generate one for you."
         optional={true}
-        inputType="input_number"
-        id="custom_dimensions"
-        bind:value={customDimensions}
-        validator={number_validator({
-          min: 1,
-          max: selectedModel.n_dimensions || undefined,
-          integer: true,
-          label: "Custom Dimensions",
-          optional: true,
-        })}
+        inputType="input"
+        id="name"
+        bind:value={name}
       />
-    {/if}
-  </Collapse>
-</FormContainer>
+      <FormElement
+        label="Description"
+        description="A description of the embedding config for you and your team. This will have no effect on the embedding config's behavior."
+        optional={true}
+        inputType="textarea"
+        id="description"
+        bind:value={description}
+      />
+
+      {#if selectedModel && selectedModel.supports_custom_dimensions}
+        <FormElement
+          label="Custom Embedding Dimensions"
+          description="Leave blank to use the default, or set a custom embedding size."
+          info_description="This controls the size of the vector embedding which is generated. Leave blank for the default unless you understand how to tune this."
+          optional={true}
+          inputType="input_number"
+          id="custom_dimensions"
+          bind:value={customDimensions}
+          validator={number_validator({
+            min: 1,
+            max: selectedModel.n_dimensions || undefined,
+            integer: true,
+            label: "Custom Dimensions",
+            optional: true,
+          })}
+        />
+      {/if}
+    </Collapse>
+  </FormContainer>
+{/if}
diff --git a/app/web_ui/src/routes/(app)/docs/rag_configs/[project_id]/create_rag_config/create_extractor_dialog.svelte b/app/web_ui/src/routes/(app)/docs/rag_configs/[project_id]/create_rag_config/create_extractor_dialog.svelte
new file mode 100644
index 000000000..3724023d9
--- /dev/null
+++ b/app/web_ui/src/routes/(app)/docs/rag_configs/[project_id]/create_rag_config/create_extractor_dialog.svelte
@@ -0,0 +1,30 @@
+<script lang="ts">
+  import { createEventDispatcher } from "svelte"
+  import Dialog from "$lib/ui/dialog.svelte"
+  import CreateExtractorForm from "../../../extractors/[project_id]/create_extractor/create_extractor_form.svelte"
+
+  export let dialog: Dialog | null = null
+  export let keyboard_submit: boolean = false
+
+  const dispatch = createEventDispatcher<{
+    success: { extractor_config_id: string }
+    close: void
+  }>()
+</script>
+
+<Dialog
+  bind:this={dialog}
+  title="Extractor Configuration"
+  subtitle="Extractors convert your documents into text."
+  width="wide"
+  on:close={() => {
+    dispatch("close")
+  }}
+>
+  <CreateExtractorForm
+    {keyboard_submit}
+    on:success={(e) => {
+      dispatch("success", { extractor_config_id: e.detail.extractor_config_id })
+    }}
+  />
+</Dialog>
diff --git a/app/web_ui/src/routes/(app)/docs/rag_configs/[project_id]/create_rag_config/create_vector_store_dialog.svelte b/app/web_ui/src/routes/(app)/docs/rag_configs/[project_id]/create_rag_config/create_vector_store_dialog.svelte
new file mode 100644
index 000000000..515924f4f
--- /dev/null
+++ b/app/web_ui/src/routes/(app)/docs/rag_configs/[project_id]/create_rag_config/create_vector_store_dialog.svelte
@@ -0,0 +1,32 @@
+<script lang="ts">
+  import { createEventDispatcher } from "svelte"
+  import Dialog from "$lib/ui/dialog.svelte"
+  import CreateVectorStoreForm from "./create_vector_store_form.svelte"
+
+  export let dialog: Dialog | null = null
+  export let keyboard_submit: boolean = false
+
+  const dispatch = createEventDispatcher<{
+    success: { vector_store_config_id: string }
+    close: void
+  }>()
+</script>
+
+<Dialog
+  bind:this={dialog}
+  title="Search Index Configuration"
+  subtitle="Choose how documents will be indexed and searched."
+  width="wide"
+  on:close={() => {
+    dispatch("close")
+  }}
+>
+  <CreateVectorStoreForm
+    {keyboard_submit}
+    on:success={async (e) => {
+      dispatch("success", {
+        vector_store_config_id: e.detail.vector_store_config_id,
+      })
+    }}
+  />
+</Dialog>
diff --git a/app/web_ui/src/routes/(app)/docs/rag_configs/[project_id]/create_rag_config/edit_rag_config_form.svelte b/app/web_ui/src/routes/(app)/docs/rag_configs/[project_id]/create_rag_config/edit_rag_config_form.svelte
new file mode 100644
index 000000000..09381d064
--- /dev/null
+++ b/app/web_ui/src/routes/(app)/docs/rag_configs/[project_id]/create_rag_config/edit_rag_config_form.svelte
@@ -0,0 +1,728 @@
+<script lang="ts">
+  import { page } from "$app/stores"
+  import { client } from "$lib/api_client"
+  import { createKilnError, type KilnError } from "$lib/utils/error_handlers"
+  import FormElement from "$lib/utils/form_element.svelte"
+  import FormContainer from "$lib/utils/form_container.svelte"
+  import { createEventDispatcher, onMount } from "svelte"
+  import Dialog from "$lib/ui/dialog.svelte"
+  import TagSelector from "./tag_selector.svelte"
+  import type {
+    ExtractorConfig,
+    ChunkerConfig,
+    EmbeddingConfig,
+    VectorStoreConfig,
+  } from "$lib/types"
+  import { load_available_embedding_models } from "$lib/stores"
+  import Collapse from "$lib/ui/collapse.svelte"
+  import {
+    build_rag_config_sub_configs,
+    type RagConfigTemplate,
+  } from "../add_search_tool/rag_config_templates"
+  import { tool_name_validator } from "$lib/utils/input_validators"
+  import posthog from "posthog-js"
+  import { uncache_available_tools } from "$lib/stores"
+  import CreateChunkerDialog from "./create_chunker_dialog.svelte"
+  import CreateEmbeddingDialog from "./create_embedding_dialog.svelte"
+  import CreateVectorStoreDialog from "./create_vector_store_dialog.svelte"
+  import CreateExtractorDialog from "./create_extractor_dialog.svelte"
+  import {
+    build_chunker_options,
+    build_embedding_options,
+    build_extractor_options,
+    build_vector_store_options,
+  } from "./options_groups"
+  import TemplatePropertyOverview from "./template_property_overview.svelte"
+  import type { RagConfigWithSubConfigs } from "$lib/types"
+  import InfoTooltip from "$lib/ui/info_tooltip.svelte"
+
+  const dispatch = createEventDispatcher<{
+    success: { rag_config_id: string }
+  }>()
+
+  $: project_id = $page.params.project_id
+  export let template: RagConfigTemplate | null = null
+  export let initial_rag_config: RagConfigWithSubConfigs | null = null
+  let customize_template_mode = false
+
+  let error: KilnError | null = null
+  const DEFAULT_TOOL_NAME = "search_docs"
+  const DEFAULT_TOOL_DESCRIPTION = "Search documents for knowledge."
+  let tool_name: string = DEFAULT_TOOL_NAME
+  let tool_description: string = DEFAULT_TOOL_DESCRIPTION
+  let name: string | null = null
+  let description: string = ""
+  let selected_tags: string[] = []
+
+  let show_create_extractor_dialog: Dialog | null = null
+  let show_create_chunker_dialog: Dialog | null = null
+  let show_create_embedding_dialog: Dialog | null = null
+  let show_create_vector_store_dialog: Dialog | null = null
+
+  // Selected configs
+  let selected_extractor_config_id: string | null = null
+  let selected_chunker_config_id: string | null = null
+  let selected_embedding_config_id: string | null = null
+  let selected_vector_store_config_id: string | null = null
+
+  // Data for dropdowns
+  let extractor_configs: ExtractorConfig[] = []
+  let chunker_configs: ChunkerConfig[] = []
+  let embedding_configs: EmbeddingConfig[] = []
+  let vector_store_configs: VectorStoreConfig[] = []
+
+  let loading: boolean = false
+  let loading_extractor_configs = false
+  let loading_chunker_configs = false
+  let loading_embedding_configs = false
+  let loading_vector_store_configs = false
+  $: loading_subconfig_options =
+    loading_extractor_configs ||
+    loading_chunker_configs ||
+    loading_embedding_configs ||
+    loading_vector_store_configs
+
+  // track which modal is currently open to disable the keyboard submit for other forms
+  // otherwise keyboard shortcut will submit all the existing forms
+  let modal_opened:
+    | "extractor"
+    | "chunker"
+    | "embedding"
+    | "vector_store"
+    | null = null
+
+  function handle_modal_open(
+    modal_type: "extractor" | "chunker" | "embedding" | "vector_store",
+  ) {
+    modal_opened = modal_type
+  }
+
+  function handle_modal_close() {
+    modal_opened = null
+  }
+
+  // build fancy select options from configs
+  $: extractor_options = build_extractor_options(extractor_configs)
+  $: chunker_options = build_chunker_options(chunker_configs)
+  $: embedding_options = build_embedding_options(embedding_configs)
+  $: vector_store_options = build_vector_store_options(vector_store_configs)
+
+  // show the create extractor dialog when the user clicks the create new extractor button
+  $: if (selected_extractor_config_id === "create_new") {
+    show_create_extractor_dialog?.show()
+    handle_modal_open("extractor")
+  } else {
+    show_create_extractor_dialog?.close()
+  }
+
+  // show the create chunker dialog when the user clicks the create new chunker button
+  $: if (selected_chunker_config_id === "create_new") {
+    show_create_chunker_dialog?.show()
+    handle_modal_open("chunker")
+  } else {
+    show_create_chunker_dialog?.close()
+  }
+
+  // show the create embedding dialog when the user clicks the create new embedding button
+  $: if (selected_embedding_config_id === "create_new") {
+    show_create_embedding_dialog?.show()
+    handle_modal_open("embedding")
+  } else {
+    show_create_embedding_dialog?.close()
+  }
+
+  // show the create vector store dialog when the user clicks the create new vector store button
+  $: if (selected_vector_store_config_id === "create_new") {
+    show_create_vector_store_dialog?.show()
+    handle_modal_open("vector_store")
+  } else {
+    show_create_vector_store_dialog?.close()
+  }
+
+  function fill_out_form_from_rag_config(rag_config: RagConfigWithSubConfigs) {
+    name = rag_config.name
+    description = rag_config.description || ""
+    tool_name = rag_config.tool_name
+    tool_description = rag_config.tool_description
+    selected_extractor_config_id = rag_config.extractor_config.id || null
+    selected_chunker_config_id = rag_config.chunker_config.id || null
+    selected_embedding_config_id = rag_config.embedding_config.id || null
+    selected_vector_store_config_id = rag_config.vector_store_config.id || null
+    selected_tags = rag_config.tags || []
+  }
+
+  onMount(async () => {
+    if (initial_rag_config && template) {
+      console.warn(
+        "Cannot have both initial rag config and template. Discarding initial_rag_config.",
+      )
+      initial_rag_config = null
+    }
+
+    await Promise.all([
+      load_available_embedding_models(),
+      loadExtractorConfigs(),
+      loadChunkerConfigs(),
+      loadEmbeddingConfigs(),
+      loadVectorStoreConfigs(),
+    ])
+
+    if (initial_rag_config) {
+      fill_out_form_from_rag_config(initial_rag_config)
+    }
+  })
+
+  async function loadExtractorConfigs() {
+    try {
+      loading_extractor_configs = true
+      const { data, error: fetch_error } = await client.GET(
+        "/api/projects/{project_id}/extractor_configs",
+        {
+          params: {
+            path: {
+              project_id,
+            },
+          },
+        },
+      )
+
+      if (fetch_error) {
+        throw fetch_error
+      }
+
+      extractor_configs = data || []
+    } catch (e) {
+      error = createKilnError(e)
+    } finally {
+      loading_extractor_configs = false
+    }
+  }
+
+  async function loadChunkerConfigs() {
+    try {
+      loading_chunker_configs = true
+      const { data, error: fetch_error } = await client.GET(
+        "/api/projects/{project_id}/chunker_configs",
+        {
+          params: {
+            path: {
+              project_id,
+            },
+          },
+        },
+      )
+
+      if (fetch_error) {
+        throw fetch_error
+      }
+
+      chunker_configs = data || []
+    } catch (e) {
+      error = createKilnError(e)
+    } finally {
+      loading_chunker_configs = false
+    }
+  }
+
+  async function loadEmbeddingConfigs() {
+    try {
+      loading_embedding_configs = true
+      const { data, error: fetch_error } = await client.GET(
+        "/api/projects/{project_id}/embedding_configs",
+        {
+          params: {
+            path: {
+              project_id,
+            },
+          },
+        },
+      )
+
+      if (fetch_error) {
+        throw fetch_error
+      }
+
+      embedding_configs = data || []
+    } catch (e) {
+      error = createKilnError(e)
+    } finally {
+      loading_embedding_configs = false
+    }
+  }
+
+  async function loadVectorStoreConfigs() {
+    try {
+      loading_vector_store_configs = true
+      const { data, error: fetch_error } = await client.GET(
+        "/api/projects/{project_id}/vector_store_configs",
+        {
+          params: {
+            path: {
+              project_id,
+            },
+          },
+        },
+      )
+
+      if (fetch_error) {
+        throw fetch_error
+      }
+
+      vector_store_configs = data || []
+    } catch (e) {
+      error = createKilnError(e)
+    } finally {
+      loading_vector_store_configs = false
+    }
+  }
+
+  /**
+   * Save the rag config from the full form
+   */
+  async function create_rag_config() {
+    try {
+      loading = true
+      error = null
+
+      // Validate that all required configs are selected
+      if (
+        !selected_extractor_config_id ||
+        selected_extractor_config_id === "create_new"
+      ) {
+        throw new Error("Please select an extractor configuration.")
+      }
+
+      if (
+        !selected_chunker_config_id ||
+        selected_chunker_config_id === "create_new"
+      ) {
+        throw new Error("Please select a chunker configuration.")
+      }
+
+      if (
+        !selected_embedding_config_id ||
+        selected_embedding_config_id === "create_new"
+      ) {
+        throw new Error("Please select an embedding configuration.")
+      }
+
+      if (
+        !selected_vector_store_config_id ||
+        selected_vector_store_config_id === "create_new"
+      ) {
+        throw new Error("Please select a search index configuration.")
+      }
+
+      const { data: create_rag_config_res, error: create_error } =
+        await client.POST(
+          "/api/projects/{project_id}/rag_configs/create_rag_config",
+          {
+            params: {
+              path: {
+                project_id,
+              },
+            },
+            body: {
+              name: name || null,
+              description: description || null,
+              tool_name: tool_name,
+              tool_description: tool_description,
+              extractor_config_id: selected_extractor_config_id,
+              chunker_config_id: selected_chunker_config_id,
+              embedding_config_id: selected_embedding_config_id,
+              vector_store_config_id: selected_vector_store_config_id,
+              tags: selected_tags.length > 0 ? selected_tags : null,
+            },
+          },
+        )
+
+      if (create_error) {
+        throw create_error
+      }
+
+      if (!create_rag_config_res?.id) {
+        throw new Error("Failed to create RAG config: missing id")
+      }
+
+      let extractor_model: string | undefined = undefined
+      let chunker_type: "fixed_window" | "semantic" | undefined = undefined
+      let chunker_size: unknown = undefined
+      let chunker_overlap: unknown = undefined
+      let embedding_model: string | undefined = undefined
+      let vector_store_type: string | undefined = undefined
+      try {
+        extractor_model = extractor_configs.find(
+          (config) => config.id === selected_extractor_config_id,
+        )?.model_name
+        chunker_type = chunker_configs.find(
+          (config) => config.id === selected_chunker_config_id,
+        )?.chunker_type
+        chunker_size = chunker_configs.find(
+          (config) => config.id === selected_chunker_config_id,
+        )?.properties.chunk_size
+        chunker_overlap = chunker_configs.find(
+          (config) => config.id === selected_chunker_config_id,
+        )?.properties.chunk_overlap
+        embedding_model = embedding_configs.find(
+          (config) => config.id === selected_embedding_config_id,
+        )?.model_name
+        vector_store_type = vector_store_configs.find(
+          (config) => config.id === selected_vector_store_config_id,
+        )?.store_type
+      } catch (e) {
+        console.error(e)
+      }
+      posthog.capture("create_custom_rag_config", {
+        tag_filter: selected_tags.length > 0,
+        custom_name: tool_name !== DEFAULT_TOOL_NAME,
+        custom_description: tool_description !== DEFAULT_TOOL_DESCRIPTION,
+        extractor_model: extractor_model,
+        chunker_type: chunker_type,
+        chunker_size: chunker_size,
+        chunker_overlap: chunker_overlap,
+        embedding_model: embedding_model,
+        vector_store_type: vector_store_type,
+      })
+
+      uncache_available_tools(project_id)
+
+      dispatch("success", { rag_config_id: create_rag_config_res.id })
+    } catch (err) {
+      error = createKilnError(err)
+      return
+    } finally {
+      loading = false
+    }
+  }
+
+  /**
+   * Fill out the full form from the template
+   */
+  async function customize_template() {
+    if (!template) {
+      return
+    }
+    try {
+      loading = true
+      // Fetch or build the sub configs
+      const {
+        extractor_config_id,
+        chunker_config_id,
+        embedding_config_id,
+        vector_store_config_id,
+      } = await build_rag_config_sub_configs(
+        template,
+        project_id,
+        extractor_configs,
+        chunker_configs,
+        embedding_configs,
+        vector_store_configs,
+      )
+      // Reload the configs, new ones may have been created in above step
+      await Promise.all([
+        loadExtractorConfigs(),
+        loadChunkerConfigs(),
+        loadEmbeddingConfigs(),
+        loadVectorStoreConfigs(),
+      ])
+      // Update the UI with the new configs
+      selected_extractor_config_id = extractor_config_id
+      selected_chunker_config_id = chunker_config_id
+      selected_embedding_config_id = embedding_config_id
+      selected_vector_store_config_id = vector_store_config_id
+      // Don't render the template anymore, let them customize it
+      customize_template_mode = true
+    } catch (err) {
+      error = createKilnError("Error customizing template: " + err)
+      return
+    } finally {
+      loading = false
+    }
+  }
+
+  /**
+   * Save all the subconfigs and then create the rag config from the template
+   */
+  async function save_template() {
+    if (!template) {
+      return
+    }
+
+    try {
+      loading = true
+
+      // Fetch or build the sub configs
+      const {
+        extractor_config_id,
+        chunker_config_id,
+        embedding_config_id,
+        vector_store_config_id,
+      } = await build_rag_config_sub_configs(
+        template,
+        project_id,
+        extractor_configs,
+        chunker_configs,
+        embedding_configs,
+        vector_store_configs,
+      )
+
+      // Save the rag config
+      const { data: create_rag_config_res, error: create_error } =
+        await client.POST(
+          "/api/projects/{project_id}/rag_configs/create_rag_config",
+          {
+            params: {
+              path: {
+                project_id,
+              },
+            },
+            body: {
+              name: template.rag_config_name,
+              tool_name: tool_name,
+              tool_description: tool_description,
+              extractor_config_id,
+              chunker_config_id,
+              embedding_config_id,
+              vector_store_config_id,
+              tags: selected_tags.length > 0 ? selected_tags : null,
+            },
+          },
+        )
+
+      if (create_error) {
+        throw create_error
+      }
+
+      if (!create_rag_config_res?.id) {
+        throw new Error("Failed to create RAG config: missing id")
+      }
+
+      posthog.capture("create_rag_config_from_template", {
+        template_name: template.name,
+        tag_filter: selected_tags.length > 0,
+        custom_name: tool_name !== DEFAULT_TOOL_NAME,
+        custom_description: tool_description !== DEFAULT_TOOL_DESCRIPTION,
+      })
+
+      uncache_available_tools(project_id)
+
+      dispatch("success", { rag_config_id: create_rag_config_res.id })
+    } catch (err) {
+      error = createKilnError(err)
+      return
+    } finally {
+      loading = false
+    }
+  }
+</script>
+
+{#if loading || loading_subconfig_options}
+  <div class="w-full min-h-[50vh] flex justify-center items-center">
+    <div class="loading loading-spinner loading-lg"></div>
+  </div>
+{:else}
+  <FormContainer
+    submit_visible={true}
+    submit_label="Create Search Tool"
+    on:submit={async () => {
+      if (template && !customize_template_mode) {
+        await save_template()
+      } else {
+        await create_rag_config()
+      }
+    }}
+    {error}
+    gap={4}
+    bind:submitting={loading}
+    keyboard_submit={!modal_opened}
+  >
+    <!-- Search Tool Properties -->
+    <div class="text-xl font-bold">Part 1: Tool Properties</div>
+    <FormElement
+      label="Search Tool Name"
+      description="A unique short tool name such as 'knowledge_base_search'. Be descriptive about what data this tool can search."
+      info_description="Must be in snake_case format. It should be descriptive of what the tool does as the model will see it. When adding multiple tools to a task each tool needs a unique name, so being unique and descriptive is important."
+      inputType="input"
+      id="tool_name"
+      bind:value={tool_name}
+      validator={tool_name_validator}
+    />
+    <FormElement
+      label="Search Tool Description"
+      description="A description for the model to understand what this tool can do, and when to use it. Include a description of what data this tool can search."
+      info_description="It should be descriptive of what the tool does as the model will see it. Example of a high quality description: 'Search the customer facing help docs for information about the product.'"
+      inputType="textarea"
+      id="tool_description"
+      max_length={128}
+      bind:value={tool_description}
+    />
+
+    <!-- Tag Selection -->
+    <div class="flex flex-col gap-2">
+      <TagSelector
+        {project_id}
+        bind:selected_tags
+        on:change={(e) => (selected_tags = e.detail.selected_tags)}
+      />
+    </div>
+
+    <div>
+      <div class="text-xl font-bold mt-4">Part 2: Search Configuration</div>
+      <div class="text-xs text-gray-500 font-medium">
+        This configuration controls how the search tool will extract, index, and
+        search your documents.
+        {#if template && !customize_template_mode}
+          <InfoTooltip
+            no_pad={true}
+            tooltip_text="You selected a pre-configured search tool with these parameters."
+          />
+        {/if}
+      </div>
+    </div>
+
+    {#if template && !customize_template_mode}
+      <TemplatePropertyOverview
+        {template}
+        on:customize_template={customize_template}
+      />
+    {:else}
+      <div class="flex flex-col gap-6">
+        <!-- Extractor Selection -->
+        <div class="flex flex-col gap-2">
+          <FormElement
+            id="extractor_select"
+            label="Extractor"
+            description="Extractors convert your documents into text."
+            info_description="Documents like PDFs, images and videos need to be converted into text so they can be searched and read by models."
+            fancy_select_options={extractor_options}
+            bind:value={selected_extractor_config_id}
+            inputType="fancy_select"
+          />
+        </div>
+
+        <!-- Chunker Selection -->
+        <div class="flex flex-col gap-2">
+          <FormElement
+            id="chunker_select"
+            label="Chunker"
+            description="Split document text into smaller chunks for search."
+            info_description="Splitting long documents into smaller chunks allows search to find relevant information."
+            fancy_select_options={chunker_options}
+            bind:value={selected_chunker_config_id}
+            inputType="fancy_select"
+          />
+        </div>
+
+        <!-- Embedding Selection -->
+        <div class="flex flex-col gap-2">
+          <FormElement
+            id="embedding_select"
+            label="Embedding Model"
+            description="Embedding models convert document chunks into vectors for similarity search."
+            info_description="Embedding models are a type of AI model which create searchable vectors from your chunks."
+            fancy_select_options={embedding_options}
+            bind:value={selected_embedding_config_id}
+            inputType="fancy_select"
+          />
+        </div>
+
+        <!-- Vector Store Selection -->
+        <div class="flex flex-col gap-2">
+          <FormElement
+            id="vector_store_select"
+            label="Search Index"
+            description="Choose how documents will be indexed and searched."
+            info_description="Full text search is fastest for keyword searches, vector search is best for semantic meaning, and hybrid combines both approaches."
+            fancy_select_options={vector_store_options}
+            bind:value={selected_vector_store_config_id}
+            inputType="fancy_select"
+          />
+        </div>
+      </div>
+
+      <!-- Advanced -->
+      <Collapse title="Advanced Options">
+        <FormElement
+          label="Reference Name"
+          description="A search tool name for your reference, not seen by the model. Leave blank and we'll generate one for you."
+          optional={true}
+          inputType="input"
+          id="rag_config_name"
+          bind:value={name}
+        />
+        <FormElement
+          label="Reference Description"
+          description="A description of the search tool for your reference, not seen by the model."
+          optional={true}
+          inputType="textarea"
+          id="rag_config_description"
+          bind:value={description}
+        />
+      </Collapse>
+    {/if}
+  </FormContainer>
+{/if}
+
+<CreateExtractorDialog
+  bind:dialog={show_create_extractor_dialog}
+  keyboard_submit={modal_opened === "extractor"}
+  on:success={async (e) => {
+    await loadExtractorConfigs()
+    selected_extractor_config_id = e.detail.extractor_config_id
+  }}
+  on:close={() => {
+    handle_modal_close()
+    if (selected_extractor_config_id === "create_new") {
+      selected_extractor_config_id = null
+    }
+    show_create_extractor_dialog?.close()
+  }}
+/>
+
+<CreateChunkerDialog
+  bind:dialog={show_create_chunker_dialog}
+  keyboard_submit={modal_opened === "chunker"}
+  on:success={async (e) => {
+    await loadChunkerConfigs()
+    selected_chunker_config_id = e.detail.chunker_config_id
+  }}
+  on:close={() => {
+    handle_modal_close()
+    if (selected_chunker_config_id === "create_new") {
+      selected_chunker_config_id = null
+    }
+    show_create_chunker_dialog?.close()
+  }}
+/>
+
+<CreateEmbeddingDialog
+  bind:dialog={show_create_embedding_dialog}
+  keyboard_submit={modal_opened === "embedding"}
+  on:success={async (e) => {
+    await loadEmbeddingConfigs()
+    selected_embedding_config_id = e.detail.embedding_config_id
+  }}
+  on:close={() => {
+    handle_modal_close()
+    if (selected_embedding_config_id === "create_new") {
+      selected_embedding_config_id = null
+    }
+    show_create_embedding_dialog?.close()
+  }}
+/>
+
+<CreateVectorStoreDialog
+  bind:dialog={show_create_vector_store_dialog}
+  keyboard_submit={modal_opened === "vector_store"}
+  on:success={async (e) => {
+    await loadVectorStoreConfigs()
+    selected_vector_store_config_id = e.detail.vector_store_config_id
+  }}
+  on:close={() => {
+    handle_modal_close()
+    if (selected_vector_store_config_id === "create_new") {
+      selected_vector_store_config_id = null
+    }
+    show_create_vector_store_dialog?.close()
+  }}
+/>
diff --git a/app/web_ui/src/routes/(app)/docs/rag_configs/[project_id]/create_rag_config/options_groups.ts b/app/web_ui/src/routes/(app)/docs/rag_configs/[project_id]/create_rag_config/options_groups.ts
new file mode 100644
index 000000000..9f0707633
--- /dev/null
+++ b/app/web_ui/src/routes/(app)/docs/rag_configs/[project_id]/create_rag_config/options_groups.ts
@@ -0,0 +1,168 @@
+import {
+  embedding_model_name,
+  get_model_friendly_name,
+  provider_name_from_id,
+} from "$lib/stores"
+import type {
+  ChunkerConfig,
+  EmbeddingConfig,
+  ExtractorConfig,
+  VectorStoreConfig,
+} from "$lib/types"
+import type { OptionGroup } from "$lib/ui/fancy_select_types"
+import {
+  extractor_output_format,
+  format_chunker_config_overview,
+} from "$lib/utils/formatters"
+
+function fmt_extractor_label(extractor: ExtractorConfig) {
+  return `${get_model_friendly_name(extractor.model_name)} (${provider_name_from_id(extractor.model_provider_name)}) • ${extractor_output_format(extractor.output_format)}`
+}
+
+export function build_extractor_options(extractor_configs: ExtractorConfig[]) {
+  return [
+    {
+      options: [
+        {
+          label: "New Extractor Configuration",
+          value: "create_new",
+          badge: "New",
+          badge_color: "primary",
+        },
+      ],
+    },
+    ...(extractor_configs.length > 0
+      ? [
+          {
+            label: "Extractors",
+            options: extractor_configs
+              .filter((config) => !config.is_archived)
+              .map((config) => ({
+                label: fmt_extractor_label(config),
+                value: config.id,
+                description:
+                  config.name +
+                  (config.description ? " - " + config.description : ""),
+              })),
+          },
+        ]
+      : []),
+  ] as OptionGroup[]
+}
+
+export function build_chunker_options(chunker_configs: ChunkerConfig[]) {
+  return [
+    {
+      options: [
+        {
+          label: "New Chunker Configuration",
+          value: "create_new",
+          badge: "New",
+          badge_color: "primary",
+        },
+      ],
+    },
+    ...(chunker_configs.length > 0
+      ? [
+          {
+            label: "Chunkers",
+            options: chunker_configs.map((config) => {
+              return {
+                label: format_chunker_config_overview(config),
+                value: config.id,
+                description:
+                  config.name +
+                  (config.description ? ` • ${config.description}` : ""),
+              }
+            }),
+          },
+        ]
+      : []),
+  ] as OptionGroup[]
+}
+
+function fmt_embedding_label(config: EmbeddingConfig) {
+  return (
+    `${embedding_model_name(config.model_name, config.model_provider_name)} (${provider_name_from_id(config.model_provider_name)})` +
+    (config.properties?.dimensions
+      ? `• ${config.properties?.dimensions} dimensions`
+      : "")
+  )
+}
+
+export function build_embedding_options(embedding_configs: EmbeddingConfig[]) {
+  return [
+    {
+      options: [
+        {
+          label: "New Embedding Configuration",
+          value: "create_new",
+          badge: "New",
+          badge_color: "primary",
+        },
+      ],
+    },
+    ...(embedding_configs.length > 0
+      ? [
+          {
+            label: "Embedding Models",
+            options: embedding_configs.map((config) => ({
+              label: fmt_embedding_label(config),
+              value: config.id,
+              description:
+                config.name +
+                (config.description ? " • " + config.description : ""),
+            })),
+          },
+        ]
+      : []),
+  ] as OptionGroup[]
+}
+
+function fmt_vector_store_label(config: VectorStoreConfig) {
+  switch (config.store_type) {
+    case "lancedb_fts":
+      return "Full Text Search"
+    case "lancedb_vector":
+      return "Vector Search"
+    case "lancedb_hybrid":
+      return "Hybrid Search"
+    default: {
+      // type check will catch missing cases
+      const unknownVectorStoreType: never = config.store_type
+      console.error(`Invalid vector store type: ${unknownVectorStoreType}`)
+      return "unknown"
+    }
+  }
+}
+
+export function build_vector_store_options(
+  vector_store_configs: VectorStoreConfig[],
+) {
+  return [
+    {
+      options: [
+        {
+          label: "New Search Index Configuration",
+          value: "create_new",
+          badge: "New",
+          badge_color: "primary",
+        },
+      ],
+    },
+    ...(vector_store_configs.length > 0
+      ? [
+          {
+            label: "Search Index Configurations",
+            options: vector_store_configs.map((config) => ({
+              label: fmt_vector_store_label(config),
+              value: config.id,
+              description:
+                config.name +
+                ` • ${config.properties.similarity_top_k ?? 10} results`,
+            })),
+          },
+        ]
+      : []),
+  ] as OptionGroup[]
+}
diff --git a/app/web_ui/src/routes/(app)/docs/rag_configs/[project_id]/create_rag_config/template_property_overview.svelte b/app/web_ui/src/routes/(app)/docs/rag_configs/[project_id]/create_rag_config/template_property_overview.svelte
new file mode 100644
index 000000000..a3978e4c1
--- /dev/null
+++ b/app/web_ui/src/routes/(app)/docs/rag_configs/[project_id]/create_rag_config/template_property_overview.svelte
@@ -0,0 +1,66 @@
+<script lang="ts">
+  import { createEventDispatcher } from "svelte"
+  import { type RagConfigTemplate } from "../add_search_tool/rag_config_templates"
+  import PropertyList from "$lib/ui/property_list.svelte"
+
+  const dispatch = createEventDispatcher<{
+    customize_template: { template: RagConfigTemplate }
+  }>()
+
+  export let template: RagConfigTemplate
+</script>
+
+<div class="flex flex-col">
+  <div class="mb-8">
+    <PropertyList
+      properties={[
+        { name: "Template Name", value: template.name },
+        {
+          name: "Extractor Model",
+          value: template.extractor.description,
+          tooltip:
+            "The model used to extract text from your documents (PDFs, images, videos, etc).",
+        },
+        {
+          name: "Chunking Strategy",
+          value: template.chunker.description,
+          tooltip:
+            "Parameters for splitting larger documents into smaller chunks for search.",
+        },
+        {
+          name: "Embedding Model",
+          value: template.embedding.description,
+          tooltip:
+            "The model used to convert text chunks into vectors for similarity search.",
+        },
+        {
+          name: "Search Index",
+          value: template.vector_store.description,
+          tooltip:
+            "How documents will be indexed and searched. Vector = semantic similarity, Full-Text = keyword search, Hybrid = both",
+        },
+        ...(template.notice_text
+          ? [
+              {
+                name: "Note",
+                value: template.notice_text,
+                warn_icon: true,
+                tooltip: template.notice_tooltip,
+              },
+            ]
+          : []),
+      ]}
+    />
+    <div class="flex flex-row items-center gap-2 mt-4">
+      <button
+        class="btn btn-sm px-6"
+        on:click={() => {
+          dispatch("customize_template", { template })
+        }}
+      >
+        Customize Configuration
+      </button>
+      <div class="badge badge-sm badge-outline">Advanced</div>
+    </div>
+  </div>
+</div>
diff --git a/app/web_ui/src/routes/(app)/docs/rag_configs/[project_id]/table_rag_config_row.svelte b/app/web_ui/src/routes/(app)/docs/rag_configs/[project_id]/table_rag_config_row.svelte
index f4a9a1d5f..8f48750f3 100644
--- a/app/web_ui/src/routes/(app)/docs/rag_configs/[project_id]/table_rag_config_row.svelte
+++ b/app/web_ui/src/routes/(app)/docs/rag_configs/[project_id]/table_rag_config_row.svelte
@@ -13,6 +13,7 @@
     type RagConfigurationStatus,
   } from "$lib/stores/rag_progress_store"
   import { goto } from "$app/navigation"
+  import { format_chunker_config_overview } from "$lib/utils/formatters"
 
   $: projectStateStore = getProjectRagStateStore(project_id)
   $: ragProgressState = $projectStateStore
@@ -80,21 +81,6 @@
   function open() {
     goto(`/docs/rag_configs/${project_id}/${rag_config.id}/rag_config`)
   }
-
-  $: chunk_size = rag_config.chunker_config.properties.chunk_size
-  $: chunk_overlap = rag_config.chunker_config.properties.chunk_overlap
-
-  function format_chunking(chunk_size: unknown, chunk_overlap: unknown) {
-    // we expect a non-nullable number for both, but we validate because we
-    // do not have typing on the properties object
-    const is_chunk_size_valid = typeof chunk_size === "number"
-    const is_chunk_overlap_valid = typeof chunk_overlap === "number"
-    if (!is_chunk_size_valid || !is_chunk_overlap_valid) {
-      return "Invalid chunk size or overlap, not a number"
-    }
-
-    return `${chunk_size} words, ${chunk_overlap} overlap`
-  }
 </script>
 
 {#if rag_progress && rag_config}
@@ -121,7 +107,9 @@
             ) || ""})
           </div>
           <div>
-            Chunking: {format_chunking(chunk_size, chunk_overlap) || "N/A"}
+            Chunking: {format_chunker_config_overview(
+              rag_config.chunker_config,
+            )}
           </div>
           <div>
             Embedding: {embedding_model_name(