---
title: "Welcome to Deja Vu"
description: "Deja Vu is a universal, self-improving memory layer for LLM applications that enables persistent context across sessions."
mode: "custom"
---

{/* debug: welcome-layout-v3-grid */}

<div className="px-4 pt-8 pb-4 lg:pt-10 max-w-4xl mx-auto text-center space-y-3">
  <h1 className="text-3xl lg:text-4xl font-bold text-gray-900 dark:text-zinc-50 tracking-tight mb-2">
    Build with <span className="text-primary">Deja Vu</span>
  </h1>

  <p className="max-w-2xl mx-auto text-base text-gray-600 dark:text-zinc-400 leading-relaxed">
    Universal, Self-improving memory layer for LLM applications.
  </p>

  <a
    href="/platform/quickstart"
    className="inline-flex items-center gap-1 text-sm text-gray-500 dark:text-zinc-500 hover:text-primary dark:hover:text-primary transition-colors"
  >
    Write your first memory
    <span className="group-hover:translate-x-0.5 transition-transform">→</span>
  </a>
</div>

<section className="px-4 pt-4 pb-6 max-w-6xl mx-auto">
  <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
    <a
      href="/platform/overview"
      className="group flex h-full flex-col overflow-hidden rounded-2xl border border-gray-200 dark:border-zinc-800/40 bg-white dark:bg-zinc-900/40 transition hover:border-primary/60 hover:bg-gray-50 dark:hover:bg-zinc-900"
    >
      <img
        className="block dark:hidden aspect-[2/1] w-full object-cover"
        src="/images/docs thumbnails/light/dejavu_platform.png"
        alt="Deja Vu Platform thumbnail"
        style={{pointerEvents: "none"}}
      />
      <img
        className="hidden dark:block aspect-[2/1] w-full object-cover"
        src="/images/docs thumbnails/dark/dejavu_platform.png"
        alt="Deja Vu Platform thumbnail"
        style={{pointerEvents: "none"}}
      />
      <div className="flex flex-1 flex-col gap-2 px-4 pb-4 pt-3 text-left">
        <h3 className="text-base font-semibold text-gray-900 dark:text-zinc-100 group-hover:text-primary">
          Deja Vu Platform
        </h3>
        <p className="text-sm text-gray-600 dark:text-zinc-400">
          Managed memory with production-scale infrastructure, ready in minutes.
        </p>
      </div>
    </a>

    <a
      href="/open-source/overview"
      className="group flex h-full flex-col overflow-hidden rounded-2xl border border-gray-200 dark:border-zinc-800/40 bg-white dark:bg-zinc-900/40 transition hover:border-primary/60 hover:bg-gray-50 dark:hover:bg-zinc-900"
    >
      <img
        className="block dark:hidden aspect-[2/1] w-full object-cover"
        src="/images/docs thumbnails/light/dejavu_open_source.png"
        alt="Deja Vu Open Source thumbnail"
        style={{pointerEvents: "none"}}
      />
      <img
        className="hidden dark:block aspect-[2/1] w-full object-cover"
        src="/images/docs thumbnails/dark/dejavu_open_source.png"
        alt="Deja Vu Open Source thumbnail"
        style={{pointerEvents: "none"}}
      />
      <div className="flex flex-1 flex-col gap-2 px-4 pb-4 pt-3 text-left">
        <h3 className="text-base font-semibold text-gray-900 dark:text-zinc-100 group-hover:text-primary">
          Deja Vu Open Source
        </h3>
        <p className="text-sm text-gray-600 dark:text-zinc-400">
          Self-host the Deja Vu stack for full control over data, deployment, and customization.
        </p>
      </div>
    </a>

    <a
      href="/cookbooks/overview"
      className="group flex h-full flex-col overflow-hidden rounded-2xl border border-gray-200 dark:border-zinc-800/40 bg-white dark:bg-zinc-900/40 transition hover:border-primary/60 hover:bg-gray-50 dark:hover:bg-zinc-900"
    >
      <img
        className="block dark:hidden aspect-[2/1] w-full object-cover"
        src="/images/docs thumbnails/light/Cookbooks.png"
        alt="Cookbooks thumbnail"
        style={{pointerEvents: "none"}}
      />
      <img
        className="hidden dark:block aspect-[2/1] w-full object-cover"
        src="/images/docs thumbnails/dark/Cookbooks.png"
        alt="Cookbooks thumbnail"
        style={{pointerEvents: "none"}}
      />
      <div className="flex flex-1 flex-col gap-2 px-4 pb-4 pt-3 text-left">
        <h3 className="text-base font-semibold text-gray-900 dark:text-zinc-100 group-hover:text-primary">
          Cookbooks
        </h3>
        <p className="text-sm text-gray-600 dark:text-zinc-400">
          Production-ready tutorials that show how to ship memorable AI experiences.
        </p>
      </div>
    </a>

    <a
      href="/integrations"
      className="group flex h-full flex-col overflow-hidden rounded-2xl border border-gray-200 dark:border-zinc-800/40 bg-white dark:bg-zinc-900/40 transition hover:border-primary/60 hover:bg-gray-50 dark:hover:bg-zinc-900"
    >
      <img
        className="block dark:hidden aspect-[2/1] w-full object-cover"
        src="/images/docs thumbnails/light/Integrations.png"
        alt="Integrations thumbnail"
        style={{pointerEvents: "none"}}
      />
      <img
        className="hidden dark:block aspect-[2/1] w-full object-cover"
        src="/images/docs thumbnails/dark/Integrations.png"
        alt="Integrations thumbnail"
        style={{pointerEvents: "none"}}
      />
      <div className="flex flex-1 flex-col gap-2 px-4 pb-4 pt-3 text-left">
        <h3 className="text-base font-semibold text-gray-900 dark:text-zinc-100 group-hover:text-primary">
          Integrations
        </h3>
        <p className="text-sm text-gray-600 dark:text-zinc-400">
          Connect Deja Vu to LangChain, CrewAI, Vercel AI SDK, and 20+ partner frameworks.
        </p>
      </div>
    </a>

    <a
      href="/api-reference"
      className="group flex h-full flex-col overflow-hidden rounded-2xl border border-gray-200 dark:border-zinc-800/40 bg-white dark:bg-zinc-900/40 transition hover:border-primary/60 hover:bg-gray-50 dark:hover:bg-zinc-900"
    >
      <img
        className="block dark:hidden aspect-[2/1] w-full object-cover"
        src="/images/docs thumbnails/light/API.png"
        alt="API reference thumbnail"
        style={{pointerEvents: "none"}}
      />
      <img
        className="hidden dark:block aspect-[2/1] w-full object-cover"
        src="/images/docs thumbnails/dark/API.png"
        alt="API reference thumbnail"
        style={{pointerEvents: "none"}}
      />
      <div className="flex flex-1 flex-col gap-2 px-4 pb-4 pt-3 text-left">
        <h3 className="text-base font-semibold text-gray-900 dark:text-zinc-100 group-hover:text-primary">
          API Reference
        </h3>
        <p className="text-sm text-gray-600 dark:text-zinc-400">
          Explore every REST endpoint with payload examples and usage guidance.
        </p>
      </div>
    </a>

    <a
      href="/platform/agent-signup"
      className="group flex h-full flex-col overflow-hidden rounded-2xl border border-gray-200 dark:border-zinc-800/40 bg-white dark:bg-zinc-900/40 transition hover:border-primary/60 hover:bg-gray-50 dark:hover:bg-zinc-900"
    >
      <img
        className="block dark:hidden aspect-[2/1] w-full object-cover"
        src="/images/docs thumbnails/light/CLI.png"
        alt="Sign up as an agent thumbnail"
        style={{pointerEvents: "none"}}
      />
      <img
        className="hidden dark:block aspect-[2/1] w-full object-cover"
        src="/images/docs thumbnails/dark/CLI.png"
        alt="Sign up as an agent thumbnail"
        style={{pointerEvents: "none"}}
      />
      <div className="flex flex-1 flex-col gap-2 px-4 pb-4 pt-3 text-left">
        <h3 className="text-base font-semibold text-gray-900 dark:text-zinc-100 group-hover:text-primary">
          Sign up as an agent
        </h3>
        <p className="text-sm text-gray-600 dark:text-zinc-400">
          For AI agents: mint a Deja Vu API key in under five seconds — no email, no dashboard. Four commands to your first memory.
        </p>
      </div>
    </a>
  </div>
</section>
