From 36159ccec994d8c0041051f19c0b181bf2388098 Mon Sep 17 00:00:00 2001 From: Harsh Mahajan <127186841+HarshMN2345@users.noreply.github.com> Date: Mon, 8 Sep 2025 14:46:19 +0530 Subject: [PATCH 1/6] feat: chnaging layout and added mcp card --- .../overview/assets/auth-preview-dark.svg | 147 ++++++++++++++++++ .../overview/assets/auth-preview.svg | 147 ++++++++++++++++++ .../overview/onboard.svelte | 96 ++++++++++-- 3 files changed, 381 insertions(+), 9 deletions(-) create mode 100644 src/routes/(console)/project-[region]-[project]/overview/assets/auth-preview-dark.svg create mode 100644 src/routes/(console)/project-[region]-[project]/overview/assets/auth-preview.svg diff --git a/src/routes/(console)/project-[region]-[project]/overview/assets/auth-preview-dark.svg b/src/routes/(console)/project-[region]-[project]/overview/assets/auth-preview-dark.svg new file mode 100644 index 0000000000..422126fcc6 --- /dev/null +++ b/src/routes/(console)/project-[region]-[project]/overview/assets/auth-preview-dark.svg @@ -0,0 +1,147 @@ + + + +
 + + + + + +
 + + + + + + + + + + + + + + + + + + + + +
 + + + +
 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/routes/(console)/project-[region]-[project]/overview/assets/auth-preview.svg b/src/routes/(console)/project-[region]-[project]/overview/assets/auth-preview.svg new file mode 100644 index 0000000000..1462d2e3dc --- /dev/null +++ b/src/routes/(console)/project-[region]-[project]/overview/assets/auth-preview.svg @@ -0,0 +1,147 @@ + + + +
 + + + + + +
 + + + + + + + + + + + + + + + + + + + + +
 + + + +
 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/routes/(console)/project-[region]-[project]/overview/onboard.svelte b/src/routes/(console)/project-[region]-[project]/overview/onboard.svelte index 818a6adc66..3587602702 100644 --- a/src/routes/(console)/project-[region]-[project]/overview/onboard.svelte +++ b/src/routes/(console)/project-[region]-[project]/overview/onboard.svelte @@ -12,6 +12,8 @@ } from '@appwrite.io/pink-svelte'; import { addPlatform, continuePlatform } from './platforms/+page.svelte'; import { app } from '$lib/stores/app'; + import AuthPreview from './assets/auth-preview.svg'; + import AuthPreviewDark from './assets/auth-preview-dark.svg'; import { IconArrowRight, IconNodeJs, @@ -20,8 +22,6 @@ } from '@appwrite.io/pink-icons-svelte'; import DatabaseImgSource from './assets/database.png'; import DatabaseImgSourceDark from './assets/database-dark.png'; - import UsersImgSource from './assets/users.svg'; - import UsersImgSourceDark from './assets/users-dark.svg'; import DiscordImgSource from './assets/discord.png'; import DiscordImgSourceDark from './assets/discord-dark.png'; import PlatformIosImgSource from './assets/platform-ios.svg'; @@ -479,10 +479,12 @@
