copy prompt

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 {

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();
 
@@ -169,6 +170,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.

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();
 
@@ -197,6 +198,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.

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();
@@ -279,6 +280,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.

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();
@@ -223,6 +224,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.

src/routes/(console)/project-[region]-[project]/overview/platforms/createWeb.svelte

@@ -46,7 +46,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();
 
@@ -146,6 +152,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;
 
@@ -285,6 +307,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.

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>

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
+    };
+}