diff --git a/packages/builder/src/pages/builder/portal/settings/ai/ConfigModal.svelte b/packages/builder/src/pages/builder/portal/settings/ai/ConfigModal.svelte
new file mode 100644
index 0000000000..408e71bd1f
--- /dev/null
+++ b/packages/builder/src/pages/builder/portal/settings/ai/ConfigModal.svelte
@@ -0,0 +1,81 @@
+<script>
+  import {
+    ModalContent,
+    Label,
+    Input,
+    Select,
+    Toggle,
+    Dropzone,
+    Body,
+    notifications,
+  } from "@budibase/bbui"
+  import KeyValueBuilder from "components/integration/KeyValueBuilder.svelte"
+  import { plugins } from "stores/portal"
+  import { PluginSource } from "constants"
+
+  const options = [
+    "OpenAI",
+    "Anthropic",
+    "Together AI",
+    "Azure Open AI",
+    "Custom"
+  ]
+
+  let source = PluginSource.GITHUB
+  let dynamicValues = {}
+
+  let name
+  let baseUrl
+  let apiKey
+  let active
+  let isDefault
+
+  let validation
+</script>
+
+<ModalContent
+    confirmText={"Save"}
+    onConfirm={() => {}}
+    disabled={!validation}
+    size="M"
+    title="Custom AI Configuration"
+>
+  <div class="form-row">
+    <Label size="M">Provider</Label>
+    <Select
+        placeholder={null}
+        bind:value={source}
+        options={options}
+    />
+  </div>
+  <div class="form-row">
+    <Label size="M">Model</Label>
+    <Select
+        placeholder={null}
+        bind:value={source}
+        options={Object.values(PluginSource)}
+    />
+  </div>
+  <div class="form-row">
+    <Label size="M">Name</Label>
+    <Input placeholder={"Test 1"} bind:value={name} />
+  </div>
+  <div class="form-row">
+    <Label size="M">Base URL</Label>
+    <Input placeholder={"www.google.com"} bind:value={baseUrl} />
+  </div>
+  <div class="form-row">
+    <Label size="M">API Key</Label>
+    <Input bind:value={apiKey} />
+  </div>
+  <Toggle text="Active" bind:value={active} />
+  <Toggle text="Set as default" bind:value={isDefault} />
+</ModalContent>
+
+<style>
+    .form-row {
+        display: grid;
+        grid-gap: var(--spacing-s);
+        align-items: center;
+    }
+</style>
diff --git a/packages/builder/src/pages/builder/portal/settings/ai/index.svelte b/packages/builder/src/pages/builder/portal/settings/ai/index.svelte
new file mode 100644
index 0000000000..e40a6cf4ff
--- /dev/null
+++ b/packages/builder/src/pages/builder/portal/settings/ai/index.svelte
@@ -0,0 +1,74 @@
+<script>
+  import {
+    Button,
+    Layout,
+    Heading,
+    Body,
+    Helpers,
+    Divider,
+    notifications,
+    Modal,
+    ModalContent,
+  } from "@budibase/bbui"
+  import { auth, admin } from "stores/portal"
+  import { redirect } from "@roxi/routify"
+  import { API } from "api"
+  import AIConfigModal from "./ConfigModal.svelte"
+  import { onMount } from "svelte"
+  import { sdk } from "@budibase/shared-core"
+
+  let diagnosticInfo = ""
+  let modal
+
+  // async function fetchSystemDebugInfo() {
+  //   const diagnostics = await API.fetchSystemDebugInfo()
+  //   diagnosticInfo = {
+  //     browser: {
+  //       language: navigator.language || navigator.userLanguage,
+  //       userAgent: navigator.userAgent,
+  //       platform: navigator.platform,
+  //       vendor: navigator.vendor,
+  //     },
+  //     server: diagnostics,
+  //   }
+  // }
+  //
+  // const copyToClipboard = async () => {
+  //   await Helpers.copyToClipboard(JSON.stringify(diagnosticInfo, undefined, 2))
+  //   notifications.success("Copied")
+  // }
+
+  onMount(async () => {
+    // await fetchSystemDebugInfo()
+  })
+</script>
+
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+
+<Modal bind:this={modal}>
+  <AIConfigModal />
+</Modal>
+<Layout noPadding>
+  <Layout gap="XS" noPadding>
+    <Heading size="M">AI</Heading>
+    <Body>Configure your AI settings within this section:</Body>
+  </Layout>
+  <Divider />
+  <Layout noPadding>
+    <div class="config-heading">
+      <Heading size="S">AI Configurations</Heading>
+      <Button size="S" cta on:click={modal.show}>Add configuration</Button>
+    </div>
+    <Body size="S">Use the following interface to select your preferred AI configuration.</Body>
+    <Body size="S">Select your AI Model:</Body>
+  </Layout>
+</Layout>
+
+<style>
+  .config-heading {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+</style>
diff --git a/packages/builder/src/stores/portal/menu.js b/packages/builder/src/stores/portal/menu.js
index c7c71d89bc..ec40f6d4ee 100644
--- a/packages/builder/src/stores/portal/menu.js
+++ b/packages/builder/src/stores/portal/menu.js
@@ -45,6 +45,10 @@ export const menu = derived([admin, auth], ([$admin, $auth]) => {
         title: "Auth",
         href: "/builder/portal/settings/auth",
       },
+      {
+        title: "AI",
+        href: "/builder/portal/settings/ai",
+      },
       {
         title: "Email",
         href: "/builder/portal/settings/email",
