如何把 Inkeep AI 问答按钮接入 Nextra 文档站点【免费下载链接】nextraSimple, powerful and flexible site generation framework with everything you love from Next.js.项目地址: https://gitcode.com/GitHub_Trending/ne/nextra如果你的站点基于 Nextranextranextra-theme-docs构建想让访问者直接在文档页面上向 AI 提问可以把 Inkeep 的 React 组件InkeepChatButton挂到站点的根布局body中。接入后按钮会出现在文档站的所有页面上用户点击即可调用你在 Inkeep 上创建的 Web Assistant。前提条件是一个已能运行的 Nextra Docs 主题站点即根目录有app/layout.jsx/app/layout.tsx并使用nextra-theme-docs的Layout组件以及一个已在 Inkeep 侧创建的 Web Assistant。1. 准备 API key 并写入环境变量先在 Inkeep 的文档控制台中按官方流程创建一个 Web Assistant并拿到对应的 API keyNextra 文档中的 Ask AI 页面给出了创建入口的说明。然后把 key 写入项目根目录的.env文件NEXT_PUBLIC_INKEEP_API_KEYyour_actual_api_key_hereyour_actual_api_key_here是占位符替换为你实际拿到的 key。变量名必须以NEXT_PUBLIC_开头这样 Next.js 才会把它暴露给客户端组件。2. 安装 Inkeep React 组件库在站点所在目录执行以仓库的docs/站点为例该依赖在 docs/package.json 中为inkeep/cxkit-react版本^0.5.98npm i inkeep/cxkit-react如果你的项目用 yarn对应yarn add inkeep/cxkit-react。3. 创建聊天按钮组件新建文件inkeep-chat-button.tsx放在app/目录或任意可被根布局引用的位置。Nextra 官方文档给出的示例如下use client import { InkeepChatButton } from inkeep/cxkit-react import type { FC } from react export const ChatButton: FC () { return ( InkeepChatButton aiChatSettings{{ apiKey: process.env.NEXT_PUBLIC_INKEEP_API_KEY!, // Customize your AI assistants appearance aiAssistantAvatar: /icon.svg, // Path to your assistants avatar aiAssistantName: Nextra Assistant // Name shown to users }} baseSettings{{ // Match your sites brand colors primaryBrandColor: #238aff, // Sync with your sites dark/light mode colorMode: { sync: { target: html, attributes: [class], isDarkMode(attrs) { return attrs.class dark } } } }} / ) }其中aiAssistantAvatar指向站点public/下的头像路径、aiAssistantName是展示给用户的助手名称两者都按你的站点自行调整colorMode.sync的作用是让按钮跟随html元素的class是否为dark来切换深浅色与 Nextra 站点现有的主题切换保持一致。本仓库的文档站自己就用过这套组件可以对照 docs/components/inkeep-chat-button.tsx 查看实际写法。与上面官方示例有两处差异属于正常的项目自定义apiKey放在了baseSettings里而不是aiChatSettings里baseSettings.theme.styles中额外注入了一段 CSS[data-themelight] .ikp-chat-button__avatar-content { filter: invert(1); }用于修复浅色主题下头像图标的显示。这两处按你站点实际的头像与主题表现取舍即可官方示例与仓库实现二选一保持自洽。4. 把按钮挂进根布局在根布局文件app/layout.tsx中导入ChatButton并作为body的直接子元素渲染、放在Layout之外。官方示例结构import { Layout } from nextra-theme-docs // or nextra-theme-blog or your custom theme import { Head } from nextra/components import { getPageMap } from nextra/page-map import type { FC } from react import { ChatButton } from ../path/to/your/inkeep-chat-button const RootLayout: FCLayoutProps/ async ({ children }) { const pageMap await getPageMap() return ( html langen dirltr suppressHydrationWarning Head / body ChatButton / Layout pageMap{pageMap} // ... other layout props {children} /Layout /body /html ) } export default RootLayout../path/to/your/inkeep-chat-button按你的组件实际位置替换。仓库文档站的真实根布局 docs/app/layout.tsx 中ChatButton /来自components/inkeep-chat-button就渲染在body内、Layout之前与本节结构一致。注意因为按钮挂在根布局上它会出现在文档站的所有页面上这是官方文档明确说明的行为[!IMPORTANT]提示接入前需确认这符合你的预期。5. 启动站点并验证运行项目的dev命令package.json中定义为nextnpm run dev打开任意文档页面页面右下角应出现aiAssistantName配置的 AI 问答按钮点击后应弹出 Inkeep 聊天窗口并能发起提问。由于按钮位于根布局随机切到其他文档页确认它仍然在即可验证“全站可见”这一点符合预期。若按钮不出现优先核对三件事NEXT_PUBLIC_INKEEP_API_KEY是否已写入.env且重启过开发服务、inkeep/cxkit-react是否安装成功、ChatButton是否真的渲染进了body。参考路径接入步骤原文docs/app/docs/guide/search/ai/page.mdx仓库内实际使用的按钮组件docs/components/inkeep-chat-button.tsx根布局集成位置docs/app/layout.tsx依赖声明docs/package.json【免费下载链接】nextraSimple, powerful and flexible site generation framework with everything you love from Next.js.项目地址: https://gitcode.com/GitHub_Trending/ne/nextra创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考