Copy prompt v2

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",

src/lib/actions/analytics.ts

@@ -195,7 +195,10 @@ 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',
+    OpenInCursorClick = 'click_open_in_cursor',
+    OpenInLovableClick = 'click_open_in_lovable'
 }
 
 export enum Submit {

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="" />

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();
 
@@ -36,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';
 
@@ -172,6 +197,12 @@ 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}
+                        {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.

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();
 
@@ -38,14 +39,38 @@
 
     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("${projectId}")
+
+    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';
 
     const configCode = `APPWRITE_PROJECT_ID: "${projectId}"
 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,
@@ -200,6 +225,12 @@ 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}
+                        {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 or XCode.

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();
@@ -38,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';
 
@@ -282,6 +305,11 @@
         {#if isPlatformCreated}
             <Fieldset legend="Clone starter" badge="Optional">
                 <Layout.Stack gap="l">
+                    <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.

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();
@@ -38,13 +39,41 @@
 
     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';
 
     const updateConfigCode = `EXPO_PUBLIC_APPWRITE_PROJECT_ID=${projectId}
 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
@@ -226,6 +255,12 @@ 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={promptConfigCode}
+                        {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 or VSCode.

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,54 @@ ${prefix}APPWRITE_ENDPOINT = "${sdk.forProject(page.params.region, page.params.p
         selectedFramework ? selectedFramework.icon : NoFrameworkIcon
     );
 
+    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'
+                : '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}");
+                `,
+        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.`,
+        using: 'the terminal or VSCode'
+    });
+
     async function createWebPlatform() {
         hostnameError = hostname !== '' ? !new RegExp(extendedHostnameRegex).test(hostname) : null;
 
@@ -299,6 +353,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} openers={['cursor', 'lovable']} />
+
                     <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.