- + + justifyContent="space-between" + style={`flex: ${$isSmallViewport ? '1 1 auto' : '0 0 30%'}; min-width: ${$isSmallViewport ? 'auto' : '240px'}`}> Set up Auth
+ + + +
+ + + MCP server + + Deploy the Appwrite MCP server with a single + click, or view the docs for instructions. + + + + One-click install + + + Cursor + + + Claude Desktop + + + VS code + + + Windsurf editor + + + + +
+ { trackEvent(Click.OnboardingDiscordClick); - }}> + }} + style={`flex: ${$isSmallViewport ? '1 1 auto' : '1 1 30%'};`}>
- + Date: Mon, 8 Sep 2025 17:29:04 +0530 Subject: [PATCH 2/6] added icons --- .../overview/assets/claude.svg | 3 + .../overview/assets/cursor-ai.svg | 37 ++++++++ .../overview/assets/dark/claude.svg | 3 + .../overview/assets/dark/cursor-ai.svg | 37 ++++++++ .../overview/assets/dark/vscode.svg | 5 + .../overview/assets/dark/windsurf.svg | 5 + .../overview/assets/vscode.svg | 5 + .../overview/assets/windsurf.svg | 5 + .../overview/components/ClaudeIcon.svelte | 7 ++ .../overview/components/CursorIcon.svelte | 7 ++ .../overview/components/VSCodeIcon.svelte | 7 ++ .../overview/components/WindsurfIcon.svelte | 7 ++ .../overview/onboard.svelte | 95 ++++++++++++++----- 13 files changed, 197 insertions(+), 26 deletions(-) create mode 100644 src/routes/(console)/project-[region]-[project]/overview/assets/claude.svg create mode 100644 src/routes/(console)/project-[region]-[project]/overview/assets/cursor-ai.svg create mode 100644 src/routes/(console)/project-[region]-[project]/overview/assets/dark/claude.svg create mode 100644 src/routes/(console)/project-[region]-[project]/overview/assets/dark/cursor-ai.svg create mode 100644 src/routes/(console)/project-[region]-[project]/overview/assets/dark/vscode.svg create mode 100644 src/routes/(console)/project-[region]-[project]/overview/assets/dark/windsurf.svg create mode 100644 src/routes/(console)/project-[region]-[project]/overview/assets/vscode.svg create mode 100644 src/routes/(console)/project-[region]-[project]/overview/assets/windsurf.svg create mode 100644 src/routes/(console)/project-[region]-[project]/overview/components/ClaudeIcon.svelte create mode 100644 src/routes/(console)/project-[region]-[project]/overview/components/CursorIcon.svelte create mode 100644 src/routes/(console)/project-[region]-[project]/overview/components/VSCodeIcon.svelte create mode 100644 src/routes/(console)/project-[region]-[project]/overview/components/WindsurfIcon.svelte diff --git a/src/routes/(console)/project-[region]-[project]/overview/assets/claude.svg b/src/routes/(console)/project-[region]-[project]/overview/assets/claude.svg new file mode 100644 index 0000000000..0857393021 --- /dev/null +++ b/src/routes/(console)/project-[region]-[project]/overview/assets/claude.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/routes/(console)/project-[region]-[project]/overview/assets/cursor-ai.svg b/src/routes/(console)/project-[region]-[project]/overview/assets/cursor-ai.svg new file mode 100644 index 0000000000..e3e9d49e36 --- /dev/null +++ b/src/routes/(console)/project-[region]-[project]/overview/assets/cursor-ai.svg @@ -0,0 +1,37 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/routes/(console)/project-[region]-[project]/overview/assets/dark/claude.svg b/src/routes/(console)/project-[region]-[project]/overview/assets/dark/claude.svg new file mode 100644 index 0000000000..14a4d28785 --- /dev/null +++ b/src/routes/(console)/project-[region]-[project]/overview/assets/dark/claude.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/routes/(console)/project-[region]-[project]/overview/assets/dark/cursor-ai.svg b/src/routes/(console)/project-[region]-[project]/overview/assets/dark/cursor-ai.svg new file mode 100644 index 0000000000..ad9146733a --- /dev/null +++ b/src/routes/(console)/project-[region]-[project]/overview/assets/dark/cursor-ai.svg @@ -0,0 +1,37 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/routes/(console)/project-[region]-[project]/overview/assets/dark/vscode.svg b/src/routes/(console)/project-[region]-[project]/overview/assets/dark/vscode.svg new file mode 100644 index 0000000000..76b93c7b97 --- /dev/null +++ b/src/routes/(console)/project-[region]-[project]/overview/assets/dark/vscode.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/routes/(console)/project-[region]-[project]/overview/assets/dark/windsurf.svg b/src/routes/(console)/project-[region]-[project]/overview/assets/dark/windsurf.svg new file mode 100644 index 0000000000..d6bdbe5fc1 --- /dev/null +++ b/src/routes/(console)/project-[region]-[project]/overview/assets/dark/windsurf.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/routes/(console)/project-[region]-[project]/overview/assets/vscode.svg b/src/routes/(console)/project-[region]-[project]/overview/assets/vscode.svg new file mode 100644 index 0000000000..7f5cffb053 --- /dev/null +++ b/src/routes/(console)/project-[region]-[project]/overview/assets/vscode.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/routes/(console)/project-[region]-[project]/overview/assets/windsurf.svg b/src/routes/(console)/project-[region]-[project]/overview/assets/windsurf.svg new file mode 100644 index 0000000000..85097f1a34 --- /dev/null +++ b/src/routes/(console)/project-[region]-[project]/overview/assets/windsurf.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/routes/(console)/project-[region]-[project]/overview/components/ClaudeIcon.svelte b/src/routes/(console)/project-[region]-[project]/overview/components/ClaudeIcon.svelte new file mode 100644 index 0000000000..2998b15fc5 --- /dev/null +++ b/src/routes/(console)/project-[region]-[project]/overview/components/ClaudeIcon.svelte @@ -0,0 +1,7 @@ + + + diff --git a/src/routes/(console)/project-[region]-[project]/overview/components/CursorIcon.svelte b/src/routes/(console)/project-[region]-[project]/overview/components/CursorIcon.svelte new file mode 100644 index 0000000000..4c3cff7da9 --- /dev/null +++ b/src/routes/(console)/project-[region]-[project]/overview/components/CursorIcon.svelte @@ -0,0 +1,7 @@ + + + diff --git a/src/routes/(console)/project-[region]-[project]/overview/components/VSCodeIcon.svelte b/src/routes/(console)/project-[region]-[project]/overview/components/VSCodeIcon.svelte new file mode 100644 index 0000000000..35e7459f93 --- /dev/null +++ b/src/routes/(console)/project-[region]-[project]/overview/components/VSCodeIcon.svelte @@ -0,0 +1,7 @@ + + + diff --git a/src/routes/(console)/project-[region]-[project]/overview/components/WindsurfIcon.svelte b/src/routes/(console)/project-[region]-[project]/overview/components/WindsurfIcon.svelte new file mode 100644 index 0000000000..3a29428e4f --- /dev/null +++ b/src/routes/(console)/project-[region]-[project]/overview/components/WindsurfIcon.svelte @@ -0,0 +1,7 @@ + + + diff --git a/src/routes/(console)/project-[region]-[project]/overview/onboard.svelte b/src/routes/(console)/project-[region]-[project]/overview/onboard.svelte index 3587602702..4e88935a85 100644 --- a/src/routes/(console)/project-[region]-[project]/overview/onboard.svelte +++ b/src/routes/(console)/project-[region]-[project]/overview/onboard.svelte @@ -24,6 +24,10 @@ import DatabaseImgSourceDark from './assets/database-dark.png'; import DiscordImgSource from './assets/discord.png'; import DiscordImgSourceDark from './assets/discord-dark.png'; + import CursorIcon from './components/CursorIcon.svelte'; + import ClaudeIcon from './components/ClaudeIcon.svelte'; + import VSCodeIcon from './components/VSCodeIcon.svelte'; + import WindsurfIcon from './components/WindsurfIcon.svelte'; import PlatformIosImgSource from './assets/platform-ios.svg'; import PlatformIosImgSourceDark from './assets/platform-ios-dark.svg'; import PlatformAndroidImgSource from './assets/platform-android.svg'; @@ -102,9 +106,7 @@
- + { openPlatformWizard(0, platformMap.get('Web')); @@ -560,18 +562,54 @@ direction="row" gap="s" wrap="wrap"> - + + Cursor - - + + + Claude Desktop - - + + + VS code - - + + + Windsurf editor - + @@ -584,22 +622,30 @@ on:click={() => { trackEvent(Click.OnboardingDiscordClick); }} - style={`flex: ${$isSmallViewport ? '1 1 auto' : '1 1 30%'};`}> + style={`flex: ${$isSmallViewport ? '1 1 auto' : '1 1 28%'};`}>
- - Discord + + + Discord + +
+ +
Join our Discord for support, tips and product updates -
- -
@@ -734,7 +777,7 @@ } } .arrow-icon-discord { - align-items: flex-end; + align-items: flex-start; } .platform-image { From 65f046eefe7ecc98e19a3cf0be9581067bdaec4b Mon Sep 17 00:00:00 2001 From: Harsh Mahajan <127186841+HarshMN2345@users.noreply.github.com> Date: Mon, 8 Sep 2025 17:49:01 +0530 Subject: [PATCH 3/6] added empty in settings page for mcp --- .../settings/updateInstallations.svelte | 78 +++++++++++++++++-- 1 file changed, 71 insertions(+), 7 deletions(-) diff --git a/src/routes/(console)/project-[region]-[project]/settings/updateInstallations.svelte b/src/routes/(console)/project-[region]-[project]/settings/updateInstallations.svelte index 6bc42ead25..f48b5a9c9d 100644 --- a/src/routes/(console)/project-[region]-[project]/settings/updateInstallations.svelte +++ b/src/routes/(console)/project-[region]-[project]/settings/updateInstallations.svelte @@ -2,7 +2,7 @@ import { goto } from '$app/navigation'; import { page } from '$app/state'; import { Avatar, CardGrid, PaginationInline } from '$lib/components'; - import { Button } from '$lib/elements/forms'; + import { Button as FormButton } from '$lib/elements/forms'; import { getApiEndpoint } from '$lib/stores/sdk'; import type { Models } from '@appwrite.io/console'; import GitDisconnectModal from './GitDisconnectModal.svelte'; @@ -15,8 +15,10 @@ Icon, Layout, Popover, - Table + Table, + Button } from '@appwrite.io/pink-svelte'; + import { Link as PinkLink } from '@appwrite.io/pink-svelte'; import { IconExternalLink, IconGithub, @@ -28,6 +30,10 @@ import type { ComponentType } from 'svelte'; import { Link } from '$lib/elements'; import { regionalConsoleVariables } from '../store'; + import CursorIcon from '../overview/components/CursorIcon.svelte'; + import ClaudeIcon from '../overview/components/ClaudeIcon.svelte'; + import VSCodeIcon from '../overview/components/VSCodeIcon.svelte'; + import WindsurfIcon from '../overview/components/WindsurfIcon.svelte'; export let total: number; export let limit: number; @@ -83,7 +89,7 @@ {#if total > 0} - + - + Learn more {:else} @@ -181,10 +187,10 @@ title="No installation was added to the project yet" description="Add an installation to connect repositories"> - + @@ -195,3 +201,61 @@ {#if showGitDisconnect} {/if} + + + MCP server + Spin up an MCP server to stream rich project context to AI tooling, unlocking deeper code understanding + and better completions. + + + + + Deploy the Appwrite MCP server with a single click, or view the docs for instructions. + + + + + + Cursor + + + + Claude Desktop + + + + VS code + + + + Windsurf editor + + + + + + + From 195d37ba339d2aa6ff3f4a63e5f65a121b485d6f Mon Sep 17 00:00:00 2001 From: Harsh Mahajan <127186841+HarshMN2345@users.noreply.github.com> Date: Mon, 15 Sep 2025 12:17:13 +0530 Subject: [PATCH 4/6] refactored to array of obejcts --- .../overview/onboard.svelte | 67 +++++-------------- .../settings/updateInstallations.svelte | 53 ++++----------- .../project-[region]-[project]/store.ts | 27 ++++++++ 3 files changed, 54 insertions(+), 93 deletions(-) diff --git a/src/routes/(console)/project-[region]-[project]/overview/onboard.svelte b/src/routes/(console)/project-[region]-[project]/overview/onboard.svelte index 4e88935a85..ffbdb76724 100644 --- a/src/routes/(console)/project-[region]-[project]/overview/onboard.svelte +++ b/src/routes/(console)/project-[region]-[project]/overview/onboard.svelte @@ -24,10 +24,7 @@ import DatabaseImgSourceDark from './assets/database-dark.png'; import DiscordImgSource from './assets/discord.png'; import DiscordImgSourceDark from './assets/discord-dark.png'; - import CursorIcon from './components/CursorIcon.svelte'; - import ClaudeIcon from './components/ClaudeIcon.svelte'; - import VSCodeIcon from './components/VSCodeIcon.svelte'; - import WindsurfIcon from './components/WindsurfIcon.svelte'; + import { mcpTools } from '../store'; import PlatformIosImgSource from './assets/platform-ios.svg'; import PlatformIosImgSourceDark from './assets/platform-ios-dark.svg'; import PlatformAndroidImgSource from './assets/platform-android.svg'; @@ -562,54 +559,20 @@ direction="row" gap="s" wrap="wrap"> - - - Cursor - - - - Claude Desktop - - - - VS code - - - - Windsurf editor - + {#each mcpTools as tool} + + + {tool.label} + + {/each} diff --git a/src/routes/(console)/project-[region]-[project]/settings/updateInstallations.svelte b/src/routes/(console)/project-[region]-[project]/settings/updateInstallations.svelte index f48b5a9c9d..35cbd99c81 100644 --- a/src/routes/(console)/project-[region]-[project]/settings/updateInstallations.svelte +++ b/src/routes/(console)/project-[region]-[project]/settings/updateInstallations.svelte @@ -29,11 +29,7 @@ import { Click, trackEvent } from '$lib/actions/analytics'; import type { ComponentType } from 'svelte'; import { Link } from '$lib/elements'; - import { regionalConsoleVariables } from '../store'; - import CursorIcon from '../overview/components/CursorIcon.svelte'; - import ClaudeIcon from '../overview/components/ClaudeIcon.svelte'; - import VSCodeIcon from '../overview/components/VSCodeIcon.svelte'; - import WindsurfIcon from '../overview/components/WindsurfIcon.svelte'; + import { regionalConsoleVariables, mcpTools } from '../store'; export let total: number; export let limit: number; @@ -217,42 +213,17 @@ - - - Cursor - - - - Claude Desktop - - - - VS code - - - - Windsurf editor - + {#each mcpTools as tool} + + + {tool.label} + + {/each} diff --git a/src/routes/(console)/project-[region]-[project]/store.ts b/src/routes/(console)/project-[region]-[project]/store.ts index 1774bf972f..2666c9301a 100644 --- a/src/routes/(console)/project-[region]-[project]/store.ts +++ b/src/routes/(console)/project-[region]-[project]/store.ts @@ -3,6 +3,10 @@ import type { BarSeriesOption } from 'echarts/charts'; import { derived, get, writable } from 'svelte/store'; import { regions } from '$lib/stores/organization'; import { page } from '$app/stores'; +import CursorIcon from './overview/components/CursorIcon.svelte'; +import ClaudeIcon from './overview/components/ClaudeIcon.svelte'; +import VSCodeIcon from './overview/components/VSCodeIcon.svelte'; +import WindsurfIcon from './overview/components/WindsurfIcon.svelte'; export const project = derived(page, ($page) => $page.data.project as Models.Project); @@ -73,3 +77,26 @@ function createStats() { } export const stats = createStats(); + +export const mcpTools = [ + { + href: 'https://apwr.dev/docs-mcp-cursor?ref=docs', + icon: CursorIcon, + label: 'Cursor' + }, + { + href: 'https://appwrite.io/docs/tooling/mcp/claude', + icon: ClaudeIcon, + label: 'Claude Desktop' + }, + { + href: 'https://apwr.dev/docs-mcp-vscode?ref=docs', + icon: VSCodeIcon, + label: 'VS code' + }, + { + href: 'https://appwrite.io/docs/tooling/mcp/windsurf', + icon: WindsurfIcon, + label: 'Windsurf editor' + } +]; From c414cb099342bf3d5cf4f6d8548f506103780bf9 Mon Sep 17 00:00:00 2001 From: Harsh Mahajan <127186841+HarshMN2345@users.noreply.github.com> Date: Tue, 16 Sep 2025 10:51:46 +0530 Subject: [PATCH 5/6] build error fix --- .../settings/updateInstallations.svelte | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/routes/(console)/project-[region]-[project]/settings/updateInstallations.svelte b/src/routes/(console)/project-[region]-[project]/settings/updateInstallations.svelte index 8a92a1a66b..8cb2cb9f8e 100644 --- a/src/routes/(console)/project-[region]-[project]/settings/updateInstallations.svelte +++ b/src/routes/(console)/project-[region]-[project]/settings/updateInstallations.svelte @@ -173,10 +173,10 @@ Before installing Git in a locally hosted Appwrite project, ensure your environment variables are configured. - + external>Learn more {:else} From b14d831b661332a65bdb751b9ffed16815f5a79a Mon Sep 17 00:00:00 2001 From: Harsh Mahajan <127186841+HarshMN2345@users.noreply.github.com> Date: Tue, 16 Sep 2025 11:30:45 +0530 Subject: [PATCH 6/6] refactor the CSS --- .../overview/onboard.svelte | 20 +++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/src/routes/(console)/project-[region]-[project]/overview/onboard.svelte b/src/routes/(console)/project-[region]-[project]/overview/onboard.svelte index ffbdb76724..c1c3811e4b 100644 --- a/src/routes/(console)/project-[region]-[project]/overview/onboard.svelte +++ b/src/routes/(console)/project-[region]-[project]/overview/onboard.svelte @@ -710,23 +710,23 @@ .double-width-card .full-height-card { height: 240px; width: 100%; - } - @media (max-width: 1024px) { - .double-width-card .full-height-card { + @media (max-width: 1024px) { height: 220px; } - .auth-image { - height: 180px; - background-position: center bottom; + + @media (max-width: 768px) { + height: auto; } } - @media (max-width: 768px) { - .double-width-card .full-height-card { - height: auto; + .auth-image { + @media (max-width: 1024px) { + height: 180px; + background-position: center bottom; } - .auth-image { + + @media (max-width: 768px) { height: 160px; margin-right: 0; }