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/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 818a6adc66..c1c3811e4b 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,10 +22,9 @@ } 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 { 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'; @@ -102,9 +103,7 @@ - + { openPlatformWizard(0, platformMap.get('Web')); @@ -479,10 +478,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 + + {#each mcpTools as tool} + + + {tool.label} + + {/each} + + + +
+ { trackEvent(Click.OnboardingDiscordClick); - }}> + }} + style={`flex: ${$isSmallViewport ? '1 1 auto' : '1 1 28%'};`}>
- - - Discord + + + + Discord + +
+ +
Join our Discord for support, tips and product updates -
- -
@@ -635,7 +695,7 @@ margin-bottom: calc(-1 * var(--base-16, 16px)); align-self: flex-end; background-size: cover; - background-position: left bottom; + background-position: right bottom; background-repeat: no-repeat; } :global(.full-height-card div) { @@ -647,6 +707,30 @@ width: 250%; } } + .double-width-card .full-height-card { + height: 240px; + width: 100%; + + @media (max-width: 1024px) { + height: 220px; + } + + @media (max-width: 768px) { + height: auto; + } + } + + .auth-image { + @media (max-width: 1024px) { + height: 180px; + background-position: center bottom; + } + + @media (max-width: 768px) { + height: 160px; + margin-right: 0; + } + } .arrow-icon { color: var(--border-neutral-strong); @@ -656,7 +740,7 @@ } } .arrow-icon-discord { - align-items: flex-end; + align-items: flex-start; } .platform-image { diff --git a/src/routes/(console)/project-[region]-[project]/settings/updateInstallations.svelte b/src/routes/(console)/project-[region]-[project]/settings/updateInstallations.svelte index 034d9a5c81..8cb2cb9f8e 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, @@ -27,7 +29,7 @@ import { Click, trackEvent } from '$lib/actions/analytics'; import type { ComponentType } from 'svelte'; import { Link } from '$lib/elements'; - import { regionalConsoleVariables } from '../store'; + import { regionalConsoleVariables, mcpTools } from '../store'; export let total: number; export let limit: number; @@ -83,7 +85,7 @@ {#if total > 0} - + - + external>Learn more {:else} @@ -184,10 +186,10 @@ title="No installation was added to the project yet" description="Add an installation to connect repositories"> - + @@ -198,3 +200,36 @@ {#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. + + + + {#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' + } +];