+
+
+
+
+
+
+ {currentStep === "relatable" && (
+
+
+
+
+ {user && (
+
+
+ )}
+ {name}'s
++ supermemory +
+
+ 
+
+ ),
+ },
+ {
+ title: "Connect to AI",
+ description: "Set up once and use your memory in Cursor, Claude, etc",
+ icon: (
+
+
+ 
+
+ ),
+ },
+ {
+ title: "Connect",
+ description: "Link Notion, Google Drive, or OneDrive to import your docs",
+ icon: (
+
+
+ 
+
+ ),
+ },
+ {
+ title: "Import",
+ description:
+ "Bring in X/Twitter bookmarks, and turn them into useful memories",
+ icon: (
+
+
+ 
+
+ ),
+ },
+]
+
+interface IntegrationsStepProps {
+ onBack: () => void
+}
+
+export function IntegrationsStep({ onBack }: IntegrationsStepProps) {
+ const [selectedCard, setSelectedCard] = useState
+
+
+ )
+}
diff --git a/apps/web/app/onboarding/setup/page.tsx b/apps/web/app/onboarding/setup/page.tsx
new file mode 100644
index 00000000..ce913585
--- /dev/null
+++ b/apps/web/app/onboarding/setup/page.tsx
@@ -0,0 +1,94 @@
+"use client"
+
+import { SetupHeader } from "./header"
+import { AnimatePresence, motion } from "motion/react"
+import { RelatableQuestion } from "./relatable-question"
+import { IntegrationsStep } from "./integrations-step"
+import { ChatSidebar } from "./chat-sidebar"
+import { useState } from "react"
+
+function AnimatedGradientBackground() {
+ return (
+
+
+
+ + Build your personal memory +
++ Your supermemory comes alive when you capture and connect what's + important +
+
+ {integrationCards.map((card) => {
+ const isClickable = card.title === "Connect to AI"
+
+ if (isClickable) {
+ return (
+
+ )
+ }
+
+ return (
+
+
+
+
+ )
+ })}
+
+
+ {card.title}
++ {card.description} +
+{card.icon}
+
+
+
+
+
+
+ )
+}
+
+export default function SetupPage() {
+ const [currentStep, setCurrentStep] = useState<"relatable" | "integrations">(
+ "relatable",
+ )
+
+ const handleContinueOrSkip = () => {
+ setCurrentStep("integrations")
+ }
+
+ const handleBack = () => {
+ setCurrentStep("relatable")
+ }
+
+ return (
+
+ {relatableOptions.map((option, index) => (
+
+ ))}
+
+
+
+
+
+
+ + I'm built with Supermemory's super fast memory API, so you never have to + worry about forgetting what matters across your AI apps. +
+ ++ What I can do for you +
+ +
+
+
+
+
+
+
+ 
+
+
+
+
+ + Remember every context +
++ I keep track of what you've saved and shared with your + supermemory. +
+
+
+
+
+ 
+
+
+
+
+ + Find when you need it +
++ I surface the right memories inside your supermemory, superfast. +
+
+
+
+ 
+
+
+
+
+ + Grow with your supermemory +
++ I learn and personalize over time, so every interaction feels + natural. +
++ Hi {name}, I'm Nova +
++ What should I call you? +
+
+ {
+ if (e.key === "Enter") {
+ handleSubmit()
+ }
+ },
+ }}
+ onChange={(e) => setName((e.target as HTMLInputElement).value)}
+ style={{
+ background:
+ "linear-gradient(0deg, rgba(91, 126, 245, 0.04) 0%, rgba(91, 126, 245, 0.04) 100%)",
+ }}
+ />
+
+
+
+
+ {name}'s
++ supermemory +
+
+
+ )
+}
diff --git a/apps/web/app/onboarding/welcome/welcome-step.tsx b/apps/web/app/onboarding/welcome/welcome-step.tsx
new file mode 100644
index 00000000..5df84e70
--- /dev/null
+++ b/apps/web/app/onboarding/welcome/welcome-step.tsx
@@ -0,0 +1,17 @@
+import { motion } from "motion/react"
+
+export function WelcomeStep() {
+ return (
+
+
+
+
+
+
+ {currentStep === "input" && (
+ setCurrentStep(step as OnboardStep)}
+ />
+ )}
+ {currentStep === "features" &&
+
+
+ Welcome to
+
+
+ )
+}
diff --git a/apps/web/components/mcp-detail-view.tsx b/apps/web/components/mcp-detail-view.tsx
new file mode 100644
index 00000000..539bf2ef
--- /dev/null
+++ b/apps/web/components/mcp-detail-view.tsx
@@ -0,0 +1,306 @@
+"use client"
+
+import { useState, useEffect } from "react"
+import { Button } from "@ui/components/button"
+import { CircleCheckIcon, CopyIcon } from "lucide-react"
+import { toast } from "sonner"
+import { analytics } from "@/lib/analytics"
+
+const clients = {
+ cursor: "Cursor",
+ claude: "Claude Desktop",
+ vscode: "VSCode",
+ cline: "Cline",
+ "gemini-cli": "Gemini CLI",
+ "claude-code": "Claude Code",
+ "mcp-url": "MCP URL",
+ "roo-cline": "Roo Cline",
+ witsy: "Witsy",
+ enconvo: "Enconvo",
+} as const
+
+interface MCPDetailViewProps {
+ onBack: () => void
+}
+
+export function MCPDetailView({ onBack }: MCPDetailViewProps) {
+ const [selectedClient, setSelectedClient] = useState<
+ keyof typeof clients | null
+ >(null)
+ const [selectedProject] = useState
+
+
+
+
+ )}
+ {name}'s
++ supermemory +
+
+
+ )
+}
diff --git a/apps/web/components/nova/bg-grad.tsx b/apps/web/components/nova/bg-grad.tsx
new file mode 100644
index 00000000..66aa437c
--- /dev/null
+++ b/apps/web/components/nova/bg-grad.tsx
@@ -0,0 +1,150 @@
+"use client"
+
+interface BgGradProps {
+ size?: number
+ className?: string
+}
+
+function BgGrad({ size = 400, className = "" }: BgGradProps) {
+ return (
+
+
+
+
+
+
+ + Connect your AI to supermemory MCP +
+ +
+
+
+
+
+ + MCP connects your AI apps to create and use memories directly +
+
+
+ + Auto-fetch the right context from anything you've saved +
+
+
+ + One-time setup, seamless integration across your workflow +
+
+
+
+
+
+
+ 1
+
+
+
+ + Select your AI client +
+
+ {Object.entries(clients)
+ .slice(0, 7)
+ .map(([key, clientName]) => (
+
+ ))}
+
+ + *You can connect to all of these, setup is different for each + one +
+
+
+
+
+ 2
+
+
+
+ + Copy the installation command +
+ {selectedClient ? ( +
+ {selectedClient === "mcp-url" ? (
+
+ ) : (
+
+
+ ) : (
+
+
+
+ {mcpUrlTab === "oneClick" ? (
+
+
+
+
+
+
+ ) : (
+ + Use this URL to quickly configure supermemory in + your AI assistant +
+
+
+
+
+
+
+ )}
+ + Add this configuration to your MCP settings file + with authentication +
+
+
+
+
+ {`{
+ "supermemory-mcp": {
+ "command": "npx",
+ "args": ["-y", "mcp-remote", "https://api.supermemory.ai/mcp"],
+ "env": {},
+ "headers": {
+ "Authorization": "Bearer your-api-key-here"
+ }
+ }
+}`}
+
+
+
+ + The API key is included as a Bearer token in the + Authorization header +
+
+
+ )}
+
+
+
+
+ + Copy and run this command in your terminal to install + the MCP server. +
++ The command will be provided once you select an AI client + above. +
+ )} +
+
+
+ 3
+
+
+
+ + Run command in your terminal +
++ Execute the copied command in your terminal to complete the + setup. +
+
+ {/* Large blue orb - right */}
+
+
+ {/* Large blue orb - left */}
+
+
+ {/* Rotated blue orb - top left */}
+
+ )
+}
+
+export default BgGrad
diff --git a/apps/web/components/nova/nova-orb.tsx b/apps/web/components/nova/nova-orb.tsx
new file mode 100644
index 00000000..3fb8d430
--- /dev/null
+++ b/apps/web/components/nova/nova-orb.tsx
@@ -0,0 +1,42 @@
+"use client"
+
+import BgGrad from "./bg-grad"
+import { motion } from "motion/react"
+
+interface NovaOrbProps {
+ size?: number
+ className?: string
+}
+
+function NovaOrb({ size = 200, className = "" }: NovaOrbProps) {
+ return (
+
+
+
+ {/* Rotated blue orb - top right */}
+
+
+
+
+
+
+ {/* Rotated blue orb - bottom left */}
+
+
+
+
+
+
+ {/* Central rotated orb */}
+
+
+
+
+
+
+ {/* Bottom blue orb */}
+
+
+
+
+
+
+ )
+}
+
+export default NovaOrb
diff --git a/apps/web/middleware.ts b/apps/web/middleware.ts
index 7bab1d21..f7b4b6df 100644
--- a/apps/web/middleware.ts
+++ b/apps/web/middleware.ts
@@ -54,6 +54,6 @@ export default async function proxy(request: Request) {
export const config = {
matcher: [
- "/((?!_next/static|_next/image|images|icon.png|monitoring|opengraph-image.png|ingest|api|login|api/emails).*)",
+ "/((?!_next/static|_next/image|images|icon.png|monitoring|opengraph-image.png|bg-rectangle.png|onboarding|ingest|api|login|api/emails).*)",
],
}
diff --git a/apps/web/public/bg-rectangle.png b/apps/web/public/bg-rectangle.png
new file mode 100644
index 00000000..b1faa25d
Binary files /dev/null and b/apps/web/public/bg-rectangle.png differ
diff --git a/apps/web/public/onboarding/bg-gradient-0.png b/apps/web/public/onboarding/bg-gradient-0.png
new file mode 100644
index 00000000..f050f4f4
Binary files /dev/null and b/apps/web/public/onboarding/bg-gradient-0.png differ
diff --git a/apps/web/public/onboarding/bg-gradient-1.png b/apps/web/public/onboarding/bg-gradient-1.png
new file mode 100644
index 00000000..5bcbc997
Binary files /dev/null and b/apps/web/public/onboarding/bg-gradient-1.png differ
diff --git a/apps/web/public/onboarding/chrome.png b/apps/web/public/onboarding/chrome.png
new file mode 100644
index 00000000..edcfad7f
Binary files /dev/null and b/apps/web/public/onboarding/chrome.png differ
diff --git a/apps/web/public/onboarding/connectors.png b/apps/web/public/onboarding/connectors.png
new file mode 100644
index 00000000..0ce66316
Binary files /dev/null and b/apps/web/public/onboarding/connectors.png differ
diff --git a/apps/web/public/onboarding/human-brain.png b/apps/web/public/onboarding/human-brain.png
new file mode 100644
index 00000000..9a52a42e
Binary files /dev/null and b/apps/web/public/onboarding/human-brain.png differ
diff --git a/apps/web/public/onboarding/plant.png b/apps/web/public/onboarding/plant.png
new file mode 100644
index 00000000..e9651dae
Binary files /dev/null and b/apps/web/public/onboarding/plant.png differ
diff --git a/apps/web/public/onboarding/search.png b/apps/web/public/onboarding/search.png
new file mode 100644
index 00000000..e60d6872
Binary files /dev/null and b/apps/web/public/onboarding/search.png differ
diff --git a/apps/web/public/onboarding/x.png b/apps/web/public/onboarding/x.png
new file mode 100644
index 00000000..a981fc25
Binary files /dev/null and b/apps/web/public/onboarding/x.png differ
diff --git a/packages/ui/button/external-auth.tsx b/packages/ui/button/external-auth.tsx
index 04f05af3..ce7db8be 100644
--- a/packages/ui/button/external-auth.tsx
+++ b/packages/ui/button/external-auth.tsx
@@ -15,9 +15,14 @@ export function ExternalAuthButton({
return (
+
+
+
+
+
+