agentmemory 官网技术解析：Next.js 15 零配置落地页、黑金设计系统与 Vercel 部署实战

agentmemory 官网技术解析Next.js 15 零配置落地页、黑金设计系统与 Vercel 部署实战【免费下载链接】agentmemory#1 Persistent memory for AI coding agents based on real-world benchmarks项目地址: https://gitcode.com/GitHub_Trending/age/agentmemoryagentmemory 是一个基于真实基准测试的 AI 编码 Agent 持久化记忆方案#1 Persistent memory for AI coding agents based on real-world benchmarks本仓库为其配套的官方落地页Landing Page工程。本文以 website/README.md 为骨架结合仓库内真实源码完整讲解这套网站的技术栈选型、本地开发、Vercel 零配置部署、目录结构与各组件职责以及由 DESIGN.md 定义的兰博基尼风格黑金设计系统——读完你既能直接跑起并上线这个官网也能复用它的架构思路为任何 Next.js 项目搭建高表现力的营销站。项目定位为 agentmemory 服务的单页营销站website/是 agentmemory 项目的官方网站工程其核心任务只有一个清晰、有冲击力地向开发者传达给 AI 编码 Agent 一份跨会话持久记忆的产品价值并引导完成安装。整站采用 Next.js 15 App Router 构建视觉上以兰博基尼灵感的黑金black gold设计语言贯穿始终部署到 Vercel 时无需任何环境变量配置即零配置zero config上线。从 website/app/page.tsx 的页面组装顺序可以看到完整的信息架构ScrollProgress → Nav → Hero → Stats → Primitives → Features → CommandCenter → LiveTerminal → Compare → Testimonials → Agents → Install → Footer先讲价值主张Hero再用数据Stats与核心原语Primitives/Features建立信任接着用可交互的记忆回放终端LiveTerminal做可视化演示最后对比同类方案Compare、列出支持的工具链Agents并以一键安装Install收尾——整条叙事线服务于看完就想装这一个转化目标。技术栈选型极简、无构建配置、无客户端路由README 明确列出的技术栈如下Next.js 15.1App Router 模式React 19TypeScript 5.7通过next/font加载Archivo JetBrains Mono两套字体正文与等宽代码字体CSS Modules 单一globals.css无 Tailwind、无打包器配置文件、无客户端路由即不引入 react-router 之类方案这里有两个值得留意的细节无客户端路由意味着站内导航全部是锚点跳转如#features、#install唯一的例外是 Nav 里的Docs链接指向/docs路径。仓库当前的 package.json 与 README 记录存在版本演进README 写的是 Next.js 15.1 / TypeScript 5.7而 website/package.json 实际声明next ^16.2.7、react ^19.2.7、typescript ^6.0.3并规定engines.node 20。阅读和升级时以 package.json 为准README 描述的是设计时的目标栈。依赖面极窄是这套工程刻意保持的风格运行时依赖只有next、react、react-dom三个包外加一个postcss的 overrides 固定版本。对比动辄几十个依赖的营销站工程这种克制让构建速度与可维护性都显著提升。本地开发三行命令跑起来README 给出的本地开发流程非常直接cd website npm install npm run dev # 打开 http://localhost:3000需要注意的是由于仓库根目录的package.json才是 agentmemory 主包的清单npm install必须在website/子目录内执行才能安装官网自身的依赖。npm run dev会先触发predev钩子见下文构建期元数据生成一节随后由next dev启动开发服务器默认端口 3000。开发服务器就绪后你可以直接体验页面上多个客户端交互Hero 区的npx命令展示HeroNpxCommand.tsx 等与 MemoryGraph 画布动画LiveTerminal 区的终端打字机回放Install 区的点击复制命令按钮。部署到 Vercel两种方式均零配置README 提供了两条部署路径任选其一即可导入仓库方式在 vercel.com 导入本仓库将Root Directory根目录设置为website/其余保持默认即可。CLI 方式在website/目录下执行npx vercel。两种方式的共同前提无需任何环境变量No env vars requiredNode 20 LTS 或更高版本与 website/package.json 中engines.node 20一致。这里有一条重要的实操提醒来自 website/scripts/gen-meta.mjs 的报错信息Vercel 上必须检出完整仓库full repo而不仅是website/子目录因为构建期脚本要向上读取仓库根目录的package.json版本号以及src/、test/下的源码统计信息如果只上传了 website 目录脚本会直接抛错失败。也就是说Root Directory 设为 website/并不代表可以只把 website 目录推上去。构建期元数据生成gen-meta 机制这是本工程一个很有价值的工程细节值得单独说明。package.json中dev、build均带前置钩子predev: node scripts/gen-meta.mjs, prebuild: node scripts/gen-meta.mjswebsite/scripts/gen-meta.mjs 会在每次 dev/build 之前向上定位仓库根目录website/的上一级读取根目录package.json的version字段统计MCP 工具数扫描 src/mcp/tools-registry.ts 中name: memory_前缀的注册项统计Hook 类型数解析 src/types.ts 中export type HookType联合类型里的字符串成员统计REST 端点数扫描 src/triggers/api.ts 中config: { api_path: 的配置项统计测试用例数递归遍历 test/ 目录按it(/test(计数将结果写入 website/lib/generated-meta.json。随后 website/lib/meta.ts标注为import server-only在构建时把这份 JSON 静态导入供 Stats、Features、LiveTerminal 等组件展示。脚本注释解释了为什么必须这样设计meta.ts曾尝试用import.meta.url在运行时读取仓库文件但 Next.js 会把服务端组件编译进.next/server/此时../..会落到构建缓存内部而非仓库根目录导致版本号静默回退成0.0.0改为构建期解析 静态 JSON 导入后彻底规避了该问题。脚本还内置了兜底默认值45 个工具、12 个 hook、107 个端点、794 个测试即使统计失败页面也不会白屏。目录结构与组件职责拆解README 给出了完整的目录结构逐项说明如下均已结合源码核实website/ app/ layout.tsx — html 字体 metadata viewport page.tsx — 按顺序组装各落地页区块 globals.css — 设计令牌、按钮、section-head 工具类 components/ Nav.tsx — 六边形公牛标识 菜单 Hero.tsx — 标题 导语 CTA MemoryGraph.tsx — 客户端 canvas 动画 六边形暂停 滚动轨道 Stats.tsx — 交叉进入视口时数字滚动 Primitives.tsx — 三张卡片3D 鼠标倾斜效果 LiveTerminal.tsx — memory.recall 与 consolidate 的打字机回放 Compare.tsx — agentmemory vs Mem0/Letta/Cognee 对比表 Agents.tsx — 已支持 Agent 的网格 Install.tsx — 点击复制 npm 与控制台命令 Footer.tsx — 源码 / 变更日志 / 许可证链接 ScrollProgress.tsx — 视口顶部的金色细进度条 next.config.ts tsconfig.json package.jsonapp/layout.tsx全局骨架website/app/layout.tsx 承担三件事字体加载通过next/font/google加载 Inter映射到--font-sans与 JetBrains Mono映射到--font-mono取 400/500 两个字重并以 CSS 变量形式注入html避免额外网络请求和布局偏移。注意README 中的 Archivo 与当前源码实际使用的 Inter 有出入以 layout.tsx 为准。Metadata 与 Viewport设置metadataBase为https://agentmemory.dev、页面标题与描述、favicon/icon.svg、Open Graph 与 Twitter 卡片viewport中themeColor: #0a0a0a与黑金主题呼应。全局样式引入import ./globals.css。app/page.tsx服务端组装 客户端岛屿website/app/page.tsx 是一个服务端组件先调用getProjectMeta()读取构建期生成的统计元数据再按顺序渲染各个区块组件并把mcpTools、hooks、restEndpoints作为 props 传给 Stats、Features、CommandCenter、LiveTerminal。README 特别强调的架构约定是每个交互组件都是use client岛屿其余全部在服务端渲染。这正符合 Next.js App Router 的推荐模式——静态内容不携带任何客户端 JS只有真正需要浏览器能力的组件canvas 动画、IntersectionObserver、剪贴板、状态切换才声明为客户端组件从而把首屏 JS 体积压到最小。Nav.tsx服务端数据 锚点导航Nav.tsx 是服务端组件内部通过fetchRepoStats()来自 website/lib/github.ts在服务端拉取 GitHub 仓库 Star 数经formatCompact格式化后展示在导航右侧的 GitHub 入口上。导航项为锚点列表Stack / Features / Control / Demo / Agents / Install / Docs移动端由 MobileNavToggle.tsx 接管。Hero.tsx 与 MemoryGraph.tsx开场视觉Hero.tsx 的芯片区动态显示v{meta.version}即构建期从根 package.json 读到的版本号导语引用了 LongMemEval-S 上 95.2% 的检索召回率数据——该数据在 website/components/Compare.tsx 中同样出现且 Compare 组件特别声明只有 agentmemory 的数字是我们自己测的、可在仓库复现竞品数字是它们各自基准上的公开声明仅供参考体现了严谨的举证态度。MemoryGraph.tsx 是 Hero 区的环境动画一块 canvas 上以 26px 间距铺设点阵用正弦波叠加计算每点透明度上限 0.13 alpha配合轻微漂移形成静谧星野效果它同时实现了两个滚动 UI——六边形暂停状态与右侧金色滚动轨道。值得称道的是性能与无障碍处理使用devicePixelRatio适配高清屏、requestAnimationFrame驱动、监听 resize 重绘并尊重prefers-reduced-motion系统开启减少动态效果时只渲染一帧静态画面不再动画。LiveTerminal.tsx把记忆能力演出来LiveTerminal.tsx 是整页最有说服力的演示组件它在终端窗口里逐字打字回放一段真实的 agentmemory 使用脚本$ npx agentmemory/agentmemory [agentmemory] iii-engine ready on :3111 [agentmemory] {mcpTools} MCP tools registered [agentmemory] {hooks} autohooks armed $ memory.recall({ query: where did we land the retry logic? }) // hybrid retrieval: BM25 vector graph ✓ 3 memories · reranked on device → src/retry.ts:47 · exponentialBackoff(max5, jittertrue) → commit 8f2e14c · resolve conflict honor x-amz headers → session 2026-04-16 · bug: race when Retry-After is empty $ memory.consolidate({ project: pay-api }) ✓ raw observations → semantic memories · audit rows written其中{mcpTools}、{hooks}由构建期元数据注入真实数字。实现上组件用 IntersectionObserver 在滚动到视口 40% 时自动播放一次只播一次逐字符定时渲染prefers-reduced-motion时零延迟完成底部提供Replay按钮随时重播右上角终端标题agentmemorylocalhost:3111呼应了 agentmemory 服务实际监听 3111 端口的事实。Install.tsx三步安装 点击复制Install.tsx 是转化漏斗的终点提供了四条命令步骤命令说明1. 安装一次npm install -g agentmemory/agentmemory把agentmemory放入 PATH2. 启动记忆服务agentmemory运行于 :3111查看器在 :31133. 运行演示agentmemory demo播种 3 个会话展示真实数据上的混合检索零安装替代npx agentmemory/agentmemory用 npx 缓存取代第 12 步注意 README 中的注意事项每条命令都是可点击复制的CopyBox按钮navigator.clipboard.writeText复制成功短暂显示 COPIED。区块导语还交代了关键的模型策略本地捕获与检索不需要 LLM 密钥只有要启用 consolidation、图抽取与 LLM 压缩时才需要为 Anthropic / OpenAI / Gemini / MiniMax / OpenRouter 配置密钥——这与仓库主 README 的能力划分一致。Compare.tsx对比表的数据边界Compare.tsx 渲染一张 agentmemory 与 Mem0 / Letta / Zep(Graphiti) 的对比表维度包括检索召回率、外部依赖agentmemory 为 0、REST 端点数、MCP 工具数、自动捕获 hook、原生 Agent 插件数6与开源协议Apache-2.0。组件源码中明确写了免责声明式导语竞品数字来自对方各自基准的公开声明展示目的只是给出量级参考ballpark只有 agentmemory 一行是可复现的实测值。作为技术文章引用时也请沿用同样的边界表述。设计系统源自兰博基尼的黑金规范README 明确指出设计系统的唯一权威来源是仓库根目录的 DESIGN.md它由npx getdesignlatest add lamborghini生成并约定每一个新组件都应先参考它。核心规范摘要如下色彩绝对黑#000000作为主导表面兰博基尼金#FFC000是唯一强调色且只用于主 CTA 按钮纯白#FFFFFF承载文字悬停态用暗金#917300、幽灵按钮悬停用青色#1EAEDB中性灰从#181818→#202020→#494949→#7D7D7D逐级提亮用表面变亮代替投影来表达层级。排版全大写是默认语态显示标题用 400 常规字重 0.92–1.19 的紧凑行高无斜体标题字号从 120px 的 Hero 级到 10px 的微标签形成 12:1 的戏剧性层级跨度。圆角按钮与卡片一律0px直角锐利、棱角分明全站唯一允许圆角的是 20px 的开关组件。动效约束悬停交互只允许颜色/透明度变化禁止 scale 或 translate 动画深度靠表面色阶而非阴影——在黑底上阴影没有意义。间距基础单位 8px按钮内边距幽灵态 16px / 金色主按钮 24px区块纵向 48–56px。触控目标CTA 高度不小于 48px超过 WCAG 44×44px 要求。在 website/app/globals.css 中这些令牌落地为.btn--accent金色主按钮、.btn--ghost透明幽灵按钮、.section-head/.section-eyebrow/.section-title/.section-lede等工具类页面各区块统一复用保证全站视觉一致。动手实践建议想在本地完整跑通先确认 Node ≥ 20node -v再cd website npm install npm run dev首次启动会自动生成lib/generated-meta.json若该文件缺失或数字异常检查是否在仓库根目录执行了构建脚本。想自定义视觉不要零散改各组件 CSS先读 DESIGN.md 的调色板与排版表再统一调整 globals.css 中的设计令牌最后才动组件级 CSS Module。想新增区块遵循服务端组件为主体、use client岛屿只留给交互的约定在 page.tsx 中按顺序插入并在 DESIGN.md 中核对新组件用色、字号与圆角是否符合黑金规范。想上线按 README 的两种 Vercel 方式任选其一注意必须检出完整仓库构建脚本需要根目录的版本号与源码统计无需配置任何环境变量。总结website/这份工程的价值不止于一个官网而是一套可复制的营销站方法论极简依赖与零构建配置让任何人三分钟内跑起来构建期从真实源码统计并注入版本、工具数、测试数等动态数据让营销页上的每一个数字都长在仓库上、可随发版自动更新服务端组件 客户端岛屿的架构在表现力与性能间取得平衡黑金设计系统则用一份权威规范文档约束所有新组件。对想要搭建技术产品落地页的团队而言这份 README 连同 DESIGN.md 本身就是一份高质量的参考实现。【免费下载链接】agentmemory#1 Persistent memory for AI coding agents based on real-world benchmarks项目地址: https://gitcode.com/GitHub_Trending/age/agentmemory创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考