From 2cbe7827fbfafada4484de93697ebd7eac603953 Mon Sep 17 00:00:00 2001
From: Atharva Deosthale <atharva.deosthale17@gmail.com>
Date: Mon, 27 Oct 2025 04:13:42 +0530
Subject: [PATCH 01/16] Revert "Revert "copy prompt""

---
 src/lib/actions/analytics.ts                  |  3 +-
 .../overview/platforms/createAndroid.svelte   |  3 +
 .../overview/platforms/createApple.svelte     |  3 +
 .../overview/platforms/createFlutter.svelte   |  2 +
 .../platforms/createReactNative.svelte        |  3 +
 .../overview/platforms/createWeb.svelte       | 26 ++++-
 .../overview/platforms/llmBanner.svelte       | 48 ++++++++++
 .../overview/platforms/store.ts               | 96 +++++++++++++++++++
 8 files changed, 182 insertions(+), 2 deletions(-)
 create mode 100644 src/routes/(console)/project-[region]-[project]/overview/platforms/llmBanner.svelte

diff --git a/src/lib/actions/analytics.ts b/src/lib/actions/analytics.ts
index b511e59c8d..44cd6ec680 100644
--- a/src/lib/actions/analytics.ts
+++ b/src/lib/actions/analytics.ts
@@ -195,7 +195,8 @@ export enum Click {
     VariablesCreateClick = 'click_variable_create',
     VariablesUpdateClick = 'click_variable_update',
     VariablesImportClick = 'click_variable_import',
-    WebsiteOpenClick = 'click_open_website'
+    WebsiteOpenClick = 'click_open_website',
+    CopyPromptStarterKitClick = 'click_copy_prompt_starter_kit'
 }
 
 export enum Submit {
diff --git a/src/routes/(console)/project-[region]-[project]/overview/platforms/createAndroid.svelte b/src/routes/(console)/project-[region]-[project]/overview/platforms/createAndroid.svelte
index 4259e6eecf..7add3d0708 100644
--- a/src/routes/(console)/project-[region]-[project]/overview/platforms/createAndroid.svelte
+++ b/src/routes/(console)/project-[region]-[project]/overview/platforms/createAndroid.svelte
@@ -26,6 +26,7 @@
     import { PlatformType } from '@appwrite.io/console';
     import { project } from '../../store';
     import { getCorrectTitle, type PlatformProps } from './store';
+    import LlmBanner from './llmBanner.svelte';
 
     let { isConnectPlatform = false }: PlatformProps = $props();
 
@@ -172,6 +173,8 @@ const val APPWRITE_PUBLIC_ENDPOINT = "${sdk.forProject(page.params.region, page.
         {#if isPlatformCreated}
             <Fieldset legend="Clone starter" badge="Optional">
                 <Layout.Stack gap="l">
+                    <LlmBanner platform="android" {configCode} />
+
                     <Typography.Text variant="m-500">
                         1. If you're starting a new project, you can clone our starter kit from
                         GitHub using the terminal, VSCode or Android Studio.
diff --git a/src/routes/(console)/project-[region]-[project]/overview/platforms/createApple.svelte b/src/routes/(console)/project-[region]-[project]/overview/platforms/createApple.svelte
index ff672f6110..9f2cbf1a70 100644
--- a/src/routes/(console)/project-[region]-[project]/overview/platforms/createApple.svelte
+++ b/src/routes/(console)/project-[region]-[project]/overview/platforms/createApple.svelte
@@ -28,6 +28,7 @@
     import { app } from '$lib/stores/app';
     import { project } from '../../store';
     import { getCorrectTitle, type PlatformProps } from './store';
+    import LlmBanner from './llmBanner.svelte';
 
     let { isConnectPlatform = false, platform = PlatformType.Appleios }: PlatformProps = $props();
 
@@ -200,6 +201,8 @@ APPWRITE_PUBLIC_ENDPOINT: "${sdk.forProject(page.params.region, page.params.proj
         {#if isPlatformCreated}
             <Fieldset legend="Clone starter" badge="Optional">
                 <Layout.Stack gap="l">
+                    <LlmBanner platform="apple" {configCode} />
+
                     <Typography.Text variant="m-500">
                         1. If you're starting a new project, you can clone our starter kit from
                         GitHub using the terminal or XCode.
diff --git a/src/routes/(console)/project-[region]-[project]/overview/platforms/createFlutter.svelte b/src/routes/(console)/project-[region]-[project]/overview/platforms/createFlutter.svelte
index f04ed60e3a..0117e5f044 100644
--- a/src/routes/(console)/project-[region]-[project]/overview/platforms/createFlutter.svelte
+++ b/src/routes/(console)/project-[region]-[project]/overview/platforms/createFlutter.svelte
@@ -27,6 +27,7 @@
     import { PlatformType } from '@appwrite.io/console';
     import { project } from '../../store';
     import { getCorrectTitle, type PlatformProps } from './store';
+    import LlmBanner from './llmBanner.svelte';
 
     let { isConnectPlatform = false, platform = PlatformType.Flutterandroid }: PlatformProps =
         $props();
@@ -282,6 +283,7 @@
         {#if isPlatformCreated}
             <Fieldset legend="Clone starter" badge="Optional">
                 <Layout.Stack gap="l">
+                    <LlmBanner platform="flutter" {configCode} />
                     <Typography.Text variant="m-500">
                         1. If you're starting a new project, you can clone our starter kit from
                         GitHub using the terminal, VSCode or Android Studio.
diff --git a/src/routes/(console)/project-[region]-[project]/overview/platforms/createReactNative.svelte b/src/routes/(console)/project-[region]-[project]/overview/platforms/createReactNative.svelte
index cd5f35eab2..bc1d56184d 100644
--- a/src/routes/(console)/project-[region]-[project]/overview/platforms/createReactNative.svelte
+++ b/src/routes/(console)/project-[region]-[project]/overview/platforms/createReactNative.svelte
@@ -27,6 +27,7 @@
     import { PlatformType } from '@appwrite.io/console';
     import { project } from '../../store';
     import { getCorrectTitle, type PlatformProps } from './store';
+    import LlmBanner from './llmBanner.svelte';
 
     let { isConnectPlatform = false, platform = PlatformType.Reactnativeandroid }: PlatformProps =
         $props();
@@ -226,6 +227,8 @@ EXPO_PUBLIC_APPWRITE_ENDPOINT=${sdk.forProject(page.params.region, page.params.p
         {#if isPlatformCreated}
             <Fieldset legend="Clone starter" badge="Optional">
                 <Layout.Stack gap="l">
+                    <LlmBanner platform="reactnative" configCode={updateConfigCode} />
+
                     <Typography.Text variant="m-500">
                         1. If you're starting a new project, you can clone our starter kit from
                         GitHub using the terminal or VSCode.
diff --git a/src/routes/(console)/project-[region]-[project]/overview/platforms/createWeb.svelte b/src/routes/(console)/project-[region]-[project]/overview/platforms/createWeb.svelte
index 681abc97b0..2521326fce 100644
--- a/src/routes/(console)/project-[region]-[project]/overview/platforms/createWeb.svelte
+++ b/src/routes/(console)/project-[region]-[project]/overview/platforms/createWeb.svelte
@@ -48,7 +48,13 @@
     } from './components/index';
     import { extendedHostnameRegex } from '$lib/helpers/string';
     import { project } from '../../store';
-    import { type PlatformProps, type FrameworkType, getCorrectTitle } from './store';
+    import {
+        type PlatformProps,
+        type FrameworkType,
+        type LLMPromptConfig,
+        getCorrectTitle
+    } from './store';
+    import LlmBanner from './llmBanner.svelte';
 
     let { key, isConnectPlatform = false, platform = PlatformType.Web }: PlatformProps = $props();
 
@@ -157,6 +163,22 @@ ${prefix}APPWRITE_ENDPOINT = "${sdk.forProject(page.params.region, page.params.p
         selectedFramework ? selectedFramework.icon : NoFrameworkIcon
     );
 
+    const llmConfig: LLMPromptConfig = $derived({
+        title: `Copy prompt: starter kit for Appwrite in ${selectedFramework?.label || 'Web'}`,
+        cloneCommand: `git clone https://github.com/appwrite/starter-for-${selectedFramework?.key}\ncd starter-for-${selectedFramework?.key}`,
+        configFile:
+            selectedFramework?.key === 'angular'
+                ? 'src/environments/environment.ts'
+                : '.env.example',
+        configCode:
+            selectedFramework?.key === 'angular'
+                ? `APPWRITE_PROJECT_ID=${projectId}\nAPPWRITE_PROJECT_NAME=${$project.name}\nAPPWRITE_ENDPOINT=${sdk.forProject(page.params.region, page.params.project).client.config.endpoint}`
+                : selectedFramework?.updateConfigCode || '',
+        configLanguage: selectedFramework?.key === 'angular' ? 'ts' : 'dotenv',
+        runInstructions: `${selectedFramework?.key === 'angular' ? 'Replace the file with the configuration above' : 'Copy the file `.env.example` to `.env` and update the configuration settings'}. Install project dependencies using \`npm install\`, then run the app using \`${selectedFramework?.runCommand}\`. Demo app runs on http://localhost:${selectedFramework?.portNumber}. Click the \`Send a ping\` button to verify the setup.`,
+        using: 'the terminal or VSCode'
+    });
+
     async function createWebPlatform() {
         hostnameError = hostname !== '' ? !new RegExp(extendedHostnameRegex).test(hostname) : null;
 
@@ -299,6 +321,8 @@ ${prefix}APPWRITE_ENDPOINT = "${sdk.forProject(page.params.region, page.params.p
         {#if isPlatformCreated && !isChangingFramework}
             <Fieldset legend="Clone starter" badge="Optional">
                 <Layout.Stack gap="l">
+                    <LlmBanner config={llmConfig} />
+
                     <Typography.Text variant="m-500">
                         1. If you're starting a new project, you can clone our starter kit from
                         GitHub using the terminal or VSCode.
diff --git a/src/routes/(console)/project-[region]-[project]/overview/platforms/llmBanner.svelte b/src/routes/(console)/project-[region]-[project]/overview/platforms/llmBanner.svelte
new file mode 100644
index 0000000000..dc207f4bc6
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/overview/platforms/llmBanner.svelte
@@ -0,0 +1,48 @@
+<script lang="ts">
+    import { copy } from '$lib/helpers/copy';
+    import { Button } from '$lib/elements/forms';
+    import { Alert, Typography } from '@appwrite.io/pink-svelte';
+    import { addNotification } from '$lib/stores/notifications';
+    import { buildPlatformConfig, generatePromptFromConfig, type LLMPromptConfig } from './store';
+    import { Click, trackEvent } from '$lib/actions/analytics';
+
+    let {
+        platform,
+        configCode,
+        config: customConfig
+    }: {
+        platform?: string;
+        configCode?: string;
+        config?: LLMPromptConfig;
+    } = $props();
+
+    const config = $derived.by(() => {
+        if (customConfig) return customConfig;
+        if (platform && configCode) return buildPlatformConfig(platform, configCode);
+        throw new Error('LlmBanner: must provide either config OR (platform + configCode)');
+    });
+
+    const prompt = $derived(generatePromptFromConfig(config));
+
+    async function copyPrompt() {
+        await copy(prompt);
+
+        trackEvent(Click.CopyPromptStarterKitClick, {
+            platform: config.title
+        });
+
+        addNotification({
+            type: 'success',
+            message: 'Prompt copied to clipboard'
+        });
+    }
+</script>
+
+<Alert.Inline status="info" title={config.title}>
+    <Typography.Text variant="m-500">
+        Paste it into your LLM to generate a working setup.
+    </Typography.Text>
+
+    <Button compact size="s" on:click={copyPrompt} disabled={!prompt || prompt.length === 0}
+        >Copy prompt</Button>
+</Alert.Inline>
diff --git a/src/routes/(console)/project-[region]-[project]/overview/platforms/store.ts b/src/routes/(console)/project-[region]-[project]/overview/platforms/store.ts
index d0b7956439..11a2fa5c74 100644
--- a/src/routes/(console)/project-[region]-[project]/overview/platforms/store.ts
+++ b/src/routes/(console)/project-[region]-[project]/overview/platforms/store.ts
@@ -17,6 +17,102 @@ export type FrameworkType = {
     updateConfigCode: string;
 };
 
+export type LLMPromptConfig = {
+    title: string;
+    cloneCommand: string;
+    configFile: string;
+    configCode: string;
+    configLanguage: string;
+    runInstructions: string;
+    using: string;
+};
+
 export function getCorrectTitle(isConnectPlatform: boolean, platform: string) {
     return isConnectPlatform ? `Connect your ${platform} app` : `Add ${platform} platform`;
 }
+
+export function generatePromptFromConfig(config: LLMPromptConfig): string {
+    return `1. If you're starting a new project, you can clone our starter kit from GitHub using ${config.using || 'the terminal'}.
+
+\`\`\`bash
+${config.cloneCommand}
+\`\`\`
+
+2. Open the file \`${config.configFile}\` and update the configuration settings.
+
+\`\`\`${config.configLanguage}
+${config.configCode}
+\`\`\`
+
+3. ${config.runInstructions}`;
+}
+
+type PlatformConfig = {
+    name: string;
+    title: string;
+    repoName: string;
+    configFile: string;
+    configLanguage: string;
+    runInstructions: string;
+    using: string;
+};
+
+const platformConfigs: Record<string, PlatformConfig> = {
+    android: {
+        name: 'Kotlin',
+        title: 'Copy prompt: starter kit for Appwrite in Kotlin',
+        repoName: 'starter-for-android',
+        configFile: 'constants/AppwriteConfig.kt',
+        configLanguage: 'kotlin',
+        runInstructions:
+            'Run the app on a connected device or emulator, then click the `Send a ping` button to verify the setup.',
+        using: 'the terminal, VSCode or Android Studio'
+    },
+    apple: {
+        name: 'Apple platforms',
+        title: 'Copy prompt: starter kit for Appwrite for Apple platforms',
+        repoName: 'starter-for-ios',
+        configFile: 'Sources/Config.plist',
+        configLanguage: 'plaintext',
+        runInstructions:
+            'Run the app on a connected device or simulator, then click the `Send a ping` button to verify the setup.',
+        using: 'the terminal or XCode'
+    },
+    flutter: {
+        name: 'Flutter',
+        title: 'Copy prompt: starter kit for Appwrite in Flutter',
+        repoName: 'starter-for-flutter',
+        configFile: 'lib/config/environment.dart',
+        configLanguage: 'dart',
+        runInstructions:
+            'Run the app on a connected device or simulator using `flutter run -d [device_name]`, then click the `Send a ping` button to verify the setup.',
+        using: 'the terminal'
+    },
+    reactnative: {
+        name: 'React Native',
+        title: 'Copy prompt: starter kit for Appwrite in React Native',
+        repoName: 'starter-for-react-native',
+        configFile: '.env.example',
+        configLanguage: 'dotenv',
+        runInstructions:
+            'Add your Appwrite credentials to `.env.example` then rename it to `.env` if needed. Run the app on a connected device or simulator using `npm install` followed by `npm run ios` or `npm run android`, then click the `Send a ping` button to verify the setup.',
+        using: 'the terminal or VSCode'
+    }
+};
+
+export function buildPlatformConfig(platformKey: string, configCode: string): LLMPromptConfig {
+    const config = platformConfigs[platformKey];
+    if (!config) {
+        throw new Error(`Unknown platform: ${platformKey}`);
+    }
+
+    return {
+        title: config.title,
+        cloneCommand: `git clone https://github.com/appwrite/${config.repoName}\ncd ${config.repoName}`,
+        configFile: config.configFile,
+        configCode: configCode,
+        configLanguage: config.configLanguage,
+        runInstructions: config.runInstructions,
+        using: config.using
+    };
+}

From b4f98f41b8f3307a73ea5534e3dfc50f2733772e Mon Sep 17 00:00:00 2001
From: Atharva Deosthale <atharva.deosthale17@gmail.com>
Date: Mon, 27 Oct 2025 15:10:14 +0530
Subject: [PATCH 02/16] progress

---
 .../overview/platforms/llmBanner.svelte       | 103 ++++++++++++++++--
 1 file changed, 96 insertions(+), 7 deletions(-)

diff --git a/src/routes/(console)/project-[region]-[project]/overview/platforms/llmBanner.svelte b/src/routes/(console)/project-[region]-[project]/overview/platforms/llmBanner.svelte
index dc207f4bc6..2f1096cbcc 100644
--- a/src/routes/(console)/project-[region]-[project]/overview/platforms/llmBanner.svelte
+++ b/src/routes/(console)/project-[region]-[project]/overview/platforms/llmBanner.svelte
@@ -1,7 +1,8 @@
 <script lang="ts">
     import { copy } from '$lib/helpers/copy';
     import { Button } from '$lib/elements/forms';
-    import { Alert, Typography } from '@appwrite.io/pink-svelte';
+    import { ActionMenu, Alert, Icon, Layout, Popover, Typography } from '@appwrite.io/pink-svelte';
+    import { IconChevronDown } from '@appwrite.io/pink-icons-svelte';
     import { addNotification } from '$lib/stores/notifications';
     import { buildPlatformConfig, generatePromptFromConfig, type LLMPromptConfig } from './store';
     import { Click, trackEvent } from '$lib/actions/analytics';
@@ -38,11 +39,99 @@
     }
 </script>
 
-<Alert.Inline status="info" title={config.title}>
-    <Typography.Text variant="m-500">
-        Paste it into your LLM to generate a working setup.
-    </Typography.Text>
+<Alert.Inline status="info" title="Set up your starter kit with AI">
+    <Layout.Stack direction="column" gap="s">
+        <Typography.Text variant="m-500">
+            Copy the prompt or open it directly in your preferred tools to get step-by-step
+            instructions, starter code, and SDK commands for your project.
+        </Typography.Text>
 
-    <Button compact size="s" on:click={copyPrompt} disabled={!prompt || prompt.length === 0}
-        >Copy prompt</Button>
+        <Layout.Stack direction="row" alignItems="stretch" gap="none">
+            <Button
+                secondary
+                size="s"
+                class="btn-no-right-radius"
+                on:click={copyPrompt}
+                disabled={!prompt || prompt.length === 0}>Copy prompt</Button>
+            <Popover let:toggle padding="none" placement="bottom-start">
+                <Button
+                    secondary
+                    size="s"
+                    class="btn-no-left-radius"
+                    icon
+                    on:click={toggle}
+                    ariaLabel="Open action menu"
+                    disabled={!prompt || prompt.length === 0}>
+                    <Icon icon={IconChevronDown} />
+                </Button>
+
+                <ActionMenu.Root slot="tooltip">
+                    <ActionMenu.Item.Anchor href="https://cursor.sh/" target="_blank">
+                        <Layout.Stack direction="row" gap="s" alignItems="center">
+                            <span class="menu-avatar"
+                                ><img src="https://img.icons8.com/color/512/cursor-ai.png" /></span>
+                            <Layout.Stack gap="xxs">
+                                <Typography.Text variant="m-500">Open in Cursor</Typography.Text>
+                                <Typography.Text variant="m-400" color="--fgcolor-neutral-tertiary">
+                                    Set up starter kit in Cursor
+                                </Typography.Text>
+                            </Layout.Stack>
+                        </Layout.Stack>
+                    </ActionMenu.Item.Anchor>
+                    <ActionMenu.Item.Anchor href="" target="_blank">
+                        <Layout.Stack direction="row" gap="s" alignItems="center">
+                            <span class="menu-avatar"
+                                ><img
+                                    src="https://cdn.prod.website-files.com/5e6aa3e3f001fad873b8e1f5/68cda0bd7b0c257a09a029cd_lovable-logo-icon.png"
+                                    alt="" /></span>
+                            <Layout.Stack gap="xxs">
+                                <Typography.Text variant="m-500">Open in Lovable</Typography.Text>
+                                <Typography.Text variant="m-400" color="--fgcolor-neutral-tertiary">
+                                    Set up starter kit in Lovable
+                                </Typography.Text>
+                            </Layout.Stack>
+                        </Layout.Stack>
+                    </ActionMenu.Item.Anchor>
+                </ActionMenu.Root>
+            </Popover>
+        </Layout.Stack>
+    </Layout.Stack>
 </Alert.Inline>
+
+<style lang="scss">
+    :global(.btn-no-right-radius),
+    :global(button.btn-no-right-radius),
+    :global(.button.btn-no-right-radius) {
+        border-top-right-radius: 0 !important;
+        border-bottom-right-radius: 0 !important;
+        border-right: none !important;
+    }
+
+    :global(.btn-no-left-radius),
+    :global(button.btn-no-left-radius),
+    :global(.button.btn-no-left-radius) {
+        border-top-left-radius: 0 !important;
+        border-bottom-left-radius: 0 !important;
+    }
+
+    /* Rounded logo chip for menu items (32px, circular with subtle border) */
+    :global(.menu-avatar) {
+        width: 32px;
+        height: 32px;
+        border-radius: 9999px;
+        background: var(--bgcolor-neutral-secondary, #f4f4f7);
+        border: var(--border-width-s, 1px) solid var(--border-neutral, #ededf0);
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        overflow: hidden;
+        flex-shrink: 0;
+    }
+
+    :global(.menu-avatar img) {
+        width: 20px;
+        height: 20px;
+        object-fit: contain;
+        display: block;
+    }
+</style>

From a33243cd22d960e72169cca837d1d397d5a50657 Mon Sep 17 00:00:00 2001
From: Atharva Deosthale <atharva.deosthale17@gmail.com>
Date: Tue, 28 Oct 2025 14:23:27 +0530
Subject: [PATCH 03/16] updates

---
 package.json                                  |   4 +-
 pnpm-lock.yaml                                |  20 +-
 .../components/CursorIconLarge.svelte         |   7 +
 .../overview/platforms/createAndroid.svelte   |  30 ++-
 .../overview/platforms/createApple.svelte     |  32 ++-
 .../overview/platforms/createFlutter.svelte   |  28 +-
 .../platforms/createReactNative.svelte        |  34 ++-
 .../overview/platforms/createWeb.svelte       |  40 ++-
 .../overview/platforms/llmBanner.svelte       | 252 ++++++++++++------
 .../overview/platforms/store.ts               |  28 +-
 10 files changed, 372 insertions(+), 103 deletions(-)
 create mode 100644 src/routes/(console)/project-[region]-[project]/overview/components/CursorIconLarge.svelte

diff --git a/package.json b/package.json
index 8d1a0d1ba2..557835f924 100644
--- a/package.json
+++ b/package.json
@@ -24,9 +24,9 @@
         "@ai-sdk/svelte": "^1.1.24",
         "@appwrite.io/console": "https://pkg.pr.new/appwrite-labs/cloud/@appwrite.io/console@fe3277e",
         "@appwrite.io/pink-icons": "0.25.0",
-        "@appwrite.io/pink-icons-svelte": "https://pkg.vc/-/@appwrite/@appwrite.io/pink-icons-svelte@50b60cc",
+        "@appwrite.io/pink-icons-svelte": "https://pkg.vc/-/@appwrite/@appwrite.io/pink-icons-svelte@85d1b43",
         "@appwrite.io/pink-legacy": "^1.0.3",
-        "@appwrite.io/pink-svelte": "https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@10305c4",
+        "@appwrite.io/pink-svelte": "https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@85d1b43",
         "@faker-js/faker": "^9.9.0",
         "@popperjs/core": "^2.11.8",
         "@sentry/sveltekit": "^8.38.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 463bb83f37..6c7ed1e601 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -18,14 +18,14 @@ importers:
         specifier: 0.25.0
         version: 0.25.0
       '@appwrite.io/pink-icons-svelte':
-        specifier: https://pkg.vc/-/@appwrite/@appwrite.io/pink-icons-svelte@50b60cc
-        version: https://pkg.vc/-/@appwrite/@appwrite.io/pink-icons-svelte@50b60cc(svelte@5.25.3)
+        specifier: https://pkg.vc/-/@appwrite/@appwrite.io/pink-icons-svelte@85d1b43
+        version: https://pkg.vc/-/@appwrite/@appwrite.io/pink-icons-svelte@85d1b43(svelte@5.25.3)
       '@appwrite.io/pink-legacy':
         specifier: ^1.0.3
         version: 1.0.3
       '@appwrite.io/pink-svelte':
-        specifier: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@10305c4
-        version: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@10305c4(svelte@5.25.3)
+        specifier: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@85d1b43
+        version: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@85d1b43(svelte@5.25.3)
       '@faker-js/faker':
         specifier: ^9.9.0
         version: 9.9.0
@@ -269,8 +269,8 @@ packages:
     peerDependencies:
       svelte: ^4.0.0
 
-  '@appwrite.io/pink-icons-svelte@https://pkg.vc/-/@appwrite/@appwrite.io/pink-icons-svelte@50b60cc':
-    resolution: {tarball: https://pkg.vc/-/@appwrite/@appwrite.io/pink-icons-svelte@50b60cc}
+  '@appwrite.io/pink-icons-svelte@https://pkg.vc/-/@appwrite/@appwrite.io/pink-icons-svelte@85d1b43':
+    resolution: {tarball: https://pkg.vc/-/@appwrite/@appwrite.io/pink-icons-svelte@85d1b43}
     version: 2.0.0-RC.1
     peerDependencies:
       svelte: ^4.0.0
@@ -284,8 +284,8 @@ packages:
   '@appwrite.io/pink-legacy@1.0.3':
     resolution: {integrity: sha512-GGde5fmPhs+s6/3aFeMPc/kKADG/gTFkYQSy6oBN8pK0y0XNCLrZZgBv+EBbdhwdtqVEWXa0X85Mv9w7jcIlwQ==}
 
-  '@appwrite.io/pink-svelte@https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@10305c4':
-    resolution: {tarball: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@10305c4}
+  '@appwrite.io/pink-svelte@https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@85d1b43':
+    resolution: {tarball: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@85d1b43}
     version: 2.0.0-RC.2
     peerDependencies:
       svelte: ^4.0.0
@@ -3709,7 +3709,7 @@ snapshots:
     dependencies:
       svelte: 5.25.3
 
-  '@appwrite.io/pink-icons-svelte@https://pkg.vc/-/@appwrite/@appwrite.io/pink-icons-svelte@50b60cc(svelte@5.25.3)':
+  '@appwrite.io/pink-icons-svelte@https://pkg.vc/-/@appwrite/@appwrite.io/pink-icons-svelte@85d1b43(svelte@5.25.3)':
     dependencies:
       svelte: 5.25.3
 
@@ -3722,7 +3722,7 @@ snapshots:
       '@appwrite.io/pink-icons': 1.0.0
       the-new-css-reset: 1.11.3
 
-  '@appwrite.io/pink-svelte@https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@10305c4(svelte@5.25.3)':
+  '@appwrite.io/pink-svelte@https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@85d1b43(svelte@5.25.3)':
     dependencies:
       '@appwrite.io/pink-icons-svelte': 2.0.0-RC.1(svelte@5.25.3)
       '@floating-ui/dom': 1.6.13
diff --git a/src/routes/(console)/project-[region]-[project]/overview/components/CursorIconLarge.svelte b/src/routes/(console)/project-[region]-[project]/overview/components/CursorIconLarge.svelte
new file mode 100644
index 0000000000..d4619ac202
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/overview/components/CursorIconLarge.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+    import { app } from '$lib/stores/app';
+    import Light from '../assets/cursor-ai.svg';
+    import Dark from '../assets/dark/cursor-ai.svg';
+</script>
+
+<img src={$app.themeInUse === 'dark' ? Dark : Light} width="20" height="20" alt="" />
diff --git a/src/routes/(console)/project-[region]-[project]/overview/platforms/createAndroid.svelte b/src/routes/(console)/project-[region]-[project]/overview/platforms/createAndroid.svelte
index 7add3d0708..966047db4e 100644
--- a/src/routes/(console)/project-[region]-[project]/overview/platforms/createAndroid.svelte
+++ b/src/routes/(console)/project-[region]-[project]/overview/platforms/createAndroid.svelte
@@ -37,6 +37,30 @@
 
     const projectId = page.params.project;
 
+    const alreadyExistsInstructions = `
+        Install the Appwrite Android SDK by adding the following dependency to app-level build.gradle.kts file under dependencies block:
+
+        \`\`\`
+        implementation("io.appwrite:sdk-for-android:8.1.0")
+        \`\`\`
+
+        From a suitable lib directory, export the Appwrite client as a global variable:
+
+        \`\`\`
+        val client = Client()
+            .setEndpoint("https://fra.cloud.appwrite.io/v1")
+            .setProject("ai-test-atharva")
+
+        val account = Account(client)
+        \`\`\`
+
+        On the homepage of the app, create a button that says "Send a ping" and when clicked, it should call the following function:
+
+        \`\`\`
+        client.ping()
+        \`\`\`
+    `;
+
     const gitCloneCode =
         '\ngit clone https://github.com/appwrite/starter-for-android\ncd starter-for-android\n';
 
@@ -173,7 +197,11 @@ const val APPWRITE_PUBLIC_ENDPOINT = "${sdk.forProject(page.params.region, page.
         {#if isPlatformCreated}
             <Fieldset legend="Clone starter" badge="Optional">
                 <Layout.Stack gap="l">
-                    <LlmBanner platform="android" {configCode} />
+                    <LlmBanner
+                        platform="android"
+                        {configCode}
+                        {alreadyExistsInstructions}
+                        openers={['cursor']} />
 
                     <Typography.Text variant="m-500">
                         1. If you're starting a new project, you can clone our starter kit from
diff --git a/src/routes/(console)/project-[region]-[project]/overview/platforms/createApple.svelte b/src/routes/(console)/project-[region]-[project]/overview/platforms/createApple.svelte
index 9f2cbf1a70..43e32019df 100644
--- a/src/routes/(console)/project-[region]-[project]/overview/platforms/createApple.svelte
+++ b/src/routes/(console)/project-[region]-[project]/overview/platforms/createApple.svelte
@@ -39,6 +39,30 @@
 
     const projectId = page.params.project;
 
+    const alreadyExistsInstructions = `
+        Install the Appwrite iOS SDK using the following package URL:
+
+        \`\`\`
+        https://github.com/appwrite/sdk-for-apple
+        \`\`\`
+
+        From a suitable lib directory, export the Appwrite client as a global variable:
+
+        \`\`\`
+        let client = Client()
+            .setEndpoint("https://fra.cloud.appwrite.io/v1")
+            .setProject("ai-test-atharva")
+
+        let account = Account(client)
+        \`\`\`
+
+        On the homepage of the app, create a button that says "Send a ping" and when clicked, it should call the following function:
+
+        \`\`\`
+        appwrite.ping()
+        \`\`\`
+    `;
+
     const gitCloneCode =
         '\ngit clone https://github.com/appwrite/starter-for-ios\ncd starter-for-ios\n';
 
@@ -46,7 +70,7 @@
 APPWRITE_PROJECT_NAME: "${$project.name}"
 APPWRITE_PUBLIC_ENDPOINT: "${sdk.forProject(page.params.region, page.params.project).client.config.endpoint}"`;
 
-    let platforms: { [key: string]: PlatformType } = {
+    const platforms: { [key: string]: PlatformType } = {
         iOS: PlatformType.Appleios,
         macOS: PlatformType.Applemacos,
         watchOS: PlatformType.Applewatchos,
@@ -201,7 +225,11 @@ APPWRITE_PUBLIC_ENDPOINT: "${sdk.forProject(page.params.region, page.params.proj
         {#if isPlatformCreated}
             <Fieldset legend="Clone starter" badge="Optional">
                 <Layout.Stack gap="l">
-                    <LlmBanner platform="apple" {configCode} />
+                    <LlmBanner
+                        platform="apple"
+                        {configCode}
+                        {alreadyExistsInstructions}
+                        openers={['cursor']} />
 
                     <Typography.Text variant="m-500">
                         1. If you're starting a new project, you can clone our starter kit from
diff --git a/src/routes/(console)/project-[region]-[project]/overview/platforms/createFlutter.svelte b/src/routes/(console)/project-[region]-[project]/overview/platforms/createFlutter.svelte
index 0117e5f044..c061858475 100644
--- a/src/routes/(console)/project-[region]-[project]/overview/platforms/createFlutter.svelte
+++ b/src/routes/(console)/project-[region]-[project]/overview/platforms/createFlutter.svelte
@@ -39,6 +39,28 @@
 
     const projectId = page.params.project;
 
+    const alreadyExistsInstructions = `
+    Install the Appwrite Flutter SDK using the following command:
+
+    \`\`\`
+    flutter pub add appwrite:17.0.0
+    \`\`\`
+
+    From a suitable lib directory, export the Appwrite client as a global variable, hardcode the project details too:
+
+    \`\`\`
+    final Client client = Client()
+      .setProject("${projectId}")
+      .setEndpoint("${sdk.forProject(page.params.region, page.params.project).client.config.endpoint}");
+    \`\`\`
+
+    On the homepage of the app, create a button that says "Send a ping" and when clicked, it should call the following function:
+
+    \`\`\`
+    client.ping();
+    \`\`\`
+    `;
+
     const gitCloneCode =
         '\ngit clone https://github.com/appwrite/starter-for-flutter\ncd starter-for-flutter\n';
 
@@ -283,7 +305,11 @@
         {#if isPlatformCreated}
             <Fieldset legend="Clone starter" badge="Optional">
                 <Layout.Stack gap="l">
-                    <LlmBanner platform="flutter" {configCode} />
+                    <LlmBanner
+                        platform="flutter"
+                        {configCode}
+                        {alreadyExistsInstructions}
+                        openers={['cursor']} />
                     <Typography.Text variant="m-500">
                         1. If you're starting a new project, you can clone our starter kit from
                         GitHub using the terminal, VSCode or Android Studio.
diff --git a/src/routes/(console)/project-[region]-[project]/overview/platforms/createReactNative.svelte b/src/routes/(console)/project-[region]-[project]/overview/platforms/createReactNative.svelte
index bc1d56184d..d76c674f33 100644
--- a/src/routes/(console)/project-[region]-[project]/overview/platforms/createReactNative.svelte
+++ b/src/routes/(console)/project-[region]-[project]/overview/platforms/createReactNative.svelte
@@ -39,6 +39,28 @@
 
     const projectId = page.params.project;
 
+    const alreadyExistsInstructions = `
+        Install the Appwrite React Native SDK using the following command, respect user's package manager of choice and use the one being used in the codebase:
+
+        \`\`\`
+        npx expo install react-native-appwrite react-native-url-polyfill
+        \`\`\`
+
+        From a suitable lib directory, export the Appwrite client as a global variable, hardcode the project details too:
+
+        \`\`\`
+        const client = new Client()
+            .setProject("${projectId}")
+            .setEndpoint("${sdk.forProject(page.params.region, page.params.project).client.config.endpoint}");
+        \`\`\`
+
+        On the homepage of the app, create a button that says "Send a ping" and when clicked, it should call the following function:
+
+        \`\`\`
+        client.ping();
+        \`\`\`
+    `;
+
     const gitCloneCode =
         '\ngit clone https://github.com/appwrite/starter-for-react-native\ncd starter-for-react-native\n';
 
@@ -46,6 +68,12 @@
 EXPO_PUBLIC_APPWRITE_PROJECT_NAME="${$project.name}"
 EXPO_PUBLIC_APPWRITE_ENDPOINT=${sdk.forProject(page.params.region, page.params.project).client.config.endpoint}`;
 
+    const promptConfigCode = `
+    const client = new Client()
+        .setProject("${projectId}")
+        .setEndpoint("${sdk.forProject(page.params.region, page.params.project).client.config.endpoint}")
+    `;
+
     let platforms: { [key: string]: PlatformType } = {
         Android: PlatformType.Reactnativeandroid,
         iOS: PlatformType.Reactnativeios
@@ -227,7 +255,11 @@ EXPO_PUBLIC_APPWRITE_ENDPOINT=${sdk.forProject(page.params.region, page.params.p
         {#if isPlatformCreated}
             <Fieldset legend="Clone starter" badge="Optional">
                 <Layout.Stack gap="l">
-                    <LlmBanner platform="reactnative" configCode={updateConfigCode} />
+                    <LlmBanner
+                        platform="reactnative"
+                        configCode={promptConfigCode}
+                        {alreadyExistsInstructions}
+                        openers={['cursor']} />
 
                     <Typography.Text variant="m-500">
                         1. If you're starting a new project, you can clone our starter kit from
diff --git a/src/routes/(console)/project-[region]-[project]/overview/platforms/createWeb.svelte b/src/routes/(console)/project-[region]-[project]/overview/platforms/createWeb.svelte
index 2521326fce..6b259468eb 100644
--- a/src/routes/(console)/project-[region]-[project]/overview/platforms/createWeb.svelte
+++ b/src/routes/(console)/project-[region]-[project]/overview/platforms/createWeb.svelte
@@ -164,18 +164,50 @@ ${prefix}APPWRITE_ENDPOINT = "${sdk.forProject(page.params.region, page.params.p
     );
 
     const llmConfig: LLMPromptConfig = $derived({
+        alreadyExistsInstructions: `
+            Install the Appwrite web SDK using the following command. Respect the user's package manager of choice. Do not use NPM if the user uses Bun for example.
+
+            \`\`\`bash
+            npm install appwrite
+            \`\`\`
+        
+            Create a new \`appwrite.js\` (or equivalent, respecting the framework and language, don't create a JS file if TS is being used in the project) file in a suitable lib directory and have the following code:
+
+            \`\`\`js
+            import { Client, Account, Databases } from "appwrite";
+
+            const client = new Client()
+                .setEndpoint("${sdk.forProject(page.params.region, page.params.project).client.config.endpoint}")
+                .setProject("${projectId}");
+
+            const account = new Account(client);
+            const databases = new Databases(client);
+
+            export { client, account, databases };
+            \`\`\`
+
+            On the homepage of the app, create a button that says "Send a ping" and when clicked, it should call the following function:
+
+            \`\`\`js
+            client.ping();
+            \`\`\`
+        `,
         title: `Copy prompt: starter kit for Appwrite in ${selectedFramework?.label || 'Web'}`,
         cloneCommand: `git clone https://github.com/appwrite/starter-for-${selectedFramework?.key}\ncd starter-for-${selectedFramework?.key}`,
         configFile:
             selectedFramework?.key === 'angular'
                 ? 'src/environments/environment.ts'
-                : '.env.example',
+                : 'appwrite.js',
         configCode:
             selectedFramework?.key === 'angular'
                 ? `APPWRITE_PROJECT_ID=${projectId}\nAPPWRITE_PROJECT_NAME=${$project.name}\nAPPWRITE_ENDPOINT=${sdk.forProject(page.params.region, page.params.project).client.config.endpoint}`
-                : selectedFramework?.updateConfigCode || '',
+                : `   
+                const client = new Client()
+                    .setEndpoint("${sdk.forProject(page.params.region, page.params.project).client.config.endpoint}")
+                    .setProject("${projectId}");
+                `,
         configLanguage: selectedFramework?.key === 'angular' ? 'ts' : 'dotenv',
-        runInstructions: `${selectedFramework?.key === 'angular' ? 'Replace the file with the configuration above' : 'Copy the file `.env.example` to `.env` and update the configuration settings'}. Install project dependencies using \`npm install\`, then run the app using \`${selectedFramework?.runCommand}\`. Demo app runs on http://localhost:${selectedFramework?.portNumber}. Click the \`Send a ping\` button to verify the setup.`,
+        runInstructions: `${selectedFramework?.key === 'angular' && 'Replace the file with the configuration above'}. Install project dependencies using \`npm install\`, then run the app using \`${selectedFramework?.runCommand}\`. Demo app runs on http://localhost:${selectedFramework?.portNumber}. Click the \`Send a ping\` button to verify the setup.`,
         using: 'the terminal or VSCode'
     });
 
@@ -321,7 +353,7 @@ ${prefix}APPWRITE_ENDPOINT = "${sdk.forProject(page.params.region, page.params.p
         {#if isPlatformCreated && !isChangingFramework}
             <Fieldset legend="Clone starter" badge="Optional">
                 <Layout.Stack gap="l">
-                    <LlmBanner config={llmConfig} />
+                    <LlmBanner config={llmConfig} openers={['cursor', 'lovable']} />
 
                     <Typography.Text variant="m-500">
                         1. If you're starting a new project, you can clone our starter kit from
diff --git a/src/routes/(console)/project-[region]-[project]/overview/platforms/llmBanner.svelte b/src/routes/(console)/project-[region]-[project]/overview/platforms/llmBanner.svelte
index 2f1096cbcc..6c5bdeb065 100644
--- a/src/routes/(console)/project-[region]-[project]/overview/platforms/llmBanner.svelte
+++ b/src/routes/(console)/project-[region]-[project]/overview/platforms/llmBanner.svelte
@@ -2,29 +2,82 @@
     import { copy } from '$lib/helpers/copy';
     import { Button } from '$lib/elements/forms';
     import { ActionMenu, Alert, Icon, Layout, Popover, Typography } from '@appwrite.io/pink-svelte';
-    import { IconChevronDown } from '@appwrite.io/pink-icons-svelte';
+    import { IconChevronDown, IconChevronUp, IconLovable } from '@appwrite.io/pink-icons-svelte';
     import { addNotification } from '$lib/stores/notifications';
     import { buildPlatformConfig, generatePromptFromConfig, type LLMPromptConfig } from './store';
     import { Click, trackEvent } from '$lib/actions/analytics';
+    import IconAINotification from '../../databases/database-[database]/(suggestions)/icon/aiNotification.svelte';
+    import Avatar from '$lib/components/avatar.svelte';
+    import CursorIcon from '../components/CursorIconLarge.svelte';
+    import type { ComponentType } from 'svelte';
 
     let {
         platform,
         configCode,
-        config: customConfig
+        alreadyExistsInstructions,
+        config: customConfig,
+        openers = [] as Array<SupportedAgents>
     }: {
         platform?: string;
         configCode?: string;
+        alreadyExistsInstructions?: string;
         config?: LLMPromptConfig;
+        openers?: Array<SupportedAgents>;
     } = $props();
 
     const config = $derived.by(() => {
         if (customConfig) return customConfig;
-        if (platform && configCode) return buildPlatformConfig(platform, configCode);
+        if (platform && configCode)
+            return buildPlatformConfig(platform, configCode, alreadyExistsInstructions);
         throw new Error('LlmBanner: must provide either config OR (platform + configCode)');
     });
 
     const prompt = $derived(generatePromptFromConfig(config));
 
+    let showAlert = $state(true);
+
+    type OpenerConfig = {
+        id: SupportedAgents;
+        label: string;
+        description: string;
+        href: (prompt: string) => string;
+        icon?: ComponentType;
+        imgSrc?: string;
+        alt: string;
+    };
+
+    type SupportedAgents = 'cursor' | 'lovable';
+
+    const openersConfig: Record<SupportedAgents, OpenerConfig> = {
+        cursor: {
+            id: 'cursor',
+            label: 'Open in Cursor',
+            description: 'Set up starter kit in Cursor',
+            href: (p: string) => {
+                const u = new URL('https://cursor.com/link/prompt');
+                u.searchParams.set('text', p);
+                return u.toString();
+            },
+            icon: CursorIcon,
+            alt: 'Cursor'
+        },
+        lovable: {
+            id: 'lovable',
+            label: 'Open in Lovable',
+            description: 'Set up starter kit in Lovable',
+            href: (p: string) => {
+                const u = new URL('https://lovable.dev/');
+                u.searchParams.set('autosubmit', 'true');
+                u.searchParams.set('prompt', p);
+                return u.toString();
+            },
+            icon: IconLovable,
+            alt: 'Lovable'
+        }
+    };
+
+    const validOpeners = $derived(openers.filter((id) => openersConfig[id]));
+
     async function copyPrompt() {
         await copy(prompt);
 
@@ -39,64 +92,94 @@
     }
 </script>
 
-<Alert.Inline status="info" title="Set up your starter kit with AI">
-    <Layout.Stack direction="column" gap="s">
-        <Typography.Text variant="m-500">
-            Copy the prompt or open it directly in your preferred tools to get step-by-step
-            instructions, starter code, and SDK commands for your project.
-        </Typography.Text>
-
-        <Layout.Stack direction="row" alignItems="stretch" gap="none">
-            <Button
-                secondary
-                size="s"
-                class="btn-no-right-radius"
-                on:click={copyPrompt}
-                disabled={!prompt || prompt.length === 0}>Copy prompt</Button>
-            <Popover let:toggle padding="none" placement="bottom-start">
-                <Button
-                    secondary
-                    size="s"
-                    class="btn-no-left-radius"
-                    icon
-                    on:click={toggle}
-                    ariaLabel="Open action menu"
-                    disabled={!prompt || prompt.length === 0}>
-                    <Icon icon={IconChevronDown} />
-                </Button>
-
-                <ActionMenu.Root slot="tooltip">
-                    <ActionMenu.Item.Anchor href="https://cursor.sh/" target="_blank">
-                        <Layout.Stack direction="row" gap="s" alignItems="center">
-                            <span class="menu-avatar"
-                                ><img src="https://img.icons8.com/color/512/cursor-ai.png" /></span>
-                            <Layout.Stack gap="xxs">
-                                <Typography.Text variant="m-500">Open in Cursor</Typography.Text>
-                                <Typography.Text variant="m-400" color="--fgcolor-neutral-tertiary">
-                                    Set up starter kit in Cursor
-                                </Typography.Text>
-                            </Layout.Stack>
-                        </Layout.Stack>
-                    </ActionMenu.Item.Anchor>
-                    <ActionMenu.Item.Anchor href="" target="_blank">
-                        <Layout.Stack direction="row" gap="s" alignItems="center">
-                            <span class="menu-avatar"
-                                ><img
-                                    src="https://cdn.prod.website-files.com/5e6aa3e3f001fad873b8e1f5/68cda0bd7b0c257a09a029cd_lovable-logo-icon.png"
-                                    alt="" /></span>
-                            <Layout.Stack gap="xxs">
-                                <Typography.Text variant="m-500">Open in Lovable</Typography.Text>
-                                <Typography.Text variant="m-400" color="--fgcolor-neutral-tertiary">
-                                    Set up starter kit in Lovable
-                                </Typography.Text>
-                            </Layout.Stack>
-                        </Layout.Stack>
-                    </ActionMenu.Item.Anchor>
-                </ActionMenu.Root>
-            </Popover>
-        </Layout.Stack>
-    </Layout.Stack>
-</Alert.Inline>
+{#if showAlert}
+    <div class="custom-inline-alert">
+        <Alert.Inline
+            status="info"
+            title="Set up your starter kit with AI"
+            dismissible
+            on:dismiss={() => (showAlert = false)}>
+            <svelte:fragment slot="icon">
+                <IconAINotification />
+            </svelte:fragment>
+            <Layout.Stack direction="column" class="alert-content" gap="l">
+                <Layout.Stack direction="column" alignItems="center" gap="s">
+                    <Typography.Text variant="m-400">
+                        Copy the prompt or open it directly in an AI tool like Cursor or Lovable to
+                        get step-by-step instructions, starter code, and SDK commands for your
+                        project.
+                    </Typography.Text>
+                </Layout.Stack>
+
+                <Layout.Stack direction="row" alignItems="stretch" gap="none">
+                    <Button
+                        secondary
+                        size="s"
+                        class={validOpeners.length ? 'btn-no-right-radius' : ''}
+                        on:click={copyPrompt}
+                        disabled={!prompt || prompt.length === 0}>Copy setup prompt</Button>
+                    {#if validOpeners.length}
+                        <Popover let:toggle let:showing padding="none" placement="bottom-start">
+                            <Button
+                                secondary
+                                size="s"
+                                class="btn-no-left-radius"
+                                icon
+                                on:click={toggle}
+                                ariaLabel="Open action menu"
+                                disabled={!prompt || prompt.length === 0}>
+                                <Icon icon={showing ? IconChevronUp : IconChevronDown} />
+                            </Button>
+
+                            <svelte:fragment slot="tooltip" let:toggle>
+                                <ActionMenu.Root>
+                                    {#each validOpeners as openerId}
+                                        {@const o = openersConfig[openerId]}
+                                        {#if o}
+                                            <ActionMenu.Item.Button
+                                                on:click={(e) => {
+                                                    window.open(
+                                                        o.href(prompt),
+                                                        '_blank',
+                                                        'noopener,noreferrer'
+                                                    );
+                                                    toggle(e);
+                                                }}>
+                                                <Layout.Stack
+                                                    direction="row"
+                                                    gap="s"
+                                                    alignItems="center">
+                                                    <Avatar size="s" alt={o.alt}>
+                                                        {#if o.icon}
+                                                            <Icon icon={o.icon} size="l" />
+                                                        {:else if o.imgSrc}
+                                                            <img src={o.imgSrc} alt={o.alt} />
+                                                        {/if}
+                                                    </Avatar>
+                                                    <Layout.Stack gap="none">
+                                                        <Typography.Text
+                                                            color="--fgcolor-neutral-secondary"
+                                                            variant="m-500"
+                                                            >{o.label}</Typography.Text>
+                                                        <Typography.Text
+                                                            variant="m-400"
+                                                            color="--fgcolor-neutral-tertiary">
+                                                            {o.description}
+                                                        </Typography.Text>
+                                                    </Layout.Stack>
+                                                </Layout.Stack>
+                                            </ActionMenu.Item.Button>
+                                        {/if}
+                                    {/each}
+                                </ActionMenu.Root>
+                            </svelte:fragment>
+                        </Popover>
+                    {/if}
+                </Layout.Stack>
+            </Layout.Stack>
+        </Alert.Inline>
+    </div>
+{/if}
 
 <style lang="scss">
     :global(.btn-no-right-radius),
@@ -114,24 +197,43 @@
         border-bottom-left-radius: 0 !important;
     }
 
-    /* Rounded logo chip for menu items (32px, circular with subtle border) */
-    :global(.menu-avatar) {
-        width: 32px;
-        height: 32px;
-        border-radius: 9999px;
-        background: var(--bgcolor-neutral-secondary, #f4f4f7);
-        border: var(--border-width-s, 1px) solid var(--border-neutral, #ededf0);
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        overflow: hidden;
-        flex-shrink: 0;
-    }
-
     :global(.menu-avatar img) {
         width: 20px;
         height: 20px;
         object-fit: contain;
         display: block;
     }
+
+    .custom-inline-alert {
+        & :global(article) {
+            border-radius: var(--border-radius-medium);
+            padding: var(--space-6, 12px);
+            padding-right: var(--space-4, 12px);
+            background: var(--bgcolor-neutral-primary);
+            border: var(--border-width-s) solid var(--border-neutral);
+        }
+        & :global(article > div) {
+            gap: var(--space-6);
+        }
+        & :global(.ai-icon-holder.notification) {
+            height: 36px !important;
+        }
+
+        & :global(h5) {
+            font-weight: 500 !important;
+            color: var(--fgcolor-neutral-primary) !important;
+        }
+
+        & :global(p) {
+            color: var(--fgcolor-neutral-secondary) !important;
+        }
+
+        & :global(.alert-content) {
+            margin-top: 2px !important;
+        }
+
+        & :global([role='tooltip'] > div) {
+            gap: var(--space-2, 4px) !important;
+        }
+    }
 </style>
diff --git a/src/routes/(console)/project-[region]-[project]/overview/platforms/store.ts b/src/routes/(console)/project-[region]-[project]/overview/platforms/store.ts
index 11a2fa5c74..ea5296d4ff 100644
--- a/src/routes/(console)/project-[region]-[project]/overview/platforms/store.ts
+++ b/src/routes/(console)/project-[region]-[project]/overview/platforms/store.ts
@@ -19,6 +19,7 @@ export type FrameworkType = {
 
 export type LLMPromptConfig = {
     title: string;
+    alreadyExistsInstructions: string;
     cloneCommand: string;
     configFile: string;
     configCode: string;
@@ -32,15 +33,23 @@ export function getCorrectTitle(isConnectPlatform: boolean, platform: string) {
 }
 
 export function generatePromptFromConfig(config: LLMPromptConfig): string {
-    return `1. If you're starting a new project, you can clone our starter kit from GitHub using ${config.using || 'the terminal'}.
+    return `
+Follow the steps depending on if a project already exists on user's working directory or not:
+
+## If a project already exists:
+${config.alreadyExistsInstructions}
+
+## If a project does not exist:
+
+1. If you're starting a new project, you can clone our starter kit from GitHub using ${config.using || 'the terminal'}. Make sure to clone in the current working directory root so that the files are directly available in the working directory.
 
 \`\`\`bash
 ${config.cloneCommand}
 \`\`\`
 
-2. Open the file \`${config.configFile}\` and update the configuration settings.
+2. Open the file \`${config.configFile}\`, find the code block, replace and hardcode the project details as mentioned below.
 
-\`\`\`${config.configLanguage}
+\`\`\`
 ${config.configCode}
 \`\`\`
 
@@ -92,15 +101,19 @@ const platformConfigs: Record<string, PlatformConfig> = {
         name: 'React Native',
         title: 'Copy prompt: starter kit for Appwrite in React Native',
         repoName: 'starter-for-react-native',
-        configFile: '.env.example',
-        configLanguage: 'dotenv',
+        configFile: 'index.ts',
+        configLanguage: 'typescript',
         runInstructions:
-            'Add your Appwrite credentials to `.env.example` then rename it to `.env` if needed. Run the app on a connected device or simulator using `npm install` followed by `npm run ios` or `npm run android`, then click the `Send a ping` button to verify the setup.',
+            'After replacing and hardcoding project details, run the app on a connected device or simulator using `npm install` followed by `npm run ios` or `npm run android`, then click the `Send a ping` button to verify the setup.',
         using: 'the terminal or VSCode'
     }
 };
 
-export function buildPlatformConfig(platformKey: string, configCode: string): LLMPromptConfig {
+export function buildPlatformConfig(
+    platformKey: string,
+    configCode: string,
+    alreadyExistsInstructions: string
+): LLMPromptConfig {
     const config = platformConfigs[platformKey];
     if (!config) {
         throw new Error(`Unknown platform: ${platformKey}`);
@@ -108,6 +121,7 @@ export function buildPlatformConfig(platformKey: string, configCode: string): LL
 
     return {
         title: config.title,
+        alreadyExistsInstructions: alreadyExistsInstructions,
         cloneCommand: `git clone https://github.com/appwrite/${config.repoName}\ncd ${config.repoName}`,
         configFile: config.configFile,
         configCode: configCode,

From 8787d8b4bd9b20b07fedfd055b2bd100fefe25e6 Mon Sep 17 00:00:00 2001
From: Atharva Deosthale <atharva.deosthale17@gmail.com>
Date: Tue, 28 Oct 2025 14:26:13 +0530
Subject: [PATCH 04/16] tracking

---
 src/lib/actions/analytics.ts                                | 4 +++-
 .../overview/platforms/llmBanner.svelte                     | 6 ++++++
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/lib/actions/analytics.ts b/src/lib/actions/analytics.ts
index 44cd6ec680..a60672d922 100644
--- a/src/lib/actions/analytics.ts
+++ b/src/lib/actions/analytics.ts
@@ -196,7 +196,9 @@ export enum Click {
     VariablesUpdateClick = 'click_variable_update',
     VariablesImportClick = 'click_variable_import',
     WebsiteOpenClick = 'click_open_website',
-    CopyPromptStarterKitClick = 'click_copy_prompt_starter_kit'
+    CopyPromptStarterKitClick = 'click_copy_prompt_starter_kit',
+    OpenInCursorClick = 'click_open_in_cursor',
+    OpenInLovableClick = 'click_open_in_lovable'
 }
 
 export enum Submit {
diff --git a/src/routes/(console)/project-[region]-[project]/overview/platforms/llmBanner.svelte b/src/routes/(console)/project-[region]-[project]/overview/platforms/llmBanner.svelte
index 6c5bdeb065..7c47940439 100644
--- a/src/routes/(console)/project-[region]-[project]/overview/platforms/llmBanner.svelte
+++ b/src/routes/(console)/project-[region]-[project]/overview/platforms/llmBanner.svelte
@@ -54,6 +54,9 @@
             label: 'Open in Cursor',
             description: 'Set up starter kit in Cursor',
             href: (p: string) => {
+                trackEvent(Click.OpenInCursorClick, {
+                    platform: config.title
+                });
                 const u = new URL('https://cursor.com/link/prompt');
                 u.searchParams.set('text', p);
                 return u.toString();
@@ -66,6 +69,9 @@
             label: 'Open in Lovable',
             description: 'Set up starter kit in Lovable',
             href: (p: string) => {
+                trackEvent(Click.OpenInLovableClick, {
+                    platform: config.title
+                });
                 const u = new URL('https://lovable.dev/');
                 u.searchParams.set('autosubmit', 'true');
                 u.searchParams.set('prompt', p);

From 1adc92fde034f02a26fb442c08c6b0adefd0158f Mon Sep 17 00:00:00 2001
From: Atharva Deosthale <atharva.deosthale17@gmail.com>
Date: Tue, 28 Oct 2025 14:33:01 +0530
Subject: [PATCH 05/16] Update
 src/routes/(console)/project-[region]-[project]/overview/platforms/createApple.svelte

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
---
 .../overview/platforms/createApple.svelte     | 34 +++++++++----------
 1 file changed, 17 insertions(+), 17 deletions(-)

diff --git a/src/routes/(console)/project-[region]-[project]/overview/platforms/createApple.svelte b/src/routes/(console)/project-[region]-[project]/overview/platforms/createApple.svelte
index 43e32019df..38800370a9 100644
--- a/src/routes/(console)/project-[region]-[project]/overview/platforms/createApple.svelte
+++ b/src/routes/(console)/project-[region]-[project]/overview/platforms/createApple.svelte
@@ -39,29 +39,29 @@
 
     const projectId = page.params.project;
 
-    const alreadyExistsInstructions = `
-        Install the Appwrite iOS SDK using the following package URL:
+const alreadyExistsInstructions = `
+    Install the Appwrite iOS SDK using the following package URL:
 
-        \`\`\`
-        https://github.com/appwrite/sdk-for-apple
-        \`\`\`
+    \`\`\`
+    https://github.com/appwrite/sdk-for-apple
+    \`\`\`
 
-        From a suitable lib directory, export the Appwrite client as a global variable:
+    From a suitable lib directory, export the Appwrite client as a global variable:
 
-        \`\`\`
-        let client = Client()
-            .setEndpoint("https://fra.cloud.appwrite.io/v1")
-            .setProject("ai-test-atharva")
+    \`\`\`
+    let client = Client()
+        .setEndpoint("https://fra.cloud.appwrite.io/v1")
+        .setProject("${projectId}")
 
-        let account = Account(client)
-        \`\`\`
+    let account = Account(client)
+    \`\`\`
 
-        On the homepage of the app, create a button that says "Send a ping" and when clicked, it should call the following function:
+    On the homepage of the app, create a button that says "Send a ping" and when clicked, it should call the following function:
 
-        \`\`\`
-        appwrite.ping()
-        \`\`\`
-    `;
+    \`\`\`
+    appwrite.ping()
+    \`\`\`
+`;
 
     const gitCloneCode =
         '\ngit clone https://github.com/appwrite/starter-for-ios\ncd starter-for-ios\n';

From a67689fc946d2f796226355c69da4efece32f272 Mon Sep 17 00:00:00 2001
From: Atharva Deosthale <atharva.deosthale17@gmail.com>
Date: Tue, 28 Oct 2025 14:34:43 +0530
Subject: [PATCH 06/16] fix accidental hardcoding

---
 .../overview/platforms/createAndroid.svelte                   | 4 ++--
 .../overview/platforms/createApple.svelte                     | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/routes/(console)/project-[region]-[project]/overview/platforms/createAndroid.svelte b/src/routes/(console)/project-[region]-[project]/overview/platforms/createAndroid.svelte
index 966047db4e..1758e9a8f5 100644
--- a/src/routes/(console)/project-[region]-[project]/overview/platforms/createAndroid.svelte
+++ b/src/routes/(console)/project-[region]-[project]/overview/platforms/createAndroid.svelte
@@ -48,8 +48,8 @@
 
         \`\`\`
         val client = Client()
-            .setEndpoint("https://fra.cloud.appwrite.io/v1")
-            .setProject("ai-test-atharva")
+            .setEndpoint("${sdk.forProject(page.params.region, page.params.project).client.config.endpoint}")
+            .setProject("${projectId}")
 
         val account = Account(client)
         \`\`\`
diff --git a/src/routes/(console)/project-[region]-[project]/overview/platforms/createApple.svelte b/src/routes/(console)/project-[region]-[project]/overview/platforms/createApple.svelte
index 38800370a9..1b9a37f406 100644
--- a/src/routes/(console)/project-[region]-[project]/overview/platforms/createApple.svelte
+++ b/src/routes/(console)/project-[region]-[project]/overview/platforms/createApple.svelte
@@ -39,7 +39,7 @@
 
     const projectId = page.params.project;
 
-const alreadyExistsInstructions = `
+    const alreadyExistsInstructions = `
     Install the Appwrite iOS SDK using the following package URL:
 
     \`\`\`
@@ -50,7 +50,7 @@ const alreadyExistsInstructions = `
 
     \`\`\`
     let client = Client()
-        .setEndpoint("https://fra.cloud.appwrite.io/v1")
+        .setEndpoint("${sdk.forProject(page.params.region, page.params.project).client.config.endpoint}")
         .setProject("${projectId}")
 
     let account = Account(client)

From e4cf1878a9b394d555eb530c771480f22a9fbcec Mon Sep 17 00:00:00 2001
From: Atharva Deosthale <atharva.deosthale17@gmail.com>
Date: Wed, 29 Oct 2025 16:03:37 +0530
Subject: [PATCH 07/16] update packages

---
 package.json   |  4 ++--
 pnpm-lock.yaml | 20 ++++++++++----------
 2 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/package.json b/package.json
index 557835f924..51a02db947 100644
--- a/package.json
+++ b/package.json
@@ -24,9 +24,9 @@
         "@ai-sdk/svelte": "^1.1.24",
         "@appwrite.io/console": "https://pkg.pr.new/appwrite-labs/cloud/@appwrite.io/console@fe3277e",
         "@appwrite.io/pink-icons": "0.25.0",
-        "@appwrite.io/pink-icons-svelte": "https://pkg.vc/-/@appwrite/@appwrite.io/pink-icons-svelte@85d1b43",
+        "@appwrite.io/pink-icons-svelte": "https://pkg.vc/-/@appwrite/@appwrite.io/pink-icons-svelte@c67ae13",
         "@appwrite.io/pink-legacy": "^1.0.3",
-        "@appwrite.io/pink-svelte": "https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@85d1b43",
+        "@appwrite.io/pink-svelte": "https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@c67ae13",
         "@faker-js/faker": "^9.9.0",
         "@popperjs/core": "^2.11.8",
         "@sentry/sveltekit": "^8.38.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 6c7ed1e601..2d33bb7312 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -18,14 +18,14 @@ importers:
         specifier: 0.25.0
         version: 0.25.0
       '@appwrite.io/pink-icons-svelte':
-        specifier: https://pkg.vc/-/@appwrite/@appwrite.io/pink-icons-svelte@85d1b43
-        version: https://pkg.vc/-/@appwrite/@appwrite.io/pink-icons-svelte@85d1b43(svelte@5.25.3)
+        specifier: https://pkg.vc/-/@appwrite/@appwrite.io/pink-icons-svelte@c67ae13
+        version: https://pkg.vc/-/@appwrite/@appwrite.io/pink-icons-svelte@c67ae13(svelte@5.25.3)
       '@appwrite.io/pink-legacy':
         specifier: ^1.0.3
         version: 1.0.3
       '@appwrite.io/pink-svelte':
-        specifier: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@85d1b43
-        version: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@85d1b43(svelte@5.25.3)
+        specifier: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@c67ae13
+        version: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@c67ae13(svelte@5.25.3)
       '@faker-js/faker':
         specifier: ^9.9.0
         version: 9.9.0
@@ -269,8 +269,8 @@ packages:
     peerDependencies:
       svelte: ^4.0.0
 
-  '@appwrite.io/pink-icons-svelte@https://pkg.vc/-/@appwrite/@appwrite.io/pink-icons-svelte@85d1b43':
-    resolution: {tarball: https://pkg.vc/-/@appwrite/@appwrite.io/pink-icons-svelte@85d1b43}
+  '@appwrite.io/pink-icons-svelte@https://pkg.vc/-/@appwrite/@appwrite.io/pink-icons-svelte@c67ae13':
+    resolution: {tarball: https://pkg.vc/-/@appwrite/@appwrite.io/pink-icons-svelte@c67ae13}
     version: 2.0.0-RC.1
     peerDependencies:
       svelte: ^4.0.0
@@ -284,8 +284,8 @@ packages:
   '@appwrite.io/pink-legacy@1.0.3':
     resolution: {integrity: sha512-GGde5fmPhs+s6/3aFeMPc/kKADG/gTFkYQSy6oBN8pK0y0XNCLrZZgBv+EBbdhwdtqVEWXa0X85Mv9w7jcIlwQ==}
 
-  '@appwrite.io/pink-svelte@https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@85d1b43':
-    resolution: {tarball: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@85d1b43}
+  '@appwrite.io/pink-svelte@https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@c67ae13':
+    resolution: {tarball: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@c67ae13}
     version: 2.0.0-RC.2
     peerDependencies:
       svelte: ^4.0.0
@@ -3709,7 +3709,7 @@ snapshots:
     dependencies:
       svelte: 5.25.3
 
-  '@appwrite.io/pink-icons-svelte@https://pkg.vc/-/@appwrite/@appwrite.io/pink-icons-svelte@85d1b43(svelte@5.25.3)':
+  '@appwrite.io/pink-icons-svelte@https://pkg.vc/-/@appwrite/@appwrite.io/pink-icons-svelte@c67ae13(svelte@5.25.3)':
     dependencies:
       svelte: 5.25.3
 
@@ -3722,7 +3722,7 @@ snapshots:
       '@appwrite.io/pink-icons': 1.0.0
       the-new-css-reset: 1.11.3
 
-  '@appwrite.io/pink-svelte@https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@85d1b43(svelte@5.25.3)':
+  '@appwrite.io/pink-svelte@https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@c67ae13(svelte@5.25.3)':
     dependencies:
       '@appwrite.io/pink-icons-svelte': 2.0.0-RC.1(svelte@5.25.3)
       '@floating-ui/dom': 1.6.13

From 93accb9472abc5cd32ebc2d15b7d9dbdc573d540 Mon Sep 17 00:00:00 2001
From: Atharva Deosthale <atharva.deosthale17@gmail.com>
Date: Tue, 18 Nov 2025 17:12:27 +0530
Subject: [PATCH 08/16] final tweaks to prompt to perfect the agent behaviour

---
 .../overview/platforms/createAndroid.svelte   | 64 ++++++++++++-------
 .../overview/platforms/createApple.svelte     |  2 +-
 .../overview/platforms/createFlutter.svelte   | 28 ++++----
 .../platforms/createReactNative.svelte        | 28 ++++----
 .../overview/platforms/createWeb.svelte       | 57 +++++++++--------
 .../overview/platforms/store.ts               | 22 ++++---
 6 files changed, 114 insertions(+), 87 deletions(-)

diff --git a/src/routes/(console)/project-[region]-[project]/overview/platforms/createAndroid.svelte b/src/routes/(console)/project-[region]-[project]/overview/platforms/createAndroid.svelte
index 1758e9a8f5..aa9023ebc7 100644
--- a/src/routes/(console)/project-[region]-[project]/overview/platforms/createAndroid.svelte
+++ b/src/routes/(console)/project-[region]-[project]/overview/platforms/createAndroid.svelte
@@ -38,28 +38,48 @@
     const projectId = page.params.project;
 
     const alreadyExistsInstructions = `
-        Install the Appwrite Android SDK by adding the following dependency to app-level build.gradle.kts file under dependencies block:
-
-        \`\`\`
-        implementation("io.appwrite:sdk-for-android:8.1.0")
-        \`\`\`
-
-        From a suitable lib directory, export the Appwrite client as a global variable:
-
-        \`\`\`
-        val client = Client()
-            .setEndpoint("${sdk.forProject(page.params.region, page.params.project).client.config.endpoint}")
-            .setProject("${projectId}")
-
-        val account = Account(client)
-        \`\`\`
-
-        On the homepage of the app, create a button that says "Send a ping" and when clicked, it should call the following function:
-
-        \`\`\`
-        client.ping()
-        \`\`\`
-    `;
+Confirm you're working inside the correct Android project before editing anything:
+- Navigate into the directory that contains the real Android app module (look for gradlew, settings.gradle, and the app-level build.gradle(.kts)).
+- If Cursor opens in a parent folder (like your home directory) or you see multiple Android projects, ask which one to modify before making changes.
+- Update the app-level build.gradle.kts by default, but be ready to edit a Groovy build.gradle if the project hasn't migrated to Kotlin DSL yet.
+
+Prefer Version Catalogs when adding the Appwrite SDK:
+1. If ./gradle/libs.versions.toml exists, add or reuse an Appwrite entry:
+\`\`\`toml
+[libraries]
+appwrite = { module = "io.appwrite:sdk-for-android", version = "11.3.0" }
+\`\`\`
+2. Reference it inside the module's dependencies block:
+\`\`\`kotlin
+dependencies {
+    implementation(libs.appwrite)
+}
+\`\`\`
+Only when the project lacks ./gradle/libs.versions.toml should you hardcode the dependency:
+\`\`\`kotlin
+implementation("io.appwrite:sdk-for-android:11.3.0")
+\`\`\`
+Legacy Groovy scripts should use:
+\`\`\`groovy
+implementation "io.appwrite:sdk-for-android:11.3.0"
+\`\`\`
+
+Before introducing any new files, search the project (app/src, libs/, shared modules, etc.) for existing Appwrite client helpers (look for \`Client(\`, \`AppwriteClient\`, or \`.setEndpoint\`). If a client already exists, update its configuration instead of creating a duplicate.
+
+Ensure the Appwrite client is initialized with the application context and current project info:
+\`\`\`kotlin
+val client = Client(applicationContext)
+    .setEndpoint("${sdk.forProject(page.params.region, page.params.project).client.config.endpoint}")
+    .setProject("${projectId}")
+
+val account = Account(client)
+\`\`\`
+
+From the app's entry point (e.g., Application class or the first launched Activity), automatically invoke a helper that pings Appwrite so the user can verify connectivity and will be reflected on the Appwrite console:
+\`\`\`kotlin
+client.ping()
+\`\`\`
+`;
 
     const gitCloneCode =
         '\ngit clone https://github.com/appwrite/starter-for-android\ncd starter-for-android\n';
diff --git a/src/routes/(console)/project-[region]-[project]/overview/platforms/createApple.svelte b/src/routes/(console)/project-[region]-[project]/overview/platforms/createApple.svelte
index 1b9a37f406..0f428a78ee 100644
--- a/src/routes/(console)/project-[region]-[project]/overview/platforms/createApple.svelte
+++ b/src/routes/(console)/project-[region]-[project]/overview/platforms/createApple.svelte
@@ -59,7 +59,7 @@
     On the homepage of the app, create a button that says "Send a ping" and when clicked, it should call the following function:
 
     \`\`\`
-    appwrite.ping()
+    client.ping()
     \`\`\`
 `;
 
diff --git a/src/routes/(console)/project-[region]-[project]/overview/platforms/createFlutter.svelte b/src/routes/(console)/project-[region]-[project]/overview/platforms/createFlutter.svelte
index c061858475..e0e6626029 100644
--- a/src/routes/(console)/project-[region]-[project]/overview/platforms/createFlutter.svelte
+++ b/src/routes/(console)/project-[region]-[project]/overview/platforms/createFlutter.svelte
@@ -40,25 +40,25 @@
     const projectId = page.params.project;
 
     const alreadyExistsInstructions = `
-    Install the Appwrite Flutter SDK using the following command:
+Install the Appwrite Flutter SDK using the following command:
 
-    \`\`\`
-    flutter pub add appwrite:17.0.0
-    \`\`\`
+\`\`\`
+flutter pub add appwrite:20.3.0
+\`\`\`
 
-    From a suitable lib directory, export the Appwrite client as a global variable, hardcode the project details too:
+From a suitable lib directory, export the Appwrite client as a global variable, hardcode the project details too:
 
-    \`\`\`
-    final Client client = Client()
-      .setProject("${projectId}")
-      .setEndpoint("${sdk.forProject(page.params.region, page.params.project).client.config.endpoint}");
-    \`\`\`
+\`\`\`
+final Client client = Client()
+  .setProject("${projectId}")
+  .setEndpoint("${sdk.forProject(page.params.region, page.params.project).client.config.endpoint}");
+\`\`\`
 
-    On the homepage of the app, create a button that says "Send a ping" and when clicked, it should call the following function:
+On the homepage of the app, create a button that says "Send a ping" and when clicked, it should call the following function:
 
-    \`\`\`
-    client.ping();
-    \`\`\`
+\`\`\`
+client.ping();
+\`\`\`
     `;
 
     const gitCloneCode =
diff --git a/src/routes/(console)/project-[region]-[project]/overview/platforms/createReactNative.svelte b/src/routes/(console)/project-[region]-[project]/overview/platforms/createReactNative.svelte
index d76c674f33..af345372e2 100644
--- a/src/routes/(console)/project-[region]-[project]/overview/platforms/createReactNative.svelte
+++ b/src/routes/(console)/project-[region]-[project]/overview/platforms/createReactNative.svelte
@@ -40,25 +40,25 @@
     const projectId = page.params.project;
 
     const alreadyExistsInstructions = `
-        Install the Appwrite React Native SDK using the following command, respect user's package manager of choice and use the one being used in the codebase:
+Install the Appwrite React Native SDK using the following command, respect user's package manager of choice and use the one being used in the codebase:
 
-        \`\`\`
-        npx expo install react-native-appwrite react-native-url-polyfill
-        \`\`\`
+\`\`\`
+npx expo install react-native-appwrite react-native-url-polyfill
+\`\`\`
 
-        From a suitable lib directory, export the Appwrite client as a global variable, hardcode the project details too:
+From a suitable lib directory, export the Appwrite client as a global variable, hardcode the project details too:
 
-        \`\`\`
-        const client = new Client()
-            .setProject("${projectId}")
-            .setEndpoint("${sdk.forProject(page.params.region, page.params.project).client.config.endpoint}");
-        \`\`\`
+\`\`\`
+const client = new Client()
+    .setProject("${projectId}")
+    .setEndpoint("${sdk.forProject(page.params.region, page.params.project).client.config.endpoint}");
+\`\`\`
 
-        On the homepage of the app, create a button that says "Send a ping" and when clicked, it should call the following function:
+From the entrypoint of the app, make it so that the following function is automatically called which will ping the Appwrite backend server to verify the setup. Let the user know about this function being added
 
-        \`\`\`
-        client.ping();
-        \`\`\`
+\`\`\`
+client.ping();
+\`\`\`
     `;
 
     const gitCloneCode =
diff --git a/src/routes/(console)/project-[region]-[project]/overview/platforms/createWeb.svelte b/src/routes/(console)/project-[region]-[project]/overview/platforms/createWeb.svelte
index 6b259468eb..debaff0fc4 100644
--- a/src/routes/(console)/project-[region]-[project]/overview/platforms/createWeb.svelte
+++ b/src/routes/(console)/project-[region]-[project]/overview/platforms/createWeb.svelte
@@ -165,33 +165,33 @@ ${prefix}APPWRITE_ENDPOINT = "${sdk.forProject(page.params.region, page.params.p
 
     const llmConfig: LLMPromptConfig = $derived({
         alreadyExistsInstructions: `
-            Install the Appwrite web SDK using the following command. Respect the user's package manager of choice. Do not use NPM if the user uses Bun for example.
+Install the Appwrite web SDK using the following command. Respect the user's package manager of choice. Do not use NPM if the user uses Bun for example.
 
-            \`\`\`bash
-            npm install appwrite
-            \`\`\`
+\`\`\`bash
+npm install appwrite
+\`\`\`
         
-            Create a new \`appwrite.js\` (or equivalent, respecting the framework and language, don't create a JS file if TS is being used in the project) file in a suitable lib directory and have the following code:
+Create a new \`appwrite.js\` (or equivalent, respecting the framework and language, don't create a JS file if TS is being used in the project) file in a suitable lib directory and have the following code:
 
-            \`\`\`js
-            import { Client, Account, Databases } from "appwrite";
+\`\`\`js
+import { Client, Account, Databases } from "appwrite";
 
-            const client = new Client()
-                .setEndpoint("${sdk.forProject(page.params.region, page.params.project).client.config.endpoint}")
-                .setProject("${projectId}");
+const client = new Client()
+    .setEndpoint("${sdk.forProject(page.params.region, page.params.project).client.config.endpoint}")
+    .setProject("${projectId}");
 
-            const account = new Account(client);
-            const databases = new Databases(client);
+const account = new Account(client);
+const databases = new Databases(client);
 
-            export { client, account, databases };
-            \`\`\`
+export { client, account, databases };
+\`\`\`
 
-            On the homepage of the app, create a button that says "Send a ping" and when clicked, it should call the following function:
+When the app is opened, make it so that the following function is automatically called which will ping the Appwrite backend server to verify the setup. Let the user know about this function being added
 
-            \`\`\`js
-            client.ping();
-            \`\`\`
-        `,
+\`\`\`js
+client.ping();
+\`\`\`
+`,
         title: `Copy prompt: starter kit for Appwrite in ${selectedFramework?.label || 'Web'}`,
         cloneCommand: `git clone https://github.com/appwrite/starter-for-${selectedFramework?.key}\ncd starter-for-${selectedFramework?.key}`,
         configFile:
@@ -199,15 +199,18 @@ ${prefix}APPWRITE_ENDPOINT = "${sdk.forProject(page.params.region, page.params.p
                 ? 'src/environments/environment.ts'
                 : 'appwrite.js',
         configCode:
-            selectedFramework?.key === 'angular'
-                ? `APPWRITE_PROJECT_ID=${projectId}\nAPPWRITE_PROJECT_NAME=${$project.name}\nAPPWRITE_ENDPOINT=${sdk.forProject(page.params.region, page.params.project).client.config.endpoint}`
-                : `   
-                const client = new Client()
-                    .setEndpoint("${sdk.forProject(page.params.region, page.params.project).client.config.endpoint}")
-                    .setProject("${projectId}");
-                `,
+            // selectedFramework?.key === 'angular'
+            //     ? `APPWRITE_PROJECT_ID=${projectId}\nAPPWRITE_PROJECT_NAME=${$project.name}\nAPPWRITE_ENDPOINT=${sdk.forProject(page.params.region, page.params.project).client.config.endpoint}`
+            //     : `
+            //     const client = new Client()
+            //         .setEndpoint("${sdk.forProject(page.params.region, page.params.project).client.config.endpoint}")
+            //         .setProject("${projectId}");
+            //     `,
+            `APPWRITE_PROJECT_ID = "${projectId}"
+APPWRITE_PROJECT_NAME = "${$project.name}"
+APPWRITE_ENDPOINT = "${sdk.forProject(page.params.region, page.params.project).client.config.endpoint}"`,
         configLanguage: selectedFramework?.key === 'angular' ? 'ts' : 'dotenv',
-        runInstructions: `${selectedFramework?.key === 'angular' && 'Replace the file with the configuration above'}. Install project dependencies using \`npm install\`, then run the app using \`${selectedFramework?.runCommand}\`. Demo app runs on http://localhost:${selectedFramework?.portNumber}. Click the \`Send a ping\` button to verify the setup.`,
+        runInstructions: `Install project dependencies using \`npm install\`, then run the app using \`${selectedFramework?.runCommand}\`. Demo app runs on http://localhost:${selectedFramework?.portNumber}. Click the \`Send a ping\` button to verify the setup.`,
         using: 'the terminal or VSCode'
     });
 
diff --git a/src/routes/(console)/project-[region]-[project]/overview/platforms/store.ts b/src/routes/(console)/project-[region]-[project]/overview/platforms/store.ts
index ea5296d4ff..8111af1f3e 100644
--- a/src/routes/(console)/project-[region]-[project]/overview/platforms/store.ts
+++ b/src/routes/(console)/project-[region]-[project]/overview/platforms/store.ts
@@ -34,6 +34,14 @@ export function getCorrectTitle(isConnectPlatform: boolean, platform: string) {
 
 export function generatePromptFromConfig(config: LLMPromptConfig): string {
     return `
+Goal: Setting up Appwrite SDK in the project depending on if a project already exists or not.
+
+Following are the project details:
+
+\`\`\`
+${config.configCode}
+\`\`\`
+
 Follow the steps depending on if a project already exists on user's working directory or not:
 
 ## If a project already exists:
@@ -41,17 +49,13 @@ ${config.alreadyExistsInstructions}
 
 ## If a project does not exist:
 
-1. If you're starting a new project, you can clone our starter kit from GitHub using ${config.using || 'the terminal'}. Make sure to clone in the current working directory root so that the files are directly available in the working directory.
+1. Clone the starter kit using ${config.using || 'the terminal'}. Make sure to clone in the current working directory so that the cloned files are directly available in the working directory.
 
 \`\`\`bash
-${config.cloneCommand}
+${config.cloneCommand} .
 \`\`\`
 
-2. Open the file \`${config.configFile}\`, find the code block, replace and hardcode the project details as mentioned below.
-
-\`\`\`
-${config.configCode}
-\`\`\`
+2. Replace all the occurences of environment variables with the keys mentioned in the project details section with the values mentioned in the project details section. That'd mean we are hardcoding the project details wherever project details environment variables are used. Use grep to find all the occurences of the environment variables and replace them with the values mentioned in the project details section.
 
 3. ${config.runInstructions}`;
 }
@@ -94,7 +98,7 @@ const platformConfigs: Record<string, PlatformConfig> = {
         configFile: 'lib/config/environment.dart',
         configLanguage: 'dart',
         runInstructions:
-            'Run the app on a connected device or simulator using `flutter run -d [device_name]`, then click the `Send a ping` button to verify the setup.',
+            'Run the app on a connected device or simulator using `flutter run -d [device_name]`, then click the `Send a ping` button to verify the setup. Ask the user if the AI agent should run the command to run the app for them. Provide the full command while you ask for permission.',
         using: 'the terminal'
     },
     reactnative: {
@@ -104,7 +108,7 @@ const platformConfigs: Record<string, PlatformConfig> = {
         configFile: 'index.ts',
         configLanguage: 'typescript',
         runInstructions:
-            'After replacing and hardcoding project details, run the app on a connected device or simulator using `npm install` followed by `npm run ios` or `npm run android`, then click the `Send a ping` button to verify the setup.',
+            'After replacing and hardcoding project details, run the app on a connected device or simulator using `npm install` followed by `npm run ios` or `npm run android`, then click the `Send a ping` button to verify the setup. Ask the user if the AI agent should run the command to run the app for them. Provide the full command while you ask for permission.',
         using: 'the terminal or VSCode'
     }
 };

From b620823cf3005cad875e4b55e5e31a3dfcc0d51d Mon Sep 17 00:00:00 2001
From: Atharva Deosthale <atharva.deosthale17@gmail.com>
Date: Tue, 18 Nov 2025 17:17:59 +0530
Subject: [PATCH 09/16] address comments

---
 .../overview/components/CursorIconLarge.svelte                  | 2 +-
 .../overview/platforms/llmBanner.svelte                         | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/routes/(console)/project-[region]-[project]/overview/components/CursorIconLarge.svelte b/src/routes/(console)/project-[region]-[project]/overview/components/CursorIconLarge.svelte
index d4619ac202..80ef26af06 100644
--- a/src/routes/(console)/project-[region]-[project]/overview/components/CursorIconLarge.svelte
+++ b/src/routes/(console)/project-[region]-[project]/overview/components/CursorIconLarge.svelte
@@ -4,4 +4,4 @@
     import Dark from '../assets/dark/cursor-ai.svg';
 </script>
 
-<img src={$app.themeInUse === 'dark' ? Dark : Light} width="20" height="20" alt="" />
+<img src={$app.themeInUse === 'dark' ? Dark : Light} width="20" height="20" alt="Cursor" />
diff --git a/src/routes/(console)/project-[region]-[project]/overview/platforms/llmBanner.svelte b/src/routes/(console)/project-[region]-[project]/overview/platforms/llmBanner.svelte
index 7c47940439..794d90e79f 100644
--- a/src/routes/(console)/project-[region]-[project]/overview/platforms/llmBanner.svelte
+++ b/src/routes/(console)/project-[region]-[project]/overview/platforms/llmBanner.svelte
@@ -110,7 +110,7 @@
             </svelte:fragment>
             <Layout.Stack direction="column" class="alert-content" gap="l">
                 <Layout.Stack direction="column" alignItems="center" gap="s">
-                    <Typography.Text variant="m-400">
+                    <Typography.Text>
                         Copy the prompt or open it directly in an AI tool like Cursor or Lovable to
                         get step-by-step instructions, starter code, and SDK commands for your
                         project.

From 0c3d29a3a405e9a7c432d3cb3d8592e5e7671404 Mon Sep 17 00:00:00 2001
From: Atharva Deosthale <atharva.deosthale17@gmail.com>
Date: Tue, 18 Nov 2025 17:46:02 +0530
Subject: [PATCH 10/16] merge conflicts

---
 package.json                                  | 10 +++----
 pnpm-lock.yaml                                | 30 +++++++++----------
 .../overview/platforms/llmBanner.svelte       |  1 -
 3 files changed, 20 insertions(+), 21 deletions(-)

diff --git a/package.json b/package.json
index 51a02db947..ab5241643f 100644
--- a/package.json
+++ b/package.json
@@ -12,7 +12,7 @@
         "clean": "rm -rf node_modules && rm -rf .svelte_kit && pnpm i --force",
         "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
         "check:watch": "svelte-check --tsconfig ./tsconfig.json --watch",
-        "format": "prettier --write .",
+        "format": "prettier --write --cache .",
         "lint": "prettier --check . && eslint .",
         "test": "TZ=EST vitest run",
         "test:ui": "TZ=EST vitest --ui",
@@ -22,11 +22,11 @@
     },
     "dependencies": {
         "@ai-sdk/svelte": "^1.1.24",
-        "@appwrite.io/console": "https://pkg.pr.new/appwrite-labs/cloud/@appwrite.io/console@fe3277e",
+        "@appwrite.io/console": "https://pkg.pr.new/appwrite-labs/cloud/@appwrite.io/console@2752",
         "@appwrite.io/pink-icons": "0.25.0",
-        "@appwrite.io/pink-icons-svelte": "https://pkg.vc/-/@appwrite/@appwrite.io/pink-icons-svelte@c67ae13",
+        "@appwrite.io/pink-icons-svelte": "https://pkg.vc/-/@appwrite/@appwrite.io/pink-icons-svelte@bd82d9a",
         "@appwrite.io/pink-legacy": "^1.0.3",
-        "@appwrite.io/pink-svelte": "https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@c67ae13",
+        "@appwrite.io/pink-svelte": "https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@bd82d9a",
         "@faker-js/faker": "^9.9.0",
         "@popperjs/core": "^2.11.8",
         "@sentry/sveltekit": "^8.38.0",
@@ -95,5 +95,5 @@
             "svelte-preprocess"
         ]
     },
-    "packageManager": "pnpm@10.15.1"
+    "packageManager": "pnpm@10.20.0"
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 2d33bb7312..75220968df 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -12,20 +12,20 @@ importers:
         specifier: ^1.1.24
         version: 1.1.24(svelte@5.25.3)(zod@3.24.3)
       '@appwrite.io/console':
-        specifier: https://pkg.pr.new/appwrite-labs/cloud/@appwrite.io/console@fe3277e
-        version: https://pkg.pr.new/appwrite-labs/cloud/@appwrite.io/console@fe3277e
+        specifier: https://pkg.pr.new/appwrite-labs/cloud/@appwrite.io/console@2752
+        version: https://pkg.pr.new/appwrite-labs/cloud/@appwrite.io/console@2752
       '@appwrite.io/pink-icons':
         specifier: 0.25.0
         version: 0.25.0
       '@appwrite.io/pink-icons-svelte':
-        specifier: https://pkg.vc/-/@appwrite/@appwrite.io/pink-icons-svelte@c67ae13
-        version: https://pkg.vc/-/@appwrite/@appwrite.io/pink-icons-svelte@c67ae13(svelte@5.25.3)
+        specifier: https://pkg.vc/-/@appwrite/@appwrite.io/pink-icons-svelte@bd82d9a
+        version: https://pkg.vc/-/@appwrite/@appwrite.io/pink-icons-svelte@bd82d9a(svelte@5.25.3)
       '@appwrite.io/pink-legacy':
         specifier: ^1.0.3
         version: 1.0.3
       '@appwrite.io/pink-svelte':
-        specifier: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@c67ae13
-        version: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@c67ae13(svelte@5.25.3)
+        specifier: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@bd82d9a
+        version: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@bd82d9a(svelte@5.25.3)
       '@faker-js/faker':
         specifier: ^9.9.0
         version: 9.9.0
@@ -260,8 +260,8 @@ packages:
   '@analytics/type-utils@0.6.2':
     resolution: {integrity: sha512-TD+xbmsBLyYy/IxFimW/YL/9L2IEnM7/EoV9Aeh56U64Ify8o27HJcKjo38XY9Tcn0uOq1AX3thkKgvtWvwFQg==}
 
-  '@appwrite.io/console@https://pkg.pr.new/appwrite-labs/cloud/@appwrite.io/console@fe3277e':
-    resolution: {tarball: https://pkg.pr.new/appwrite-labs/cloud/@appwrite.io/console@fe3277e}
+  '@appwrite.io/console@https://pkg.pr.new/appwrite-labs/cloud/@appwrite.io/console@2752':
+    resolution: {tarball: https://pkg.pr.new/appwrite-labs/cloud/@appwrite.io/console@2752}
     version: 1.10.0
 
   '@appwrite.io/pink-icons-svelte@2.0.0-RC.1':
@@ -269,8 +269,8 @@ packages:
     peerDependencies:
       svelte: ^4.0.0
 
-  '@appwrite.io/pink-icons-svelte@https://pkg.vc/-/@appwrite/@appwrite.io/pink-icons-svelte@c67ae13':
-    resolution: {tarball: https://pkg.vc/-/@appwrite/@appwrite.io/pink-icons-svelte@c67ae13}
+  '@appwrite.io/pink-icons-svelte@https://pkg.vc/-/@appwrite/@appwrite.io/pink-icons-svelte@bd82d9a':
+    resolution: {tarball: https://pkg.vc/-/@appwrite/@appwrite.io/pink-icons-svelte@bd82d9a}
     version: 2.0.0-RC.1
     peerDependencies:
       svelte: ^4.0.0
@@ -284,8 +284,8 @@ packages:
   '@appwrite.io/pink-legacy@1.0.3':
     resolution: {integrity: sha512-GGde5fmPhs+s6/3aFeMPc/kKADG/gTFkYQSy6oBN8pK0y0XNCLrZZgBv+EBbdhwdtqVEWXa0X85Mv9w7jcIlwQ==}
 
-  '@appwrite.io/pink-svelte@https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@c67ae13':
-    resolution: {tarball: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@c67ae13}
+  '@appwrite.io/pink-svelte@https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@bd82d9a':
+    resolution: {tarball: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@bd82d9a}
     version: 2.0.0-RC.2
     peerDependencies:
       svelte: ^4.0.0
@@ -3703,13 +3703,13 @@ snapshots:
 
   '@analytics/type-utils@0.6.2': {}
 
-  '@appwrite.io/console@https://pkg.pr.new/appwrite-labs/cloud/@appwrite.io/console@fe3277e': {}
+  '@appwrite.io/console@https://pkg.pr.new/appwrite-labs/cloud/@appwrite.io/console@2752': {}
 
   '@appwrite.io/pink-icons-svelte@2.0.0-RC.1(svelte@5.25.3)':
     dependencies:
       svelte: 5.25.3
 
-  '@appwrite.io/pink-icons-svelte@https://pkg.vc/-/@appwrite/@appwrite.io/pink-icons-svelte@c67ae13(svelte@5.25.3)':
+  '@appwrite.io/pink-icons-svelte@https://pkg.vc/-/@appwrite/@appwrite.io/pink-icons-svelte@bd82d9a(svelte@5.25.3)':
     dependencies:
       svelte: 5.25.3
 
@@ -3722,7 +3722,7 @@ snapshots:
       '@appwrite.io/pink-icons': 1.0.0
       the-new-css-reset: 1.11.3
 
-  '@appwrite.io/pink-svelte@https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@c67ae13(svelte@5.25.3)':
+  '@appwrite.io/pink-svelte@https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@bd82d9a(svelte@5.25.3)':
     dependencies:
       '@appwrite.io/pink-icons-svelte': 2.0.0-RC.1(svelte@5.25.3)
       '@floating-ui/dom': 1.6.13
diff --git a/src/routes/(console)/project-[region]-[project]/overview/platforms/llmBanner.svelte b/src/routes/(console)/project-[region]-[project]/overview/platforms/llmBanner.svelte
index 794d90e79f..15420dcedc 100644
--- a/src/routes/(console)/project-[region]-[project]/overview/platforms/llmBanner.svelte
+++ b/src/routes/(console)/project-[region]-[project]/overview/platforms/llmBanner.svelte
@@ -168,7 +168,6 @@
                                                             variant="m-500"
                                                             >{o.label}</Typography.Text>
                                                         <Typography.Text
-                                                            variant="m-400"
                                                             color="--fgcolor-neutral-tertiary">
                                                             {o.description}
                                                         </Typography.Text>

From 04a1b2e9384ea901d7de6a2fad773e2397ca84b1 Mon Sep 17 00:00:00 2001
From: Atharva Deosthale <atharva.deosthale17@gmail.com>
Date: Tue, 18 Nov 2025 17:58:25 +0530
Subject: [PATCH 11/16] Update
 src/routes/(console)/project-[region]-[project]/overview/platforms/store.ts

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
---
 .../project-[region]-[project]/overview/platforms/store.ts     | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/routes/(console)/project-[region]-[project]/overview/platforms/store.ts b/src/routes/(console)/project-[region]-[project]/overview/platforms/store.ts
index 8111af1f3e..f5241c8064 100644
--- a/src/routes/(console)/project-[region]-[project]/overview/platforms/store.ts
+++ b/src/routes/(console)/project-[region]-[project]/overview/platforms/store.ts
@@ -55,8 +55,7 @@ ${config.alreadyExistsInstructions}
 ${config.cloneCommand} .
 \`\`\`
 
-2. Replace all the occurences of environment variables with the keys mentioned in the project details section with the values mentioned in the project details section. That'd mean we are hardcoding the project details wherever project details environment variables are used. Use grep to find all the occurences of the environment variables and replace them with the values mentioned in the project details section.
-
+2. Replace all occurrences of the environment variables described in the project details section with their corresponding values. This effectively hardcodes the project details wherever those environment variables are used. Use grep (or an equivalent search) to find and update all occurrences.
 3. ${config.runInstructions}`;
 }
 

From 9423fc9421e16557355777dbef81345f97d41f4b Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Tue, 18 Nov 2025 19:56:24 +0530
Subject: [PATCH 12/16] ci: empty commit


From 8b25d4f93ccc475427712df3f04e8504a3b2f07d Mon Sep 17 00:00:00 2001
From: Atharva Deosthale <atharva.deosthale17@gmail.com>
Date: Wed, 19 Nov 2025 16:41:13 +0530
Subject: [PATCH 13/16] fetch latest releases from github api

---
 .../overview/platforms/createApple.svelte     | 30 +++++++++----------
 .../overview/platforms/createFlutter.svelte   | 30 +++++++++++++++++--
 .../overview/platforms/llmBanner.svelte       |  2 +-
 3 files changed, 43 insertions(+), 19 deletions(-)

diff --git a/src/routes/(console)/project-[region]-[project]/overview/platforms/createApple.svelte b/src/routes/(console)/project-[region]-[project]/overview/platforms/createApple.svelte
index a8fea18cab..2a156b76da 100644
--- a/src/routes/(console)/project-[region]-[project]/overview/platforms/createApple.svelte
+++ b/src/routes/(console)/project-[region]-[project]/overview/platforms/createApple.svelte
@@ -40,27 +40,27 @@
     const projectId = page.params.project;
 
     const alreadyExistsInstructions = `
-    Install the Appwrite iOS SDK using the following package URL:
+Install the Appwrite iOS SDK using the following package URL:
 
-    \`\`\`
-    https://github.com/appwrite/sdk-for-apple
-    \`\`\`
+\`\`\`
+https://github.com/appwrite/sdk-for-apple
+\`\`\`
 
-    From a suitable lib directory, export the Appwrite client as a global variable:
+From a suitable lib directory, export the Appwrite client as a global variable:
 
-    \`\`\`
-    let client = Client()
-        .setEndpoint("${sdk.forProject(page.params.region, page.params.project).client.config.endpoint}")
-        .setProject("${projectId}")
+\`\`\`
+let client = Client()
+    .setEndpoint("${sdk.forProject(page.params.region, page.params.project).client.config.endpoint}")
+    .setProject("${projectId}")
 
-    let account = Account(client)
-    \`\`\`
+let account = Account(client)
+\`\`\`
 
-    On the homepage of the app, create a button that says "Send a ping" and when clicked, it should call the following function:
+On the homepage of the app, create a button that says "Send a ping" and when clicked, it should call the following function:
 
-    \`\`\`
-    client.ping()
-    \`\`\`
+\`\`\`
+client.ping()
+\`\`\`
 `;
 
     const gitCloneCode =
diff --git a/src/routes/(console)/project-[region]-[project]/overview/platforms/createFlutter.svelte b/src/routes/(console)/project-[region]-[project]/overview/platforms/createFlutter.svelte
index 9f567ff281..6f36980744 100644
--- a/src/routes/(console)/project-[region]-[project]/overview/platforms/createFlutter.svelte
+++ b/src/routes/(console)/project-[region]-[project]/overview/platforms/createFlutter.svelte
@@ -38,12 +38,16 @@
     let isPlatformCreated = $state(isConnectPlatform);
 
     const projectId = page.params.project;
+    const FLUTTER_RELEASES_ENDPOINT =
+        'https://api.github.com/repos/appwrite/sdk-for-flutter/releases';
+    let flutterSdkVersion = $state('20.3.0');
 
-    const alreadyExistsInstructions = `
+    function buildFlutterInstructions(version: string) {
+        return `
 Install the Appwrite Flutter SDK using the following command:
 
 \`\`\`
-flutter pub add appwrite:20.3.0
+flutter pub add appwrite:${version}
 \`\`\`
 
 From a suitable lib directory, export the Appwrite client as a global variable, hardcode the project details too:
@@ -59,7 +63,10 @@ On the homepage of the app, create a button that says "Send a ping" and when cli
 \`\`\`
 client.ping();
 \`\`\`
-    `;
+        `;
+    }
+
+    const alreadyExistsInstructions = $derived(buildFlutterInstructions(flutterSdkVersion));
 
     const gitCloneCode =
         '\ngit clone https://github.com/appwrite/starter-for-flutter\ncd starter-for-flutter\n';
@@ -134,6 +141,22 @@ client.ping();
         [PlatformType.Flutterwindows]: 'Package name'
     };
 
+    async function fetchFlutterSdkVersion() {
+        try {
+            const response = await fetch(FLUTTER_RELEASES_ENDPOINT);
+            if (!response.ok) {
+                throw new Error(`Failed to fetch Flutter releases: ${response.status}`);
+            }
+            const data = await response.json();
+            const latestTag = data?.[0]?.tag_name;
+            if (latestTag) {
+                flutterSdkVersion = latestTag;
+            }
+        } catch (error) {
+            console.error('Unable to fetch latest Flutter SDK version', error);
+        }
+    }
+
     async function createFlutterPlatform() {
         try {
             isCreatingPlatform = true;
@@ -181,6 +204,7 @@ client.ping();
     }
 
     onMount(() => {
+        fetchFlutterSdkVersion();
         const unsubscribe = realtime.forConsole(page.params.region, 'console', (response) => {
             if (response.events.includes(`projects.${projectId}.ping`)) {
                 connectionSuccessful = true;
diff --git a/src/routes/(console)/project-[region]-[project]/overview/platforms/llmBanner.svelte b/src/routes/(console)/project-[region]-[project]/overview/platforms/llmBanner.svelte
index 15420dcedc..ca2c8d6806 100644
--- a/src/routes/(console)/project-[region]-[project]/overview/platforms/llmBanner.svelte
+++ b/src/routes/(console)/project-[region]-[project]/overview/platforms/llmBanner.svelte
@@ -8,7 +8,7 @@
     import { Click, trackEvent } from '$lib/actions/analytics';
     import IconAINotification from '../../databases/database-[database]/(suggestions)/icon/aiNotification.svelte';
     import Avatar from '$lib/components/avatar.svelte';
-    import CursorIcon from '../components/CursorIconLarge.svelte';
+    import CursorIcon from '$routes/(console)/project-[region]-[project]/overview/components/CursorIconLarge.svelte';
     import type { ComponentType } from 'svelte';
 
     let {

From c7fb2320cae054d14363947c5e5cb8c9784de042 Mon Sep 17 00:00:00 2001
From: Atharva Deosthale <atharva.deosthale17@gmail.com>
Date: Wed, 19 Nov 2025 16:44:58 +0530
Subject: [PATCH 14/16] add android version fetching

---
 .../overview/platforms/createAndroid.svelte   | 32 ++++++++++++++++---
 1 file changed, 28 insertions(+), 4 deletions(-)

diff --git a/src/routes/(console)/project-[region]-[project]/overview/platforms/createAndroid.svelte b/src/routes/(console)/project-[region]-[project]/overview/platforms/createAndroid.svelte
index 501d3bd930..1800f96467 100644
--- a/src/routes/(console)/project-[region]-[project]/overview/platforms/createAndroid.svelte
+++ b/src/routes/(console)/project-[region]-[project]/overview/platforms/createAndroid.svelte
@@ -36,8 +36,12 @@
     let isPlatformCreated = $state(isConnectPlatform);
 
     const projectId = page.params.project;
+    const ANDROID_RELEASES_ENDPOINT =
+        'https://api.github.com/repos/appwrite/sdk-for-android/releases';
+    let androidSdkVersion = $state('11.3.0');
 
-    const alreadyExistsInstructions = `
+    function buildAndroidInstructions(version: string) {
+        return `
 Confirm you're working inside the correct Android project before editing anything:
 - Navigate into the directory that contains the real Android app module (look for gradlew, settings.gradle, and the app-level build.gradle(.kts)).
 - If Cursor opens in a parent folder (like your home directory) or you see multiple Android projects, ask which one to modify before making changes.
@@ -47,7 +51,7 @@ Prefer Version Catalogs when adding the Appwrite SDK:
 1. If ./gradle/libs.versions.toml exists, add or reuse an Appwrite entry:
 \`\`\`toml
 [libraries]
-appwrite = { module = "io.appwrite:sdk-for-android", version = "11.3.0" }
+appwrite = { module = "io.appwrite:sdk-for-android", version = "${version}" }
 \`\`\`
 2. Reference it inside the module's dependencies block:
 \`\`\`kotlin
@@ -57,11 +61,11 @@ dependencies {
 \`\`\`
 Only when the project lacks ./gradle/libs.versions.toml should you hardcode the dependency:
 \`\`\`kotlin
-implementation("io.appwrite:sdk-for-android:11.3.0")
+implementation("io.appwrite:sdk-for-android:${version}")
 \`\`\`
 Legacy Groovy scripts should use:
 \`\`\`groovy
-implementation "io.appwrite:sdk-for-android:11.3.0"
+implementation "io.appwrite:sdk-for-android:${version}"
 \`\`\`
 
 Before introducing any new files, search the project (app/src, libs/, shared modules, etc.) for existing Appwrite client helpers (look for \`Client(\`, \`AppwriteClient\`, or \`.setEndpoint\`). If a client already exists, update its configuration instead of creating a duplicate.
@@ -80,6 +84,9 @@ From the app's entry point (e.g., Application class or the first launched Activi
 client.ping()
 \`\`\`
 `;
+    }
+
+    const alreadyExistsInstructions = $derived(buildAndroidInstructions(androidSdkVersion));
 
     const gitCloneCode =
         '\ngit clone https://github.com/appwrite/starter-for-android\ncd starter-for-android\n';
@@ -88,6 +95,22 @@ client.ping()
 const val APPWRITE_PROJECT_NAME = "${$project.name}"
 const val APPWRITE_PUBLIC_ENDPOINT = "${sdk.forProject(page.params.region, page.params.project).client.config.endpoint}"`;
 
+    async function fetchAndroidSdkVersion() {
+        try {
+            const response = await fetch(ANDROID_RELEASES_ENDPOINT);
+            if (!response.ok) {
+                throw new Error(`Failed to fetch Android SDK releases: ${response.status}`);
+            }
+            const data = await response.json();
+            const latestTag = data?.[0]?.tag_name;
+            if (latestTag) {
+                androidSdkVersion = latestTag;
+            }
+        } catch (error) {
+            console.error('Unable to fetch latest Android SDK version', error);
+        }
+    }
+
     async function createAndroidPlatform() {
         try {
             isCreatingPlatform = true;
@@ -128,6 +151,7 @@ const val APPWRITE_PUBLIC_ENDPOINT = "${sdk.forProject(page.params.region, page.
     }
 
     onMount(() => {
+        fetchAndroidSdkVersion();
         const unsubscribe = realtime.forConsole(page.params.region, 'console', (response) => {
             if (response.events.includes(`projects.${projectId}.ping`)) {
                 connectionSuccessful = true;

From 693096820ae820a78113651a95de7b923f3e7328 Mon Sep 17 00:00:00 2001
From: Atharva Deosthale <atharva.deosthale17@gmail.com>
Date: Wed, 19 Nov 2025 18:05:28 +0530
Subject: [PATCH 15/16] use appwrite endpoint for versions

---
 .../overview/platforms/createAndroid.svelte    | 18 ++++++++++--------
 .../overview/platforms/createFlutter.svelte    | 18 ++++++++++--------
 2 files changed, 20 insertions(+), 16 deletions(-)

diff --git a/src/routes/(console)/project-[region]-[project]/overview/platforms/createAndroid.svelte b/src/routes/(console)/project-[region]-[project]/overview/platforms/createAndroid.svelte
index 1800f96467..2b8610a1f8 100644
--- a/src/routes/(console)/project-[region]-[project]/overview/platforms/createAndroid.svelte
+++ b/src/routes/(console)/project-[region]-[project]/overview/platforms/createAndroid.svelte
@@ -17,7 +17,7 @@
     import { Card } from '$lib/components';
     import { page } from '$app/state';
     import { onMount } from 'svelte';
-    import { realtime, sdk } from '$lib/stores/sdk';
+    import { getApiEndpoint, realtime, sdk } from '$lib/stores/sdk';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
     import { addNotification } from '$lib/stores/notifications';
     import { fade } from 'svelte/transition';
@@ -36,8 +36,10 @@
     let isPlatformCreated = $state(isConnectPlatform);
 
     const projectId = page.params.project;
-    const ANDROID_RELEASES_ENDPOINT =
-        'https://api.github.com/repos/appwrite/sdk-for-android/releases';
+    const VERSIONS_ENDPOINT = (() => {
+        const endpoint = getApiEndpoint(page.params.region);
+        return endpoint.replace(/\/v1\/?$/, '') + '/versions';
+    })();
     let androidSdkVersion = $state('11.3.0');
 
     function buildAndroidInstructions(version: string) {
@@ -97,14 +99,14 @@ const val APPWRITE_PUBLIC_ENDPOINT = "${sdk.forProject(page.params.region, page.
 
     async function fetchAndroidSdkVersion() {
         try {
-            const response = await fetch(ANDROID_RELEASES_ENDPOINT);
+            const response = await fetch(VERSIONS_ENDPOINT);
             if (!response.ok) {
-                throw new Error(`Failed to fetch Android SDK releases: ${response.status}`);
+                throw new Error(`Failed to fetch versions: ${response.status}`);
             }
             const data = await response.json();
-            const latestTag = data?.[0]?.tag_name;
-            if (latestTag) {
-                androidSdkVersion = latestTag;
+            const latestVersion = data?.['client-android'];
+            if (typeof latestVersion === 'string' && latestVersion.trim()) {
+                androidSdkVersion = latestVersion.trim();
             }
         } catch (error) {
             console.error('Unable to fetch latest Android SDK version', error);
diff --git a/src/routes/(console)/project-[region]-[project]/overview/platforms/createFlutter.svelte b/src/routes/(console)/project-[region]-[project]/overview/platforms/createFlutter.svelte
index 6f36980744..1333a43247 100644
--- a/src/routes/(console)/project-[region]-[project]/overview/platforms/createFlutter.svelte
+++ b/src/routes/(console)/project-[region]-[project]/overview/platforms/createFlutter.svelte
@@ -18,7 +18,7 @@
     import { Card } from '$lib/components';
     import { page } from '$app/state';
     import { onMount } from 'svelte';
-    import { realtime, sdk } from '$lib/stores/sdk';
+    import { getApiEndpoint, realtime, sdk } from '$lib/stores/sdk';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
     import { addNotification } from '$lib/stores/notifications';
     import { fade } from 'svelte/transition';
@@ -38,8 +38,10 @@
     let isPlatformCreated = $state(isConnectPlatform);
 
     const projectId = page.params.project;
-    const FLUTTER_RELEASES_ENDPOINT =
-        'https://api.github.com/repos/appwrite/sdk-for-flutter/releases';
+    const VERSIONS_ENDPOINT = (() => {
+        const endpoint = getApiEndpoint(page.params.region);
+        return endpoint.replace(/\/v1\/?$/, '') + '/versions';
+    })();
     let flutterSdkVersion = $state('20.3.0');
 
     function buildFlutterInstructions(version: string) {
@@ -143,14 +145,14 @@ client.ping();
 
     async function fetchFlutterSdkVersion() {
         try {
-            const response = await fetch(FLUTTER_RELEASES_ENDPOINT);
+            const response = await fetch(VERSIONS_ENDPOINT);
             if (!response.ok) {
-                throw new Error(`Failed to fetch Flutter releases: ${response.status}`);
+                throw new Error(`Failed to fetch versions: ${response.status}`);
             }
             const data = await response.json();
-            const latestTag = data?.[0]?.tag_name;
-            if (latestTag) {
-                flutterSdkVersion = latestTag;
+            const latestVersion = data?.['client-flutter'];
+            if (typeof latestVersion === 'string' && latestVersion.trim()) {
+                flutterSdkVersion = latestVersion.trim();
             }
         } catch (error) {
             console.error('Unable to fetch latest Flutter SDK version', error);

From d174af85c55cf9275c02ec6029d0d7ee8290ac60 Mon Sep 17 00:00:00 2001
From: Atharva Deosthale <atharva.deosthale17@gmail.com>
Date: Wed, 19 Nov 2025 18:57:10 +0530
Subject: [PATCH 16/16] use the split button

---
 package.json                                  |   4 +-
 pnpm-lock.yaml                                |  20 +-
 .../(suggestions)/icon/ai.svelte              |   5 -
 .../overview/platforms/createAndroid.svelte   |   3 +-
 .../overview/platforms/createFlutter.svelte   |   3 +-
 .../overview/platforms/llmBanner.svelte       | 212 +++++++-----------
 6 files changed, 94 insertions(+), 153 deletions(-)

diff --git a/package.json b/package.json
index 04412b0757..c66472af6f 100644
--- a/package.json
+++ b/package.json
@@ -24,9 +24,9 @@
         "@ai-sdk/svelte": "^1.1.24",
         "@appwrite.io/console": "https://pkg.vc/-/@appwrite/@appwrite.io/console@315d6c5",
         "@appwrite.io/pink-icons": "0.25.0",
-        "@appwrite.io/pink-icons-svelte": "https://pkg.vc/-/@appwrite/@appwrite.io/pink-icons-svelte@bd82d9a",
+        "@appwrite.io/pink-icons-svelte": "https://pkg.vc/-/@appwrite/@appwrite.io/pink-icons-svelte@6916470",
         "@appwrite.io/pink-legacy": "^1.0.3",
-        "@appwrite.io/pink-svelte": "https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@bd82d9a",
+        "@appwrite.io/pink-svelte": "https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@33845eb",
         "@faker-js/faker": "^9.9.0",
         "@popperjs/core": "^2.11.8",
         "@sentry/sveltekit": "^8.38.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 3e8efca11f..35008b89c1 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -18,14 +18,14 @@ importers:
         specifier: 0.25.0
         version: 0.25.0
       '@appwrite.io/pink-icons-svelte':
-        specifier: https://pkg.vc/-/@appwrite/@appwrite.io/pink-icons-svelte@bd82d9a
-        version: https://pkg.vc/-/@appwrite/@appwrite.io/pink-icons-svelte@bd82d9a(svelte@5.25.3)
+        specifier: https://pkg.vc/-/@appwrite/@appwrite.io/pink-icons-svelte@6916470
+        version: https://pkg.vc/-/@appwrite/@appwrite.io/pink-icons-svelte@6916470(svelte@5.25.3)
       '@appwrite.io/pink-legacy':
         specifier: ^1.0.3
         version: 1.0.3
       '@appwrite.io/pink-svelte':
-        specifier: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@bd82d9a
-        version: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@bd82d9a(svelte@5.25.3)
+        specifier: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@33845eb
+        version: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@33845eb(svelte@5.25.3)
       '@faker-js/faker':
         specifier: ^9.9.0
         version: 9.9.0
@@ -269,8 +269,8 @@ packages:
     peerDependencies:
       svelte: ^4.0.0
 
-  '@appwrite.io/pink-icons-svelte@https://pkg.vc/-/@appwrite/@appwrite.io/pink-icons-svelte@bd82d9a':
-    resolution: {tarball: https://pkg.vc/-/@appwrite/@appwrite.io/pink-icons-svelte@bd82d9a}
+  '@appwrite.io/pink-icons-svelte@https://pkg.vc/-/@appwrite/@appwrite.io/pink-icons-svelte@6916470':
+    resolution: {tarball: https://pkg.vc/-/@appwrite/@appwrite.io/pink-icons-svelte@6916470}
     version: 2.0.0-RC.1
     peerDependencies:
       svelte: ^4.0.0
@@ -284,8 +284,8 @@ packages:
   '@appwrite.io/pink-legacy@1.0.3':
     resolution: {integrity: sha512-GGde5fmPhs+s6/3aFeMPc/kKADG/gTFkYQSy6oBN8pK0y0XNCLrZZgBv+EBbdhwdtqVEWXa0X85Mv9w7jcIlwQ==}
 
-  '@appwrite.io/pink-svelte@https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@bd82d9a':
-    resolution: {tarball: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@bd82d9a}
+  '@appwrite.io/pink-svelte@https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@33845eb':
+    resolution: {tarball: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@33845eb}
     version: 2.0.0-RC.2
     peerDependencies:
       svelte: ^4.0.0
@@ -3709,7 +3709,7 @@ snapshots:
     dependencies:
       svelte: 5.25.3
 
-  '@appwrite.io/pink-icons-svelte@https://pkg.vc/-/@appwrite/@appwrite.io/pink-icons-svelte@bd82d9a(svelte@5.25.3)':
+  '@appwrite.io/pink-icons-svelte@https://pkg.vc/-/@appwrite/@appwrite.io/pink-icons-svelte@6916470(svelte@5.25.3)':
     dependencies:
       svelte: 5.25.3
 
@@ -3722,7 +3722,7 @@ snapshots:
       '@appwrite.io/pink-icons': 1.0.0
       the-new-css-reset: 1.11.3
 
-  '@appwrite.io/pink-svelte@https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@bd82d9a(svelte@5.25.3)':
+  '@appwrite.io/pink-svelte@https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@33845eb(svelte@5.25.3)':
     dependencies:
       '@appwrite.io/pink-icons-svelte': 2.0.0-RC.1(svelte@5.25.3)
       '@floating-ui/dom': 1.6.13
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/(suggestions)/icon/ai.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/(suggestions)/icon/ai.svelte
index 9fae0e544b..761f3a51cd 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/(suggestions)/icon/ai.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/(suggestions)/icon/ai.svelte
@@ -82,9 +82,4 @@
             aspect-ratio: 1/1;
         }
     }
-
-    :global(.ai-icon-holder.notification) {
-        width: 36px !important;
-        height: 32px !important;
-    }
 </style>
diff --git a/src/routes/(console)/project-[region]-[project]/overview/platforms/createAndroid.svelte b/src/routes/(console)/project-[region]-[project]/overview/platforms/createAndroid.svelte
index 2b8610a1f8..3abd55aa93 100644
--- a/src/routes/(console)/project-[region]-[project]/overview/platforms/createAndroid.svelte
+++ b/src/routes/(console)/project-[region]-[project]/overview/platforms/createAndroid.svelte
@@ -38,7 +38,8 @@
     const projectId = page.params.project;
     const VERSIONS_ENDPOINT = (() => {
         const endpoint = getApiEndpoint(page.params.region);
-        return endpoint.replace(/\/v1\/?$/, '') + '/versions';
+        const url = new URL('/versions', endpoint);
+        return url.toString();
     })();
     let androidSdkVersion = $state('11.3.0');
 
diff --git a/src/routes/(console)/project-[region]-[project]/overview/platforms/createFlutter.svelte b/src/routes/(console)/project-[region]-[project]/overview/platforms/createFlutter.svelte
index 1333a43247..6c40f44891 100644
--- a/src/routes/(console)/project-[region]-[project]/overview/platforms/createFlutter.svelte
+++ b/src/routes/(console)/project-[region]-[project]/overview/platforms/createFlutter.svelte
@@ -40,7 +40,8 @@
     const projectId = page.params.project;
     const VERSIONS_ENDPOINT = (() => {
         const endpoint = getApiEndpoint(page.params.region);
-        return endpoint.replace(/\/v1\/?$/, '') + '/versions';
+        const url = new URL('/versions', endpoint);
+        return url.toString();
     })();
     let flutterSdkVersion = $state('20.3.0');
 
diff --git a/src/routes/(console)/project-[region]-[project]/overview/platforms/llmBanner.svelte b/src/routes/(console)/project-[region]-[project]/overview/platforms/llmBanner.svelte
index ca2c8d6806..08c28c9ac7 100644
--- a/src/routes/(console)/project-[region]-[project]/overview/platforms/llmBanner.svelte
+++ b/src/routes/(console)/project-[region]-[project]/overview/platforms/llmBanner.svelte
@@ -1,7 +1,15 @@
 <script lang="ts">
     import { copy } from '$lib/helpers/copy';
     import { Button } from '$lib/elements/forms';
-    import { ActionMenu, Alert, Icon, Layout, Popover, Typography } from '@appwrite.io/pink-svelte';
+    import {
+        ActionMenu,
+        Alert,
+        Icon,
+        Layout,
+        Popover,
+        Typography,
+        Button as PinkButton
+    } from '@appwrite.io/pink-svelte';
     import { IconChevronDown, IconChevronUp, IconLovable } from '@appwrite.io/pink-icons-svelte';
     import { addNotification } from '$lib/stores/notifications';
     import { buildPlatformConfig, generatePromptFromConfig, type LLMPromptConfig } from './store';
@@ -99,25 +107,62 @@
 </script>
 
 {#if showAlert}
-    <div class="custom-inline-alert">
-        <Alert.Inline
-            status="info"
-            title="Set up your starter kit with AI"
-            dismissible
-            on:dismiss={() => (showAlert = false)}>
-            <svelte:fragment slot="icon">
-                <IconAINotification />
-            </svelte:fragment>
-            <Layout.Stack direction="column" class="alert-content" gap="l">
-                <Layout.Stack direction="column" alignItems="center" gap="s">
-                    <Typography.Text>
-                        Copy the prompt or open it directly in an AI tool like Cursor or Lovable to
-                        get step-by-step instructions, starter code, and SDK commands for your
-                        project.
-                    </Typography.Text>
-                </Layout.Stack>
+    <Alert.Inline
+        status="info"
+        title="Set up your starter kit with AI"
+        dismissible
+        --bgcolor-neutral-default="var(--bgcolor-neutral-primary)"
+        --fgcolor-info="var(--fgcolor-neutral-primary)"
+        on:dismiss={() => (showAlert = false)}>
+        <svelte:fragment slot="icon">
+            <IconAINotification />
+        </svelte:fragment>
+        <Layout.Stack direction="column" class="alert-content" gap="l">
+            <Layout.Stack direction="column" alignItems="center" gap="s">
+                <Typography.Text>
+                    Copy the prompt or open it directly in an AI tool like Cursor or Lovable to get
+                    step-by-step instructions, starter code, and SDK commands for your project.
+                </Typography.Text>
+            </Layout.Stack>
 
-                <Layout.Stack direction="row" alignItems="stretch" gap="none">
+            <Popover let:toggle let:showing padding="none" placement="bottom-start">
+                <svelte:fragment slot="tooltip" let:toggle>
+                    <ActionMenu.Root>
+                        {#each validOpeners as openerId}
+                            {@const o = openersConfig[openerId]}
+                            {#if o}
+                                <ActionMenu.Item.Button
+                                    on:click={(e) => {
+                                        window.open(
+                                            o.href(prompt),
+                                            '_blank',
+                                            'noopener,noreferrer'
+                                        );
+                                        toggle(e);
+                                    }}>
+                                    <Layout.Stack direction="row" gap="s" alignItems="center">
+                                        <Avatar size="s" alt={o.alt}>
+                                            {#if o.icon}
+                                                <Icon icon={o.icon} size="l" />
+                                            {:else if o.imgSrc}
+                                                <img src={o.imgSrc} alt={o.alt} />
+                                            {/if}
+                                        </Avatar>
+                                        <Layout.Stack gap="none">
+                                            <Typography.Text
+                                                color="--fgcolor-neutral-secondary"
+                                                variant="m-500">{o.label}</Typography.Text>
+                                            <Typography.Text color="--fgcolor-neutral-tertiary">
+                                                {o.description}
+                                            </Typography.Text>
+                                        </Layout.Stack>
+                                    </Layout.Stack>
+                                </ActionMenu.Item.Button>
+                            {/if}
+                        {/each}
+                    </ActionMenu.Root>
+                </svelte:fragment>
+                <PinkButton.Split>
                     <Button
                         secondary
                         size="s"
@@ -125,120 +170,19 @@
                         on:click={copyPrompt}
                         disabled={!prompt || prompt.length === 0}>Copy setup prompt</Button>
                     {#if validOpeners.length}
-                        <Popover let:toggle let:showing padding="none" placement="bottom-start">
-                            <Button
-                                secondary
-                                size="s"
-                                class="btn-no-left-radius"
-                                icon
-                                on:click={toggle}
-                                ariaLabel="Open action menu"
-                                disabled={!prompt || prompt.length === 0}>
-                                <Icon icon={showing ? IconChevronUp : IconChevronDown} />
-                            </Button>
-
-                            <svelte:fragment slot="tooltip" let:toggle>
-                                <ActionMenu.Root>
-                                    {#each validOpeners as openerId}
-                                        {@const o = openersConfig[openerId]}
-                                        {#if o}
-                                            <ActionMenu.Item.Button
-                                                on:click={(e) => {
-                                                    window.open(
-                                                        o.href(prompt),
-                                                        '_blank',
-                                                        'noopener,noreferrer'
-                                                    );
-                                                    toggle(e);
-                                                }}>
-                                                <Layout.Stack
-                                                    direction="row"
-                                                    gap="s"
-                                                    alignItems="center">
-                                                    <Avatar size="s" alt={o.alt}>
-                                                        {#if o.icon}
-                                                            <Icon icon={o.icon} size="l" />
-                                                        {:else if o.imgSrc}
-                                                            <img src={o.imgSrc} alt={o.alt} />
-                                                        {/if}
-                                                    </Avatar>
-                                                    <Layout.Stack gap="none">
-                                                        <Typography.Text
-                                                            color="--fgcolor-neutral-secondary"
-                                                            variant="m-500"
-                                                            >{o.label}</Typography.Text>
-                                                        <Typography.Text
-                                                            color="--fgcolor-neutral-tertiary">
-                                                            {o.description}
-                                                        </Typography.Text>
-                                                    </Layout.Stack>
-                                                </Layout.Stack>
-                                            </ActionMenu.Item.Button>
-                                        {/if}
-                                    {/each}
-                                </ActionMenu.Root>
-                            </svelte:fragment>
-                        </Popover>
+                        <Button
+                            secondary
+                            size="s"
+                            class="btn-no-left-radius"
+                            icon
+                            on:click={toggle}
+                            ariaLabel="Open action menu"
+                            disabled={!prompt || prompt.length === 0}>
+                            <Icon icon={showing ? IconChevronUp : IconChevronDown} />
+                        </Button>
                     {/if}
-                </Layout.Stack>
-            </Layout.Stack>
-        </Alert.Inline>
-    </div>
+                </PinkButton.Split>
+            </Popover>
+        </Layout.Stack>
+    </Alert.Inline>
 {/if}
-
-<style lang="scss">
-    :global(.btn-no-right-radius),
-    :global(button.btn-no-right-radius),
-    :global(.button.btn-no-right-radius) {
-        border-top-right-radius: 0 !important;
-        border-bottom-right-radius: 0 !important;
-        border-right: none !important;
-    }
-
-    :global(.btn-no-left-radius),
-    :global(button.btn-no-left-radius),
-    :global(.button.btn-no-left-radius) {
-        border-top-left-radius: 0 !important;
-        border-bottom-left-radius: 0 !important;
-    }
-
-    :global(.menu-avatar img) {
-        width: 20px;
-        height: 20px;
-        object-fit: contain;
-        display: block;
-    }
-
-    .custom-inline-alert {
-        & :global(article) {
-            border-radius: var(--border-radius-medium);
-            padding: var(--space-6, 12px);
-            padding-right: var(--space-4, 12px);
-            background: var(--bgcolor-neutral-primary);
-            border: var(--border-width-s) solid var(--border-neutral);
-        }
-        & :global(article > div) {
-            gap: var(--space-6);
-        }
-        & :global(.ai-icon-holder.notification) {
-            height: 36px !important;
-        }
-
-        & :global(h5) {
-            font-weight: 500 !important;
-            color: var(--fgcolor-neutral-primary) !important;
-        }
-
-        & :global(p) {
-            color: var(--fgcolor-neutral-secondary) !important;
-        }
-
-        & :global(.alert-content) {
-            margin-top: 2px !important;
-        }
-
-        & :global([role='tooltip'] > div) {
-            gap: var(--space-2, 4px) !important;
-        }
-    }
-</style>