doccupine 0.0.121 → 0.0.123

package/dist/lib/constants.d.ts

@@ -3,3 +3,4 @@ export declare const DEFAULT_SITE_NAME = "Doccupine";
 export declare const DEFAULT_META_DESCRIPTION = "Generated with Doccupine";
 export declare const DEFAULT_FAVICON = "https://docs.doccupine.com/favicon.ico";
 export declare const DEFAULT_OG_IMAGE = "https://docs.doccupine.com/preview.png";
+export declare const DEFAULT_URL = "https://docs.doccupine.com";

package/dist/lib/constants.js

@@ -3,3 +3,4 @@ export const DEFAULT_SITE_NAME = "Doccupine";
 export const DEFAULT_META_DESCRIPTION = "Generated with Doccupine";
 export const DEFAULT_FAVICON = "https://docs.doccupine.com/favicon.ico";
 export const DEFAULT_OG_IMAGE = "https://docs.doccupine.com/preview.png";
+export const DEFAULT_URL = "https://docs.doccupine.com";

package/dist/lib/structures.js

@@ -113,6 +113,7 @@ import { platformFontsSettingsMdxTemplate } from "../templates/mdx/platform/font
 import { platformExternalLinksMdxTemplate } from "../templates/mdx/platform/external-links.mdx.js";
 import { platformAnalyticsMdxTemplate } from "../templates/mdx/platform/analytics.mdx.js";
 import { platformAiAssistantMdxTemplate } from "../templates/mdx/platform/ai-assistant.mdx.js";
+import { platformMcpMdxTemplate } from "../templates/mdx/platform/mcp.mdx.js";
 import { platformCustomDomainsMdxTemplate } from "../templates/mdx/platform/custom-domains.mdx.js";
 import { platformBuildAndDeployMdxTemplate } from "../templates/mdx/platform/build-and-deploy.mdx.js";
 import { platformTeamMembersMdxTemplate } from "../templates/mdx/platform/team-members.mdx.js";
@@ -245,6 +246,7 @@ export const startingDocsStructure = {
     "platform/external-links.mdx": platformExternalLinksMdxTemplate,
     "platform/analytics.mdx": platformAnalyticsMdxTemplate,
     "platform/ai-assistant.mdx": platformAiAssistantMdxTemplate,
+    "platform/mcp.mdx": platformMcpMdxTemplate,
     "platform/custom-domains.mdx": platformCustomDomainsMdxTemplate,
     "platform/build-and-deploy.mdx": platformBuildAndDeployMdxTemplate,
     "platform/team-members.mdx": platformTeamMembersMdxTemplate,

package/dist/templates/components/Chat.d.ts

@@ -1 +1 @@
-export declare const chatTemplate = "\"use client\";\nimport React, {\n  createContext,\n  useCallback,\n  useContext,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport styled, { css, keyframes } from \"styled-components\";\nimport { Button, IconButton } from \"cherry-styled-components\";\nimport { ArrowUp, LoaderPinwheel, RotateCcw, Sparkles, X } from \"lucide-react\";\nimport remarkGfm from \"remark-gfm\";\nimport rehypeHighlight from \"rehype-highlight\";\nimport { MDXRemote, MDXRemoteSerializeResult } from \"next-mdx-remote\";\nimport { serialize } from \"next-mdx-remote/serialize\";\nimport Link from \"next/link\";\nimport { mq, Theme } from \"@/app/theme\";\nimport { useLockBodyScroll } from \"@/components/LockBodyScroll\";\nimport { useMDXComponents as getMDXComponents } from \"@/components/MDXComponents\";\nimport {\n  styledAnchor,\n  styledTable,\n  stylesLists,\n  StyledSmallButton,\n  interactiveStyles,\n  thinScrollbar,\n} from \"@/components/layout/SharedStyled\";\n\nconst mdxComponents = getMDXComponents({});\n\nconst styledText = css<{ theme: Theme }>`\n  font-size: ${({ theme }) => theme.fontSizes.text.xs};\n  line-height: ${({ theme }) => theme.lineHeights.text.xs};\n\n  ${mq(\"lg\")} {\n    font-size: ${({ theme }) => theme.fontSizes.small.lg};\n    line-height: ${({ theme }) => theme.lineHeights.small.lg};\n  }\n`;\n\nconst StyledChat = styled.div<{ theme: Theme; $isVisible: boolean }>`\n  margin: 0;\n  position: fixed;\n  top: 0;\n  right: 0;\n  width: 100%;\n  height: calc(100dvh - 90px);\n  overflow-y: scroll;\n  overflow-x: hidden;\n  z-index: 1000;\n  padding: 0 20px;\n  transition: all 0.3s ease;\n  transform: translateX(0);\n  background: ${({ theme }) => theme.colors.light};\n  -webkit-overflow-scrolling: touch;\n  opacity: 1;\n\n  &::-webkit-scrollbar {\n    display: none;\n  }\n\n  ${({ $isVisible }) =>\n    !$isVisible &&\n    css`\n      transform: translateX(100%);\n      opacity: 0;\n    `}\n\n  ${mq(\"lg\")} {\n    width: 420px;\n    border-left: solid 1px ${({ theme }) => theme.colors.grayLight};\n  }\n`;\n\nconst loadingAnimation = keyframes`\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n`;\n\nconst rotateGradient = keyframes`\n  0% {\n    --gradient-angle: 0deg;\n  }\n  100% {\n    --gradient-angle: 360deg;\n  }\n`;\n\nconst pulseGlow = keyframes`\n  0%, 100% {\n    opacity: 0.5;\n    filter: blur(16px);\n  }\n  50% {\n    opacity: 1;\n    filter: blur(22px);\n  }\n`;\n\nconst sparkleFloat = keyframes`\n  0%, 100% {\n    opacity: 0;\n    transform: translateY(0) scale(0);\n  }\n  50% {\n    opacity: 0.9;\n    transform: translateY(-20px) scale(1);\n  }\n`;\n\nconst shimmer = keyframes`\n  0% {\n    background-position: 0% center;\n  }\n  50% {\n    background-position: 100% center;\n  }\n  100% {\n    background-position: 0% center;\n  }\n`;\n\nconst StyledRainbowInputWrapper = styled.div<{\n  theme: Theme;\n  $isActive: boolean;\n}>`\n  @property --gradient-angle {\n    syntax: \"<angle>\";\n    initial-value: 0deg;\n    inherits: false;\n  }\n\n  position: relative;\n  flex: 1;\n\n  &::before {\n    content: \"\";\n    position: absolute;\n    inset: -2px;\n    border-radius: 14px;\n    background: conic-gradient(\n      from var(--gradient-angle),\n      #cc5555,\n      #d9a745,\n      #3ab0cc,\n      #cc7fc2,\n      #4380cc,\n      #4c1fa3,\n      #cc5555\n    );\n    opacity: 0;\n    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n    animation: ${rotateGradient} 3s linear infinite;\n    z-index: 0;\n  }\n\n  &::after {\n    content: \"\";\n    position: absolute;\n    inset: -10px;\n    border-radius: 20px;\n    background: conic-gradient(\n      from var(--gradient-angle),\n      #ff6b6b66,\n      #feca5766,\n      #48dbfb66,\n      #ff9ff366,\n      #54a0ff66,\n      #5f27cd66,\n      #ff6b6b66\n    );\n    opacity: 0;\n    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n    animation:\n      ${rotateGradient} 3s linear infinite,\n      ${pulseGlow} 2s ease-in-out infinite;\n    z-index: -1;\n    pointer-events: none;\n  }\n\n  &:hover::before,\n  &:focus-within::before {\n    opacity: 1;\n  }\n\n  &:hover::after,\n  &:focus-within::after {\n    opacity: 1;\n  }\n\n  ${({ $isActive }) =>\n    $isActive &&\n    css`\n      &::before {\n        opacity: 1;\n      }\n      &::after {\n        opacity: 1;\n      }\n    `}\n`;\n\nconst StyledSparkleContainer = styled.div<{ $isActive: boolean }>`\n  position: absolute;\n  inset: -30px;\n  pointer-events: none;\n  overflow: hidden;\n  border-radius: 30px;\n  z-index: -2;\n  opacity: 0;\n  transition: opacity 0.4s ease;\n\n  ${({ $isActive }) =>\n    $isActive &&\n    css`\n      opacity: 1;\n    `}\n`;\n\nconst StyledSparkle = styled.div<{\n  $color: string;\n  $left: number;\n  $top: number;\n  $delay: number;\n}>`\n  position: absolute;\n  width: 4px;\n  height: 4px;\n  border-radius: 50%;\n  background: ${({ $color }) => $color};\n  box-shadow: 0 0 6px ${({ $color }) => $color};\n  left: ${({ $left }) => $left}%;\n  top: ${({ $top }) => $top}%;\n  animation: ${sparkleFloat} 2s ease-in-out infinite;\n  animation-delay: ${({ $delay }) => $delay}s;\n`;\n\nconst StyledRainbowInput = styled.input<{ theme: Theme }>`\n  position: relative;\n  z-index: 1;\n  width: 100%;\n  background: ${({ theme }) => theme.colors.light};\n  border: 1px solid ${({ theme }) => theme.colors.grayLight};\n  border-radius: 12px;\n  padding: 12px 18px;\n  font-size: ${({ theme }) => theme.fontSizes.text.lg};\n  font-family: inherit;\n  color: ${({ theme }) => theme.colors.dark};\n  outline: none;\n  transition:\n    border-color 0.3s ease,\n    box-shadow 0.3s ease;\n\n  ${mq(\"lg\")} {\n    font-size: ${({ theme }) => theme.fontSizes.small.lg};\n  }\n\n  &::placeholder {\n    color: ${({ theme }) =>\n      `color-mix(in srgb, ${theme.colors.dark} 40%, transparent)`};\n    transition: color 0.3s ease;\n  }\n\n  &:focus::placeholder {\n    color: ${({ theme }) =>\n      `color-mix(in srgb, ${theme.colors.dark} 60%, transparent)`};\n  }\n\n  &:focus {\n    border-color: transparent;\n  }\n`;\n\nconst StyledRainbowButton = styled(Button)<{\n  theme: Theme;\n  $hasContent: boolean;\n}>`\n  padding-top: 10px;\n  padding-bottom: 10px;\n  position: relative;\n  overflow: hidden;\n  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;\n  color: ${({ theme }) => theme.colors.surface};\n\n  &::before {\n    content: \"\";\n    position: absolute;\n    inset: 0;\n    background: linear-gradient(\n      135deg,\n      #ff6b6b,\n      #feca57,\n      #48dbfb,\n      #ff9ff3,\n      #54a0ff\n    );\n    background-size: 300% 300%;\n    opacity: 0;\n    transition: opacity 0.3s ease;\n    z-index: 0;\n    animation: ${shimmer} 3s linear infinite;\n    width: 200%;\n  }\n\n  ${({ $hasContent }) =>\n    $hasContent &&\n    css`\n      &::before {\n        opacity: 1;\n      }\n    `}\n\n  &:hover::before {\n    opacity: 1;\n  }\n\n  &:hover {\n    transform: scale(1.05);\n  }\n\n  &:active {\n    transform: scale(0.95);\n  }\n\n  & svg {\n    position: relative;\n    z-index: 1;\n    transition: transform 0.3s ease;\n  }\n\n  &:disabled,\n  &:disabled:hover {\n    background: ${({ theme }) => theme.colors.primaryDark};\n    transform: none;\n    box-shadow: none;\n\n    &::before {\n      opacity: 0;\n    }\n  }\n`;\n\nconst StyledChatForm = styled.form<{ theme: Theme; $isVisible: boolean }>`\n  display: flex;\n  gap: 10px;\n  justify-content: center;\n  align-items: center;\n  background: ${({ theme }) => theme.colors.light};\n  padding: 20px;\n  position: fixed;\n  bottom: 0;\n  right: 0;\n  z-index: 1000;\n  width: 100%;\n  border-top: solid 1px ${({ theme }) => theme.colors.grayLight};\n  transition: all 0.3s ease;\n  transform: translateX(100%);\n  opacity: 0;\n\n  ${mq(\"lg\")} {\n    width: 420px;\n    border-left: solid 1px ${({ theme }) => theme.colors.grayLight};\n  }\n\n  ${({ $isVisible }) =>\n    $isVisible &&\n    css`\n      opacity: 1;\n      transform: translateX(0);\n    `}\n\n  & .loading {\n    animation: ${loadingAnimation} 1s linear infinite;\n  }\n`;\n\nconst StyledGlowSmallButton = styled(StyledSmallButton)<{\n  theme: Theme;\n  $hasContent: boolean;\n}>`\n  @property --gradient-angle {\n    syntax: \"<angle>\";\n    initial-value: 0deg;\n    inherits: false;\n  }\n\n  position: relative;\n  isolation: isolate;\n  margin-right: 0;\n  background: ${({ theme }) => theme.colors.light};\n  padding: 0;\n\n  &::before {\n    content: \"\";\n    inset: -2px;\n    border-radius: 8px;\n    background: conic-gradient(\n      from var(--gradient-angle),\n      #cc5555,\n      #d9a745,\n      #3ab0cc,\n      #cc7fc2,\n      #4380cc,\n      #4c1fa3,\n      #cc5555\n    );\n    opacity: 0;\n    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n    animation: ${rotateGradient} 3s linear infinite;\n    z-index: -1;\n    position: absolute;\n    top: -2px;\n    left: -2px;\n    width: calc(100% + 4px);\n    height: calc(100% + 4px);\n  }\n\n  &::after {\n    content: \"\";\n    position: absolute;\n    inset: -8px;\n    border-radius: 14px;\n    background: conic-gradient(\n      from var(--gradient-angle),\n      #ff6b6b66,\n      #feca5766,\n      #48dbfb66,\n      #ff9ff366,\n      #54a0ff66,\n      #5f27cd66,\n      #ff6b6b66\n    );\n    opacity: 0;\n    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n    animation:\n      ${rotateGradient} 3s linear infinite,\n      ${pulseGlow} 2s ease-in-out infinite;\n    z-index: -2;\n    pointer-events: none;\n  }\n\n  &:hover::before,\n  &:hover::after {\n    opacity: 1;\n  }\n\n  & span {\n    padding: 6px 8px;\n    display: flex;\n    background: ${({ theme }) => theme.colors.light};\n    border-radius: ${({ theme }) => theme.spacing.radius.xs};\n    gap: 6px;\n  }\n\n  ${({ $hasContent }) =>\n    $hasContent &&\n    css`\n      &::before {\n        opacity: 1;\n      }\n      &::after {\n        opacity: 1;\n      }\n    `}\n`;\n\nconst StyledError = styled.div<{ theme: Theme }>`\n  overflow-x: auto;\n  ${thinScrollbar};\n  background: ${({ theme }) => theme.colors.error};\n  color: ${({ theme }) => theme.colors.surface};\n  padding: 10px;\n  border-radius: 8px;\n  margin: 20px 0;\n  width: 100%;\n  ${styledText};\n`;\n\nconst loadingDotAnimation = keyframes`\n    0% {\n      opacity: 0;\n    }\n    50% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n    }\n`;\n\nconst StyledLoading = styled.div<{ theme: Theme }>`\n  overflow-x: auto;\n  ${thinScrollbar};\n  margin: 20px 0;\n  width: 100%;\n  font-weight: 600;\n  ${styledText};\n  color: ${({ theme }) => theme.colors.dark};\n\n  & span {\n    &:nth-child(1) {\n      animation: ${loadingDotAnimation} 1s ease infinite;\n    }\n    &:nth-child(2) {\n      animation: ${loadingDotAnimation} 1s ease infinite;\n      animation-delay: 0.2s;\n    }\n    &:nth-child(3) {\n      animation: ${loadingDotAnimation} 1s ease infinite;\n      animation-delay: 0.4s;\n    }\n  }\n`;\n\nconst StyledAnswer = styled.div<{ theme: Theme; $isAnswer: boolean }>`\n  overflow-x: auto;\n  ${thinScrollbar};\n  background: ${({ theme }) => theme.colors.primary};\n  color: ${({ theme }) => theme.colors.surface};\n  padding: 10px 15px;\n  border-radius: 18px;\n  margin: 20px 0 20px auto;\n  width: fit-content;\n  ${styledText};\n\n  & p {\n    ${styledText};\n  }\n\n  ${({ $isAnswer }) =>\n    $isAnswer &&\n    css`\n      background: transparent;\n      color: ${({ theme }) => theme.colors.dark};\n      padding: 0;\n      width: 100%;\n      max-width: 100%;\n      margin: 20px 0;\n      border-radius: 0;\n    `}\n\n  & code:not([class]) {\n    background: ${({ theme }) =>\n      `color-mix(in srgb, ${theme.colors.primaryLight} 20%, transparent)`};\n    color: ${({ theme }) => theme.colors.dark};\n    padding: 2px 4px;\n    border-radius: ${({ theme }) => theme.spacing.radius.xs};\n    white-space: pre;\n  }\n\n  ${styledAnchor};\n  ${stylesLists};\n  ${styledTable};\n\n  & pre,\n  & .hljs {\n    margin: 10px 0;\n  }\n\n  & .code-wrapper pre {\n    margin: 0;\n    ${styledText};\n  }\n\n  & > *:first-child {\n    margin-top: 0;\n  }\n\n  & > *:last-child {\n    margin-bottom: 0;\n\n    & > *:last-child {\n      margin-bottom: 0;\n    }\n  }\n\n  & ul,\n  & ol {\n    & li {\n      ${styledText};\n    }\n  }\n\n  & img,\n  & video,\n  & iframe {\n    max-width: 100%;\n    border-radius: ${({ theme }) => theme.spacing.radius.lg};\n    margin: 10px 0;\n    display: block;\n  }\n\n  & h1,\n  & h2,\n  & h3,\n  & h4,\n  & h5,\n  & h6 {\n    margin: 10px 0;\n    padding: 0;\n  }\n`;\n\nconst StyledSources = styled.div`\n  display: flex;\n  gap: 16px;\n  flex-wrap: wrap;\n  margin: -5px 0 20px;\n`;\n\nconst StyledSourceLink = styled(Link)<{ theme: Theme }>`\n  position: relative;\n  text-decoration: none;\n  font-size: ${({ theme }) => theme.fontSizes.small.lg};\n  line-height: 1;\n  color: ${({ theme }) => theme.colors.primary};\n  display: flex;\n  gap: 6px;\n  transition: all 0.3s ease;\n  font-weight: 600;\n  white-space: nowrap;\n  min-width: fit-content;\n  background: ${({ theme }) =>\n    `color-mix(in srgb, ${theme.colors.primaryLight} 10%, transparent)`};\n  padding: 6px 8px;\n  border-radius: ${({ theme }) => theme.spacing.radius.xs};\n  ${interactiveStyles};\n\n  & * {\n    margin: auto 0;\n  }\n\n  &:hover {\n    color: ${({ theme }) => theme.colors.accent};\n  }\n`;\n\nconst StyledChatTitle = styled.div<{ theme: Theme }>`\n  display: flex;\n  flex-wrap: nowrap;\n  justify-content: space-between;\n  position: sticky;\n  margin: 0 -20px;\n  padding: 16px 20px;\n  height: 62px;\n  top: 0;\n  background: ${({ theme }) => theme.colors.light};\n  border-bottom: solid 1px ${({ theme }) => theme.colors.grayLight};\n  z-index: 1000;\n`;\n\nconst StyledChatTitleIconWrapper = styled.span<{ theme: Theme }>`\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  color: ${({ theme }) => theme.colors.dark};\n`;\n\ntype Source = {\n  id: string;\n  path: string;\n  uri: string;\n  score: number;\n};\n\ntype Answer = {\n  text: string;\n  answer?: boolean;\n  mdx?: MDXRemoteSerializeResult;\n  sources?: Source[];\n};\n\nconst SPARKLE_COLORS = [\n  \"#ff6b6b\",\n  \"#feca57\",\n  \"#48dbfb\",\n  \"#ff9ff3\",\n  \"#54a0ff\",\n  \"#5f27cd\",\n];\n\n// Deterministic sparkle positions to avoid hydration mismatch\nconst SPARKLE_POSITIONS = [\n  { left: 8, top: 35 },\n  { left: 17, top: 55 },\n  { left: 26, top: 28 },\n  { left: 35, top: 68 },\n  { left: 44, top: 42 },\n  { left: 53, top: 75 },\n  { left: 62, top: 32 },\n  { left: 71, top: 58 },\n  { left: 80, top: 45 },\n  { left: 89, top: 65 },\n];\n\ninterface RainbowInputProps {\n  id?: string;\n  value: string;\n  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;\n  placeholder?: string;\n  autoComplete?: string;\n  \"aria-label\"?: string;\n  inputRef?: React.Ref<HTMLInputElement>;\n}\n\nfunction RainbowInput({\n  id,\n  value,\n  onChange,\n  placeholder,\n  autoComplete,\n  \"aria-label\": ariaLabel,\n  inputRef,\n}: RainbowInputProps) {\n  const [isFocused, setIsFocused] = useState(false);\n  const [isHovered, setIsHovered] = useState(false);\n  const isActive = isFocused || isHovered;\n\n  const sparkles = SPARKLE_POSITIONS.map((pos, i) => ({\n    color: SPARKLE_COLORS[i % SPARKLE_COLORS.length],\n    left: pos.left,\n    top: pos.top,\n    delay: i * 0.12,\n  }));\n\n  return (\n    <StyledRainbowInputWrapper\n      $isActive={isActive}\n      onMouseEnter={() => setIsHovered(true)}\n      onMouseLeave={() => setIsHovered(false)}\n    >\n      <StyledSparkleContainer $isActive={isActive}>\n        {sparkles.map((sparkle, i) => (\n          <StyledSparkle\n            key={i}\n            $color={sparkle.color}\n            $left={sparkle.left}\n            $top={sparkle.top}\n            $delay={sparkle.delay}\n          />\n        ))}\n      </StyledSparkleContainer>\n      <StyledRainbowInput\n        ref={inputRef}\n        id={id}\n        value={value}\n        onChange={onChange}\n        placeholder={placeholder}\n        autoComplete={autoComplete}\n        aria-label={ariaLabel}\n        onFocus={() => setIsFocused(true)}\n        onBlur={() => setIsFocused(false)}\n      />\n    </StyledRainbowInputWrapper>\n  );\n}\n\nfunction ChatButtonCTA() {\n  const { toggleChat, isOpen } = useContext(ChatContext);\n\n  return (\n    <StyledGlowSmallButton\n      onClick={toggleChat}\n      aria-label=\"Ask AI Assistant\"\n      $hasContent={isOpen}\n      type=\"button\"\n    >\n      <span>\n        <Sparkles size={16} />\n        Ask AI\n      </span>\n    </StyledGlowSmallButton>\n  );\n}\n\nfunction Chat() {\n  const {\n    isOpen,\n    question,\n    setQuestion,\n    loading,\n    error,\n    answer,\n    ask,\n    closeChat,\n    resetChat,\n    chatInputRef,\n  } = useContext(ChatContext);\n  const endRef = useRef<HTMLDivElement | null>(null);\n\n  useLockBodyScroll(isOpen);\n\n  useEffect(() => {\n    endRef.current?.scrollIntoView({ behavior: \"smooth\", block: \"end\" });\n  }, [answer]);\n\n  useEffect(() => {\n    if (answer?.length > 0) {\n      chatInputRef.current?.focus();\n    }\n  }, [answer, chatInputRef]);\n\n  return (\n    <>\n      <StyledChat $isVisible={isOpen}>\n        <StyledChatTitle>\n          <StyledChatTitleIconWrapper>\n            <Sparkles />\n            <h3>AI Assistant</h3>\n          </StyledChatTitleIconWrapper>\n          <StyledChatTitleIconWrapper>\n            <IconButton\n              onClick={resetChat}\n              aria-label=\"Reset chat history\"\n              title=\"Reset chat history\"\n            >\n              <RotateCcw />\n            </IconButton>\n            <IconButton\n              onClick={closeChat}\n              aria-label=\"Close chat\"\n              title=\"Close chat\"\n            >\n              <X />\n            </IconButton>\n          </StyledChatTitleIconWrapper>\n        </StyledChatTitle>\n        {answer &&\n          answer.map((a, i) => (\n            <React.Fragment key={i}>\n              <StyledAnswer $isAnswer={a.answer ?? false}>\n                {a.answer && a.mdx ? (\n                  <MDXRemote {...a.mdx} components={mdxComponents} />\n                ) : (\n                  a.text\n                )}\n              </StyledAnswer>\n              {a.answer && a.sources && a.sources.length > 0 && (\n                <StyledSources>\n                  {a.sources.map((src) => {\n                    const slug = src.uri\n                      .replace(\"docs://\", \"\")\n                      .replace(/^\\/+/, \"\");\n                    const href = slug ? `/${slug}/` : \"/\";\n                    const label = slug\n                      ? slug\n                          .split(\"/\")\n                          .pop()!\n                          .replace(/-/g, \" \")\n                          .replace(/\\b\\w/g, (c: string) => c.toUpperCase())\n                      : \"Home\";\n                    return (\n                      <StyledSourceLink\n                        key={src.id}\n                        href={href}\n                        onClick={() => {\n                          if (window.innerWidth <= 992) {\n                            closeChat();\n                          }\n                        }}\n                      >\n                        {label}\n                      </StyledSourceLink>\n                    );\n                  })}\n                </StyledSources>\n              )}\n            </React.Fragment>\n          ))}\n        {loading && (\n          <StyledLoading>\n            Answering<span>.</span>\n            <span>.</span>\n            <span>.</span>\n          </StyledLoading>\n        )}\n        {error && (\n          <StyledError>\n            <strong>Error:</strong> {error}\n          </StyledError>\n        )}\n        <div ref={endRef} />\n      </StyledChat>\n\n      <StyledChatForm onSubmit={ask} $isVisible={isOpen}>\n        <RainbowInput\n          id=\"chat-bottom-input\"\n          inputRef={chatInputRef}\n          value={question}\n          onChange={(e) => setQuestion(e.target.value)}\n          placeholder=\"Ask AI Assistant...\"\n          autoComplete=\"off\"\n          aria-label=\"Ask a follow-up question\"\n        />\n        <StyledRainbowButton\n          type=\"submit\"\n          disabled={loading || question.trim() === \"\"}\n          $hasContent={question.trim().length > 0}\n          aria-label={loading ? \"Loading response\" : \"Submit question\"}\n        >\n          {loading ? <LoaderPinwheel className=\"loading\" /> : <ArrowUp />}\n        </StyledRainbowButton>\n      </StyledChatForm>\n    </>\n  );\n}\n\nconst ChatContext = createContext<{\n  isOpen: boolean;\n  setIsOpen: (isOpen: boolean) => void;\n  toggleChat: () => void;\n  isChatActive: boolean;\n  question: string;\n  setQuestion: (q: string) => void;\n  loading: boolean;\n  error: string | null;\n  answer: Answer[];\n  setAnswer: (answers: Answer[]) => void;\n  ask: (e: React.FormEvent) => void;\n  closeChat: () => void;\n  resetChat: () => void;\n  chatInputRef: React.RefObject<HTMLInputElement | null>;\n}>({\n  isOpen: false,\n  setIsOpen: () => {},\n  toggleChat: () => {},\n  isChatActive: false,\n  question: \"\",\n  setQuestion: () => {},\n  loading: false,\n  error: null,\n  answer: [],\n  setAnswer: () => {},\n  ask: () => {},\n  closeChat: () => {},\n  resetChat: () => {},\n  chatInputRef: { current: null },\n});\n\ninterface ChatContextProviderProps {\n  children: React.ReactNode;\n  isChatActive: boolean;\n}\n\nconst ChtProvider = ({ children, isChatActive }: ChatContextProviderProps) => {\n  const [isOpen, setIsOpen] = useState(false);\n  const [question, setQuestion] = useState(\"\");\n  const [loading, setLoading] = useState(false);\n  const [error, setError] = useState<string | null>(null);\n  const [answer, setAnswer] = useState<Answer[]>([]);\n  const abortRef = useRef<AbortController | null>(null);\n  const chatInputRef = useRef<HTMLInputElement | null>(null);\n  const isOpenRef = useRef(isOpen);\n\n  useEffect(() => {\n    isOpenRef.current = isOpen;\n  }, [isOpen]);\n\n  // Open the assistant, seeding a greeting the first time and focusing the\n  // input once the panel has slid in (matches the 0.3s panel transition).\n  const openChat = useCallback(() => {\n    setIsOpen(true);\n    setAnswer((prev) =>\n      prev.length === 0\n        ? [{ text: \"Hey there, how can I assist you?\", answer: true }]\n        : prev,\n    );\n    setTimeout(() => {\n      chatInputRef.current?.focus();\n    }, 350);\n  }, []);\n\n  const toggleChat = useCallback(() => {\n    if (isOpenRef.current) {\n      setIsOpen(false);\n    } else {\n      openChat();\n    }\n  }, [openChat]);\n\n  // Global Cmd/Ctrl+I toggles the assistant, but only when chat is enabled.\n  useEffect(() => {\n    if (!isChatActive) return;\n    function handleKeyDown(e: KeyboardEvent) {\n      if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === \"i\") {\n        e.preventDefault();\n        toggleChat();\n      }\n    }\n    document.addEventListener(\"keydown\", handleKeyDown);\n    return () => document.removeEventListener(\"keydown\", handleKeyDown);\n  }, [isChatActive, toggleChat]);\n\n  async function ask(e: React.FormEvent) {\n    e.preventDefault();\n    if (loading || question.trim() === \"\") return;\n    const currentQuestion = question;\n    setQuestion(\"\");\n    setIsOpen(true);\n    setLoading(true);\n    setError(null);\n\n    const mergedQuestions =\n      answer.length > 0\n        ? [...answer, { text: currentQuestion, answer: false }]\n        : [{ text: currentQuestion, answer: false }];\n\n    setAnswer(mergedQuestions);\n\n    const controller = new AbortController();\n    abortRef.current = controller;\n\n    try {\n      const history = answer\n        .filter((a) => a.text.trim() !== \"\")\n        .map((a) => ({\n          role: a.answer ? (\"assistant\" as const) : (\"user\" as const),\n          content: a.text,\n        }));\n\n      const res = await fetch(\"/api/rag\", {\n        method: \"POST\",\n        headers: { \"Content-Type\": \"application/json\" },\n        body: JSON.stringify({ question: currentQuestion, history }),\n        signal: controller.signal,\n      });\n\n      if (!res.ok) {\n        // The body may be a proxy/gateway HTML error page (e.g. Cloudflare\n        // 524), not our JSON - never blindly JSON.parse it.\n        const contentType = res.headers.get(\"content-type\") || \"\";\n        let message = \"Request failed\";\n        if (contentType.includes(\"application/json\")) {\n          try {\n            const errorData = await res.json();\n            message = errorData.error || message;\n          } catch {\n            // Non-JSON despite the header - fall through to the default.\n          }\n        } else if ([502, 503, 504, 524].includes(res.status)) {\n          message = \"The assistant took too long to respond. Please try again.\";\n        }\n        throw new Error(message);\n      }\n\n      const reader = res.body?.getReader();\n      const decoder = new TextDecoder();\n      const contentParts: string[] = [];\n      let sources: Source[] = [];\n      if (!reader) {\n        throw new Error(\"Failed to get response reader\");\n      }\n\n      const streamingAnswerIndex = mergedQuestions.length;\n      setAnswer([...mergedQuestions, { text: \"\", answer: true }]);\n\n      let buffer = \"\";\n      while (true) {\n        const { done, value } = await reader.read();\n        if (done) break;\n\n        buffer += decoder.decode(value, { stream: true });\n        const parts = buffer.split(\"\\n\");\n        buffer = parts.pop() ?? \"\";\n\n        for (const line of parts) {\n          if (line.startsWith(\"data: \")) {\n            try {\n              const data = JSON.parse(line.slice(6));\n\n              if (data.type === \"metadata\") {\n                const allSources: Source[] = data.data?.sources ?? [];\n                const seen = new Set<string>();\n                sources = allSources.filter((s: Source) => {\n                  if (s.score < 0.4 || seen.has(s.uri)) return false;\n                  seen.add(s.uri);\n                  return true;\n                });\n              } else if (data.type === \"content\") {\n                contentParts.push(data.data);\n                const streamedContent = contentParts.join(\"\");\n\n                setAnswer((prev) => {\n                  const newAnswers = [...prev];\n                  newAnswers[streamingAnswerIndex] = {\n                    text: streamedContent,\n                    answer: true,\n                    sources,\n                  };\n                  return newAnswers;\n                });\n              } else if (data.type === \"error\") {\n                throw new Error(data.data);\n              } else if (data.type === \"done\") {\n                const streamedContent = contentParts.join(\"\");\n                let mdxSource: MDXRemoteSerializeResult | null = null;\n                try {\n                  mdxSource = await serialize(streamedContent, {\n                    parseFrontmatter: false,\n                    mdxOptions: {\n                      remarkPlugins: [remarkGfm],\n                      rehypePlugins: [rehypeHighlight],\n                      format: \"md\",\n                      development: false,\n                    },\n                  });\n                } catch (mdxError: unknown) {\n                  console.error(\"MDX serialization error:\", mdxError);\n                }\n\n                setAnswer((prev) => {\n                  const newAnswers = [...prev];\n                  newAnswers[streamingAnswerIndex] = {\n                    text: streamedContent,\n                    answer: true,\n                    mdx: mdxSource || undefined,\n                    sources,\n                  };\n                  return newAnswers;\n                });\n              }\n            } catch (parseError) {\n              if (\n                parseError instanceof Error &&\n                parseError.message !== \"Unknown error\"\n              ) {\n                console.error(\"Failed to parse SSE data:\", parseError);\n              }\n            }\n          }\n        }\n      }\n    } catch (err: unknown) {\n      if (err instanceof DOMException && err.name === \"AbortError\") return;\n      setError(err instanceof Error ? err.message : \"Unknown error\");\n    } finally {\n      abortRef.current = null;\n      setLoading(false);\n    }\n  }\n\n  function closeChat() {\n    setIsOpen(false);\n  }\n\n  function resetChat() {\n    abortRef.current?.abort();\n    setLoading(false);\n    setError(null);\n    setAnswer([{ text: \"Hey there, how can I assist you?\", answer: true }]);\n  }\n\n  return (\n    <ChatContext.Provider\n      value={{\n        isOpen,\n        setIsOpen,\n        toggleChat,\n        isChatActive,\n        question,\n        setQuestion,\n        loading,\n        error,\n        answer,\n        setAnswer,\n        ask,\n        closeChat,\n        resetChat,\n        chatInputRef,\n      }}\n    >\n      {children}\n    </ChatContext.Provider>\n  );\n};\n\nexport { Chat, ChtProvider, ChatContext, ChatButtonCTA };\n";
+export declare const chatTemplate = "\"use client\";\nimport React, {\n  createContext,\n  useCallback,\n  useContext,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport styled, { css, keyframes } from \"styled-components\";\nimport { Button, IconButton } from \"cherry-styled-components\";\nimport { ArrowUp, LoaderPinwheel, RotateCcw, Sparkles, X } from \"lucide-react\";\nimport remarkGfm from \"remark-gfm\";\nimport rehypeHighlight from \"rehype-highlight\";\nimport { MDXRemote, MDXRemoteSerializeResult } from \"next-mdx-remote\";\nimport { serialize } from \"next-mdx-remote/serialize\";\nimport Link from \"next/link\";\nimport { mq, Theme } from \"@/app/theme\";\nimport { useLockBodyScroll } from \"@/components/LockBodyScroll\";\nimport { useMDXComponents as getMDXComponents } from \"@/components/MDXComponents\";\nimport {\n  styledAnchor,\n  styledTable,\n  stylesLists,\n  StyledSmallButton,\n  interactiveStyles,\n  thinScrollbar,\n} from \"@/components/layout/SharedStyled\";\n\nconst mdxComponents = getMDXComponents({});\n\nconst styledText = css<{ theme: Theme }>`\n  font-size: ${({ theme }) => theme.fontSizes.text.xs};\n  line-height: ${({ theme }) => theme.lineHeights.text.xs};\n\n  ${mq(\"lg\")} {\n    font-size: ${({ theme }) => theme.fontSizes.small.lg};\n    line-height: ${({ theme }) => theme.lineHeights.small.lg};\n  }\n`;\n\nconst StyledChat = styled.div<{ theme: Theme; $isVisible: boolean }>`\n  margin: 0;\n  position: fixed;\n  top: 0;\n  right: 0;\n  width: 100%;\n  height: calc(100dvh - 90px);\n  overflow-y: scroll;\n  overflow-x: hidden;\n  z-index: 1000;\n  padding: 0 20px;\n  transition: all 0.3s ease;\n  transform: translateX(0);\n  background: ${({ theme }) => theme.colors.light};\n  -webkit-overflow-scrolling: touch;\n  opacity: 1;\n\n  &::-webkit-scrollbar {\n    display: none;\n  }\n\n  ${({ $isVisible }) =>\n    !$isVisible &&\n    css`\n      transform: translateX(100%);\n      opacity: 0;\n    `}\n\n  ${mq(\"lg\")} {\n    width: 420px;\n    border-left: solid 1px ${({ theme }) => theme.colors.grayLight};\n  }\n`;\n\nconst loadingAnimation = keyframes`\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n`;\n\nconst rotateGradient = keyframes`\n  0% {\n    --gradient-angle: 0deg;\n  }\n  100% {\n    --gradient-angle: 360deg;\n  }\n`;\n\nconst pulseGlow = keyframes`\n  0%, 100% {\n    opacity: 0.5;\n    filter: blur(16px);\n  }\n  50% {\n    opacity: 1;\n    filter: blur(22px);\n  }\n`;\n\nconst sparkleFloat = keyframes`\n  0%, 100% {\n    opacity: 0;\n    transform: translateY(0) scale(0);\n  }\n  50% {\n    opacity: 0.9;\n    transform: translateY(-20px) scale(1);\n  }\n`;\n\nconst shimmer = keyframes`\n  0% {\n    background-position: 0% center;\n  }\n  50% {\n    background-position: 100% center;\n  }\n  100% {\n    background-position: 0% center;\n  }\n`;\n\nconst StyledRainbowInputWrapper = styled.div<{\n  theme: Theme;\n  $isActive: boolean;\n}>`\n  @property --gradient-angle {\n    syntax: \"<angle>\";\n    initial-value: 0deg;\n    inherits: false;\n  }\n\n  position: relative;\n  flex: 1;\n\n  &::before {\n    content: \"\";\n    position: absolute;\n    inset: -2px;\n    border-radius: 14px;\n    background: conic-gradient(\n      from var(--gradient-angle),\n      #cc5555,\n      #d9a745,\n      #3ab0cc,\n      #cc7fc2,\n      #4380cc,\n      #4c1fa3,\n      #cc5555\n    );\n    opacity: 0;\n    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n    animation: ${rotateGradient} 3s linear infinite;\n    z-index: 0;\n  }\n\n  &::after {\n    content: \"\";\n    position: absolute;\n    inset: -10px;\n    border-radius: 20px;\n    background: conic-gradient(\n      from var(--gradient-angle),\n      #ff6b6b66,\n      #feca5766,\n      #48dbfb66,\n      #ff9ff366,\n      #54a0ff66,\n      #5f27cd66,\n      #ff6b6b66\n    );\n    opacity: 0;\n    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n    animation:\n      ${rotateGradient} 3s linear infinite,\n      ${pulseGlow} 2s ease-in-out infinite;\n    z-index: -1;\n    pointer-events: none;\n  }\n\n  &:hover::before,\n  &:focus-within::before {\n    opacity: 1;\n  }\n\n  &:hover::after,\n  &:focus-within::after {\n    opacity: 1;\n  }\n\n  ${({ $isActive }) =>\n    $isActive &&\n    css`\n      &::before {\n        opacity: 1;\n      }\n      &::after {\n        opacity: 1;\n      }\n    `}\n`;\n\nconst StyledSparkleContainer = styled.div<{ $isActive: boolean }>`\n  position: absolute;\n  inset: -30px;\n  pointer-events: none;\n  overflow: hidden;\n  border-radius: 30px;\n  z-index: -2;\n  opacity: 0;\n  transition: opacity 0.4s ease;\n\n  ${({ $isActive }) =>\n    $isActive &&\n    css`\n      opacity: 1;\n    `}\n`;\n\nconst StyledSparkle = styled.div<{\n  $color: string;\n  $left: number;\n  $top: number;\n  $delay: number;\n}>`\n  position: absolute;\n  width: 4px;\n  height: 4px;\n  border-radius: 50%;\n  background: ${({ $color }) => $color};\n  box-shadow: 0 0 6px ${({ $color }) => $color};\n  left: ${({ $left }) => $left}%;\n  top: ${({ $top }) => $top}%;\n  animation: ${sparkleFloat} 2s ease-in-out infinite;\n  animation-delay: ${({ $delay }) => $delay}s;\n`;\n\nconst StyledRainbowInput = styled.input<{ theme: Theme }>`\n  position: relative;\n  z-index: 1;\n  width: 100%;\n  background: ${({ theme }) => theme.colors.light};\n  border: 1px solid ${({ theme }) => theme.colors.grayLight};\n  border-radius: 12px;\n  padding: 12px 18px;\n  font-size: ${({ theme }) => theme.fontSizes.text.lg};\n  font-family: inherit;\n  color: ${({ theme }) => theme.colors.dark};\n  outline: none;\n  transition:\n    border-color 0.3s ease,\n    box-shadow 0.3s ease;\n\n  ${mq(\"lg\")} {\n    font-size: ${({ theme }) => theme.fontSizes.small.lg};\n  }\n\n  &::placeholder {\n    color: ${({ theme }) =>\n      `color-mix(in srgb, ${theme.colors.dark} 40%, transparent)`};\n    transition: color 0.3s ease;\n  }\n\n  &:focus::placeholder {\n    color: ${({ theme }) =>\n      `color-mix(in srgb, ${theme.colors.dark} 60%, transparent)`};\n  }\n\n  &:focus {\n    border-color: transparent;\n  }\n`;\n\nconst StyledRainbowButton = styled(Button)<{\n  theme: Theme;\n  $hasContent: boolean;\n}>`\n  padding-top: 10px;\n  padding-bottom: 10px;\n  position: relative;\n  overflow: hidden;\n  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;\n  color: ${({ theme }) => theme.colors.surface};\n\n  &::before {\n    content: \"\";\n    position: absolute;\n    inset: 0;\n    background: linear-gradient(\n      135deg,\n      #ff6b6b,\n      #feca57,\n      #48dbfb,\n      #ff9ff3,\n      #54a0ff\n    );\n    background-size: 300% 300%;\n    opacity: 0;\n    transition: opacity 0.3s ease;\n    z-index: 0;\n    animation: ${shimmer} 3s linear infinite;\n    width: 200%;\n  }\n\n  ${({ $hasContent }) =>\n    $hasContent &&\n    css`\n      &::before {\n        opacity: 1;\n      }\n    `}\n\n  &:hover::before {\n    opacity: 1;\n  }\n\n  &:hover {\n    transform: scale(1.05);\n  }\n\n  &:active {\n    transform: scale(0.95);\n  }\n\n  & svg {\n    position: relative;\n    z-index: 1;\n    transition: transform 0.3s ease;\n  }\n\n  &:disabled,\n  &:disabled:hover {\n    background: ${({ theme }) => theme.colors.primaryDark};\n    transform: none;\n    box-shadow: none;\n\n    &::before {\n      opacity: 0;\n    }\n  }\n`;\n\nconst StyledChatForm = styled.form<{ theme: Theme; $isVisible: boolean }>`\n  display: flex;\n  gap: 10px;\n  justify-content: center;\n  align-items: center;\n  background: ${({ theme }) => theme.colors.light};\n  padding: 20px;\n  position: fixed;\n  bottom: 0;\n  right: 0;\n  z-index: 1000;\n  width: 100%;\n  border-top: solid 1px ${({ theme }) => theme.colors.grayLight};\n  transition: all 0.3s ease;\n  transform: translateX(100%);\n  opacity: 0;\n\n  ${mq(\"lg\")} {\n    width: 420px;\n    border-left: solid 1px ${({ theme }) => theme.colors.grayLight};\n  }\n\n  ${({ $isVisible }) =>\n    $isVisible &&\n    css`\n      opacity: 1;\n      transform: translateX(0);\n    `}\n\n  & .loading {\n    animation: ${loadingAnimation} 1s linear infinite;\n  }\n`;\n\nconst StyledGlowSmallButton = styled(StyledSmallButton)<{\n  theme: Theme;\n  $hasContent: boolean;\n}>`\n  @property --gradient-angle {\n    syntax: \"<angle>\";\n    initial-value: 0deg;\n    inherits: false;\n  }\n\n  position: relative;\n  isolation: isolate;\n  margin-right: 0;\n  background: ${({ theme }) => theme.colors.light};\n  padding: 0;\n\n  &::before {\n    content: \"\";\n    inset: -2px;\n    border-radius: 8px;\n    background: conic-gradient(\n      from var(--gradient-angle),\n      #cc5555,\n      #d9a745,\n      #3ab0cc,\n      #cc7fc2,\n      #4380cc,\n      #4c1fa3,\n      #cc5555\n    );\n    opacity: 0;\n    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n    animation: ${rotateGradient} 3s linear infinite;\n    z-index: -1;\n    position: absolute;\n    top: -2px;\n    left: -2px;\n    width: calc(100% + 4px);\n    height: calc(100% + 4px);\n  }\n\n  &::after {\n    content: \"\";\n    position: absolute;\n    inset: -8px;\n    border-radius: 14px;\n    background: conic-gradient(\n      from var(--gradient-angle),\n      #ff6b6b66,\n      #feca5766,\n      #48dbfb66,\n      #ff9ff366,\n      #54a0ff66,\n      #5f27cd66,\n      #ff6b6b66\n    );\n    opacity: 0;\n    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n    animation:\n      ${rotateGradient} 3s linear infinite,\n      ${pulseGlow} 2s ease-in-out infinite;\n    z-index: -2;\n    pointer-events: none;\n  }\n\n  &:hover::before,\n  &:hover::after {\n    opacity: 1;\n  }\n\n  & span {\n    padding: 6px 8px;\n    display: flex;\n    background: ${({ theme }) => theme.colors.light};\n    border-radius: ${({ theme }) => theme.spacing.radius.xs};\n    gap: 6px;\n  }\n\n  ${({ $hasContent }) =>\n    $hasContent &&\n    css`\n      &::before {\n        opacity: 1;\n      }\n      &::after {\n        opacity: 1;\n      }\n    `}\n`;\n\nconst StyledError = styled.div<{ theme: Theme }>`\n  overflow-x: auto;\n  ${thinScrollbar};\n  background: ${({ theme }) => theme.colors.error};\n  color: ${({ theme }) => theme.colors.surface};\n  padding: 10px;\n  border-radius: 8px;\n  margin: 20px 0;\n  width: 100%;\n  ${styledText};\n`;\n\nconst loadingDotAnimation = keyframes`\n    0% {\n      opacity: 0;\n    }\n    50% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n    }\n`;\n\nconst StyledLoading = styled.div<{ theme: Theme }>`\n  overflow-x: auto;\n  ${thinScrollbar};\n  margin: 20px 0;\n  width: 100%;\n  font-weight: 600;\n  ${styledText};\n  color: ${({ theme }) => theme.colors.dark};\n\n  & span {\n    &:nth-child(1) {\n      animation: ${loadingDotAnimation} 1s ease infinite;\n    }\n    &:nth-child(2) {\n      animation: ${loadingDotAnimation} 1s ease infinite;\n      animation-delay: 0.2s;\n    }\n    &:nth-child(3) {\n      animation: ${loadingDotAnimation} 1s ease infinite;\n      animation-delay: 0.4s;\n    }\n  }\n`;\n\nconst StyledAnswer = styled.div<{ theme: Theme; $isAnswer: boolean }>`\n  overflow-x: auto;\n  ${thinScrollbar};\n  background: ${({ theme }) => theme.colors.primary};\n  color: ${({ theme }) => theme.colors.surface};\n  padding: 10px 15px;\n  border-radius: 18px;\n  margin: 20px 0 20px auto;\n  width: fit-content;\n  ${styledText};\n\n  & p {\n    ${styledText};\n  }\n\n  ${({ $isAnswer }) =>\n    $isAnswer &&\n    css`\n      background: transparent;\n      color: ${({ theme }) => theme.colors.dark};\n      padding: 0;\n      width: 100%;\n      max-width: 100%;\n      margin: 20px 0;\n      border-radius: 0;\n    `}\n\n  & code:not([class]) {\n    background: ${({ theme }) =>\n      `color-mix(in srgb, ${theme.colors.primaryLight} 20%, transparent)`};\n    color: ${({ theme }) => theme.colors.dark};\n    padding: 2px 4px;\n    border-radius: ${({ theme }) => theme.spacing.radius.xs};\n    white-space: pre;\n  }\n\n  ${styledAnchor};\n  ${stylesLists};\n  ${styledTable};\n\n  & pre,\n  & .hljs {\n    margin: 10px 0;\n  }\n\n  & .code-wrapper pre {\n    margin: 0;\n    ${styledText};\n  }\n\n  & > *:first-child {\n    margin-top: 0;\n  }\n\n  & > *:last-child {\n    margin-bottom: 0;\n\n    & > *:last-child {\n      margin-bottom: 0;\n    }\n  }\n\n  & ul,\n  & ol {\n    & li {\n      ${styledText};\n    }\n  }\n\n  & img,\n  & video,\n  & iframe {\n    max-width: 100%;\n    border-radius: ${({ theme }) => theme.spacing.radius.lg};\n    margin: 10px 0;\n    display: block;\n  }\n\n  & h1,\n  & h2,\n  & h3,\n  & h4,\n  & h5,\n  & h6 {\n    margin: 10px 0;\n    padding: 0;\n  }\n`;\n\nconst StyledSources = styled.div`\n  display: flex;\n  gap: 16px;\n  flex-wrap: wrap;\n  margin: -5px 0 20px;\n`;\n\nconst StyledSourceLink = styled(Link)<{ theme: Theme }>`\n  position: relative;\n  text-decoration: none;\n  font-size: ${({ theme }) => theme.fontSizes.small.lg};\n  line-height: 1;\n  color: ${({ theme }) => theme.colors.primary};\n  display: flex;\n  gap: 6px;\n  transition: all 0.3s ease;\n  font-weight: 600;\n  white-space: nowrap;\n  min-width: fit-content;\n  background: ${({ theme }) =>\n    `color-mix(in srgb, ${theme.colors.primaryLight} 10%, transparent)`};\n  padding: 6px 8px;\n  border-radius: ${({ theme }) => theme.spacing.radius.xs};\n  ${interactiveStyles};\n\n  & * {\n    margin: auto 0;\n  }\n\n  &:hover {\n    color: ${({ theme }) => theme.colors.accent};\n  }\n`;\n\nconst StyledChatTitle = styled.div<{ theme: Theme }>`\n  display: flex;\n  flex-wrap: nowrap;\n  justify-content: space-between;\n  position: sticky;\n  margin: 0 -20px;\n  padding: 16px 20px;\n  height: 62px;\n  top: 0;\n  background: ${({ theme }) => theme.colors.light};\n  border-bottom: solid 1px ${({ theme }) => theme.colors.grayLight};\n  z-index: 1000;\n`;\n\nconst StyledChatTitleIconWrapper = styled.span<{ theme: Theme }>`\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  color: ${({ theme }) => theme.colors.dark};\n`;\n\ntype Source = {\n  id: string;\n  path: string;\n  uri: string;\n  score: number;\n};\n\ntype Answer = {\n  text: string;\n  answer?: boolean;\n  mdx?: MDXRemoteSerializeResult;\n  sources?: Source[];\n};\n\nconst SPARKLE_COLORS = [\n  \"#ff6b6b\",\n  \"#feca57\",\n  \"#48dbfb\",\n  \"#ff9ff3\",\n  \"#54a0ff\",\n  \"#5f27cd\",\n];\n\n// Deterministic sparkle positions to avoid hydration mismatch\nconst SPARKLE_POSITIONS = [\n  { left: 8, top: 35 },\n  { left: 17, top: 55 },\n  { left: 26, top: 28 },\n  { left: 35, top: 68 },\n  { left: 44, top: 42 },\n  { left: 53, top: 75 },\n  { left: 62, top: 32 },\n  { left: 71, top: 58 },\n  { left: 80, top: 45 },\n  { left: 89, top: 65 },\n];\n\ninterface RainbowInputProps {\n  id?: string;\n  value: string;\n  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;\n  placeholder?: string;\n  autoComplete?: string;\n  \"aria-label\"?: string;\n  inputRef?: React.Ref<HTMLInputElement>;\n}\n\nfunction RainbowInput({\n  id,\n  value,\n  onChange,\n  placeholder,\n  autoComplete,\n  \"aria-label\": ariaLabel,\n  inputRef,\n}: RainbowInputProps) {\n  const [isFocused, setIsFocused] = useState(false);\n  const [isHovered, setIsHovered] = useState(false);\n  const isActive = isFocused || isHovered;\n\n  const sparkles = SPARKLE_POSITIONS.map((pos, i) => ({\n    color: SPARKLE_COLORS[i % SPARKLE_COLORS.length],\n    left: pos.left,\n    top: pos.top,\n    delay: i * 0.12,\n  }));\n\n  return (\n    <StyledRainbowInputWrapper\n      $isActive={isActive}\n      onMouseEnter={() => setIsHovered(true)}\n      onMouseLeave={() => setIsHovered(false)}\n    >\n      <StyledSparkleContainer $isActive={isActive}>\n        {sparkles.map((sparkle, i) => (\n          <StyledSparkle\n            key={i}\n            $color={sparkle.color}\n            $left={sparkle.left}\n            $top={sparkle.top}\n            $delay={sparkle.delay}\n          />\n        ))}\n      </StyledSparkleContainer>\n      <StyledRainbowInput\n        ref={inputRef}\n        id={id}\n        value={value}\n        onChange={onChange}\n        placeholder={placeholder}\n        autoComplete={autoComplete}\n        aria-label={ariaLabel}\n        onFocus={() => setIsFocused(true)}\n        onBlur={() => setIsFocused(false)}\n      />\n    </StyledRainbowInputWrapper>\n  );\n}\n\nfunction ChatButtonCTA() {\n  const { toggleChat, isOpen } = useContext(ChatContext);\n\n  return (\n    <StyledGlowSmallButton\n      onClick={toggleChat}\n      aria-label=\"Ask AI Assistant\"\n      $hasContent={isOpen}\n      type=\"button\"\n    >\n      <span>\n        <Sparkles size={16} />\n        Ask AI\n      </span>\n    </StyledGlowSmallButton>\n  );\n}\n\nfunction Chat() {\n  const {\n    isOpen,\n    question,\n    setQuestion,\n    loading,\n    error,\n    answer,\n    ask,\n    closeChat,\n    resetChat,\n    chatInputRef,\n  } = useContext(ChatContext);\n  const endRef = useRef<HTMLDivElement | null>(null);\n\n  useLockBodyScroll(isOpen);\n\n  useEffect(() => {\n    endRef.current?.scrollIntoView({ behavior: \"smooth\", block: \"end\" });\n  }, [answer]);\n\n  useEffect(() => {\n    if (answer?.length > 0) {\n      chatInputRef.current?.focus();\n    }\n  }, [answer, chatInputRef]);\n\n  return (\n    <>\n      <StyledChat $isVisible={isOpen}>\n        <StyledChatTitle>\n          <StyledChatTitleIconWrapper>\n            <Sparkles />\n            <h3>AI Assistant</h3>\n          </StyledChatTitleIconWrapper>\n          <StyledChatTitleIconWrapper>\n            <IconButton\n              onClick={resetChat}\n              aria-label=\"Reset chat history\"\n              title=\"Reset chat history\"\n            >\n              <RotateCcw />\n            </IconButton>\n            <IconButton\n              onClick={closeChat}\n              aria-label=\"Close chat\"\n              title=\"Close chat\"\n            >\n              <X />\n            </IconButton>\n          </StyledChatTitleIconWrapper>\n        </StyledChatTitle>\n        {answer &&\n          answer.map((a, i) => (\n            <React.Fragment key={i}>\n              <StyledAnswer $isAnswer={a.answer ?? false}>\n                {a.answer && a.mdx ? (\n                  <MDXRemote {...a.mdx} components={mdxComponents} />\n                ) : (\n                  a.text\n                )}\n              </StyledAnswer>\n              {a.answer && a.sources && a.sources.length > 0 && (\n                <StyledSources>\n                  {a.sources.map((src) => {\n                    const slug = src.uri\n                      .replace(\"docs://\", \"\")\n                      .replace(/^\\/+/, \"\");\n                    const href = slug ? `/${slug}/` : \"/\";\n                    const label = slug\n                      ? slug\n                          .split(\"/\")\n                          .pop()!\n                          .replace(/-/g, \" \")\n                          .replace(/\\b\\w/g, (c: string) => c.toUpperCase())\n                      : \"Home\";\n                    return (\n                      <StyledSourceLink\n                        key={src.id}\n                        href={href}\n                        onClick={() => {\n                          if (window.innerWidth <= 992) {\n                            closeChat();\n                          }\n                        }}\n                      >\n                        {label}\n                      </StyledSourceLink>\n                    );\n                  })}\n                </StyledSources>\n              )}\n            </React.Fragment>\n          ))}\n        {loading && !answer[answer.length - 1]?.answer && (\n          <StyledLoading>\n            Answering<span>.</span>\n            <span>.</span>\n            <span>.</span>\n          </StyledLoading>\n        )}\n        {error && (\n          <StyledError>\n            <strong>Error:</strong> {error}\n          </StyledError>\n        )}\n        <div ref={endRef} />\n      </StyledChat>\n\n      <StyledChatForm onSubmit={ask} $isVisible={isOpen}>\n        <RainbowInput\n          id=\"chat-bottom-input\"\n          inputRef={chatInputRef}\n          value={question}\n          onChange={(e) => setQuestion(e.target.value)}\n          placeholder=\"Ask AI Assistant...\"\n          autoComplete=\"off\"\n          aria-label=\"Ask a follow-up question\"\n        />\n        <StyledRainbowButton\n          type=\"submit\"\n          disabled={loading || question.trim() === \"\"}\n          $hasContent={question.trim().length > 0}\n          aria-label={loading ? \"Loading response\" : \"Submit question\"}\n        >\n          {loading ? <LoaderPinwheel className=\"loading\" /> : <ArrowUp />}\n        </StyledRainbowButton>\n      </StyledChatForm>\n    </>\n  );\n}\n\nconst ChatContext = createContext<{\n  isOpen: boolean;\n  setIsOpen: (isOpen: boolean) => void;\n  toggleChat: () => void;\n  isChatActive: boolean;\n  question: string;\n  setQuestion: (q: string) => void;\n  loading: boolean;\n  error: string | null;\n  answer: Answer[];\n  setAnswer: (answers: Answer[]) => void;\n  ask: (e: React.FormEvent) => void;\n  askAssistant: (question: string) => void;\n  closeChat: () => void;\n  resetChat: () => void;\n  chatInputRef: React.RefObject<HTMLInputElement | null>;\n}>({\n  isOpen: false,\n  setIsOpen: () => {},\n  toggleChat: () => {},\n  isChatActive: false,\n  question: \"\",\n  setQuestion: () => {},\n  loading: false,\n  error: null,\n  answer: [],\n  setAnswer: () => {},\n  ask: () => {},\n  askAssistant: () => {},\n  closeChat: () => {},\n  resetChat: () => {},\n  chatInputRef: { current: null },\n});\n\ninterface ChatContextProviderProps {\n  children: React.ReactNode;\n  isChatActive: boolean;\n}\n\nconst INITIAL_GREETING = \"Hey there, how can I assist you?\";\n\nconst ChtProvider = ({ children, isChatActive }: ChatContextProviderProps) => {\n  const [isOpen, setIsOpen] = useState(false);\n  const [question, setQuestion] = useState(\"\");\n  const [loading, setLoading] = useState(false);\n  const [error, setError] = useState<string | null>(null);\n  const [answer, setAnswer] = useState<Answer[]>([]);\n  const abortRef = useRef<AbortController | null>(null);\n  const chatInputRef = useRef<HTMLInputElement | null>(null);\n  const isOpenRef = useRef(isOpen);\n\n  useEffect(() => {\n    isOpenRef.current = isOpen;\n  }, [isOpen]);\n\n  // Open the assistant, seeding a greeting the first time and focusing the\n  // input once the panel has slid in (matches the 0.3s panel transition).\n  const openChat = useCallback(() => {\n    setIsOpen(true);\n    setAnswer((prev) =>\n      prev.length === 0 ? [{ text: INITIAL_GREETING, answer: true }] : prev,\n    );\n    setTimeout(() => {\n      chatInputRef.current?.focus();\n    }, 350);\n  }, []);\n\n  const toggleChat = useCallback(() => {\n    if (isOpenRef.current) {\n      setIsOpen(false);\n    } else {\n      openChat();\n    }\n  }, [openChat]);\n\n  // Global Cmd/Ctrl+I toggles the assistant, but only when chat is enabled.\n  useEffect(() => {\n    if (!isChatActive) return;\n    function handleKeyDown(e: KeyboardEvent) {\n      if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === \"i\") {\n        e.preventDefault();\n        toggleChat();\n      }\n    }\n    document.addEventListener(\"keydown\", handleKeyDown);\n    return () => document.removeEventListener(\"keydown\", handleKeyDown);\n  }, [isChatActive, toggleChat]);\n\n  async function runQuestion(currentQuestion: string) {\n    setQuestion(\"\");\n    setIsOpen(true);\n    setLoading(true);\n    setError(null);\n\n    const base =\n      answer.length > 0 ? answer : [{ text: INITIAL_GREETING, answer: true }];\n    const mergedQuestions = [...base, { text: currentQuestion, answer: false }];\n\n    setAnswer(mergedQuestions);\n\n    const controller = new AbortController();\n    abortRef.current = controller;\n\n    try {\n      const history = answer\n        .filter((a) => a.text.trim() !== \"\")\n        .map((a) => ({\n          role: a.answer ? (\"assistant\" as const) : (\"user\" as const),\n          content: a.text,\n        }));\n\n      const res = await fetch(\"/api/rag\", {\n        method: \"POST\",\n        headers: { \"Content-Type\": \"application/json\" },\n        body: JSON.stringify({ question: currentQuestion, history }),\n        signal: controller.signal,\n      });\n\n      if (!res.ok) {\n        // The body may be a proxy/gateway HTML error page (e.g. Cloudflare\n        // 524), not our JSON - never blindly JSON.parse it.\n        const contentType = res.headers.get(\"content-type\") || \"\";\n        let message = \"Request failed\";\n        if (contentType.includes(\"application/json\")) {\n          try {\n            const errorData = await res.json();\n            message = errorData.error || message;\n          } catch {\n            // Non-JSON despite the header - fall through to the default.\n          }\n        } else if ([502, 503, 504, 524].includes(res.status)) {\n          message = \"The assistant took too long to respond. Please try again.\";\n        }\n        throw new Error(message);\n      }\n\n      const reader = res.body?.getReader();\n      const decoder = new TextDecoder();\n      const contentParts: string[] = [];\n      let sources: Source[] = [];\n      if (!reader) {\n        throw new Error(\"Failed to get response reader\");\n      }\n\n      // Don't insert the answer bubble yet - an empty bubble renders a blank\n      // gap above the \"Answering...\" loader. The bubble is created on the first\n      // streamed token (or the done event) instead, so the loader stays put\n      // until real text appears.\n      const streamingAnswerIndex = mergedQuestions.length;\n\n      let buffer = \"\";\n      while (true) {\n        const { done, value } = await reader.read();\n        if (done) break;\n\n        buffer += decoder.decode(value, { stream: true });\n        const parts = buffer.split(\"\\n\");\n        buffer = parts.pop() ?? \"\";\n\n        for (const line of parts) {\n          if (line.startsWith(\"data: \")) {\n            try {\n              const data = JSON.parse(line.slice(6));\n\n              if (data.type === \"metadata\") {\n                const allSources: Source[] = data.data?.sources ?? [];\n                const seen = new Set<string>();\n                sources = allSources.filter((s: Source) => {\n                  if (s.score < 0.4 || seen.has(s.uri)) return false;\n                  seen.add(s.uri);\n                  return true;\n                });\n              } else if (data.type === \"content\") {\n                contentParts.push(data.data);\n                const streamedContent = contentParts.join(\"\");\n\n                setAnswer((prev) => {\n                  const newAnswers = [...prev];\n                  newAnswers[streamingAnswerIndex] = {\n                    text: streamedContent,\n                    answer: true,\n                    sources,\n                  };\n                  return newAnswers;\n                });\n              } else if (data.type === \"error\") {\n                throw new Error(data.data);\n              } else if (data.type === \"done\") {\n                const streamedContent = contentParts.join(\"\");\n                let mdxSource: MDXRemoteSerializeResult | null = null;\n                try {\n                  mdxSource = await serialize(streamedContent, {\n                    parseFrontmatter: false,\n                    mdxOptions: {\n                      remarkPlugins: [remarkGfm],\n                      rehypePlugins: [rehypeHighlight],\n                      format: \"md\",\n                      development: false,\n                    },\n                  });\n                } catch (mdxError: unknown) {\n                  console.error(\"MDX serialization error:\", mdxError);\n                }\n\n                setAnswer((prev) => {\n                  const newAnswers = [...prev];\n                  newAnswers[streamingAnswerIndex] = {\n                    text: streamedContent,\n                    answer: true,\n                    mdx: mdxSource || undefined,\n                    sources,\n                  };\n                  return newAnswers;\n                });\n              }\n            } catch (parseError) {\n              if (\n                parseError instanceof Error &&\n                parseError.message !== \"Unknown error\"\n              ) {\n                console.error(\"Failed to parse SSE data:\", parseError);\n              }\n            }\n          }\n        }\n      }\n    } catch (err: unknown) {\n      if (err instanceof DOMException && err.name === \"AbortError\") return;\n      setError(err instanceof Error ? err.message : \"Unknown error\");\n    } finally {\n      abortRef.current = null;\n      setLoading(false);\n    }\n  }\n\n  async function ask(e: React.FormEvent) {\n    e.preventDefault();\n    if (loading || question.trim() === \"\") return;\n    await runQuestion(question);\n  }\n\n  // Bridge from the search modal: hand the typed query to the assistant. If a\n  // response is already streaming (loading), we can't submit yet - open the\n  // panel and pre-fill the input so the user can send it the moment the\n  // current answer finishes. Otherwise submit it right away.\n  function askAssistant(rawQuestion: string) {\n    const trimmed = rawQuestion.trim();\n    if (trimmed === \"\") return;\n    if (loading) {\n      openChat();\n      setQuestion(trimmed);\n    } else {\n      void runQuestion(trimmed);\n    }\n  }\n\n  function closeChat() {\n    setIsOpen(false);\n  }\n\n  function resetChat() {\n    abortRef.current?.abort();\n    setLoading(false);\n    setError(null);\n    setAnswer([{ text: INITIAL_GREETING, answer: true }]);\n  }\n\n  return (\n    <ChatContext.Provider\n      value={{\n        isOpen,\n        setIsOpen,\n        toggleChat,\n        isChatActive,\n        question,\n        setQuestion,\n        loading,\n        error,\n        answer,\n        setAnswer,\n        ask,\n        askAssistant,\n        closeChat,\n        resetChat,\n        chatInputRef,\n      }}\n    >\n      {children}\n    </ChatContext.Provider>\n  );\n};\n\nexport { Chat, ChtProvider, ChatContext, ChatButtonCTA };\n";

package/dist/templates/components/Chat.js

@@ -873,7 +873,7 @@ function Chat() {
               )}
             </React.Fragment>
           ))}
-        {loading && (
+        {loading && !answer[answer.length - 1]?.answer && (
           <StyledLoading>
             Answering<span>.</span>
             <span>.</span>
@@ -923,6 +923,7 @@ const ChatContext = createContext<{
   answer: Answer[];
   setAnswer: (answers: Answer[]) => void;
   ask: (e: React.FormEvent) => void;
+  askAssistant: (question: string) => void;
   closeChat: () => void;
   resetChat: () => void;
   chatInputRef: React.RefObject<HTMLInputElement | null>;
@@ -938,6 +939,7 @@ const ChatContext = createContext<{
   answer: [],
   setAnswer: () => {},
   ask: () => {},
+  askAssistant: () => {},
   closeChat: () => {},
   resetChat: () => {},
   chatInputRef: { current: null },
@@ -948,6 +950,8 @@ interface ChatContextProviderProps {
   isChatActive: boolean;
 }
 
+const INITIAL_GREETING = "Hey there, how can I assist you?";
+
 const ChtProvider = ({ children, isChatActive }: ChatContextProviderProps) => {
   const [isOpen, setIsOpen] = useState(false);
   const [question, setQuestion] = useState("");
@@ -967,9 +971,7 @@ const ChtProvider = ({ children, isChatActive }: ChatContextProviderProps) => {
   const openChat = useCallback(() => {
     setIsOpen(true);
     setAnswer((prev) =>
-      prev.length === 0
-        ? [{ text: "Hey there, how can I assist you?", answer: true }]
-        : prev,
+      prev.length === 0 ? [{ text: INITIAL_GREETING, answer: true }] : prev,
     );
     setTimeout(() => {
       chatInputRef.current?.focus();
@@ -997,19 +999,15 @@ const ChtProvider = ({ children, isChatActive }: ChatContextProviderProps) => {
     return () => document.removeEventListener("keydown", handleKeyDown);
   }, [isChatActive, toggleChat]);
 
-  async function ask(e: React.FormEvent) {
-    e.preventDefault();
-    if (loading || question.trim() === "") return;
-    const currentQuestion = question;
+  async function runQuestion(currentQuestion: string) {
     setQuestion("");
     setIsOpen(true);
     setLoading(true);
     setError(null);
 
-    const mergedQuestions =
-      answer.length > 0
-        ? [...answer, { text: currentQuestion, answer: false }]
-        : [{ text: currentQuestion, answer: false }];
+    const base =
+      answer.length > 0 ? answer : [{ text: INITIAL_GREETING, answer: true }];
+    const mergedQuestions = [...base, { text: currentQuestion, answer: false }];
 
     setAnswer(mergedQuestions);
 
@@ -1057,8 +1055,11 @@ const ChtProvider = ({ children, isChatActive }: ChatContextProviderProps) => {
         throw new Error("Failed to get response reader");
       }
 
+      // Don't insert the answer bubble yet - an empty bubble renders a blank
+      // gap above the "Answering..." loader. The bubble is created on the first
+      // streamed token (or the done event) instead, so the loader stays put
+      // until real text appears.
       const streamingAnswerIndex = mergedQuestions.length;
-      setAnswer([...mergedQuestions, { text: "", answer: true }]);
 
       let buffer = "";
       while (true) {
@@ -1145,6 +1146,27 @@ const ChtProvider = ({ children, isChatActive }: ChatContextProviderProps) => {
     }
   }
 
+  async function ask(e: React.FormEvent) {
+    e.preventDefault();
+    if (loading || question.trim() === "") return;
+    await runQuestion(question);
+  }
+
+  // Bridge from the search modal: hand the typed query to the assistant. If a
+  // response is already streaming (loading), we can't submit yet - open the
+  // panel and pre-fill the input so the user can send it the moment the
+  // current answer finishes. Otherwise submit it right away.
+  function askAssistant(rawQuestion: string) {
+    const trimmed = rawQuestion.trim();
+    if (trimmed === "") return;
+    if (loading) {
+      openChat();
+      setQuestion(trimmed);
+    } else {
+      void runQuestion(trimmed);
+    }
+  }
+
   function closeChat() {
     setIsOpen(false);
   }
@@ -1153,7 +1175,7 @@ const ChtProvider = ({ children, isChatActive }: ChatContextProviderProps) => {
     abortRef.current?.abort();
     setLoading(false);
     setError(null);
-    setAnswer([{ text: "Hey there, how can I assist you?", answer: true }]);
+    setAnswer([{ text: INITIAL_GREETING, answer: true }]);
   }
 
   return (
@@ -1170,6 +1192,7 @@ const ChtProvider = ({ children, isChatActive }: ChatContextProviderProps) => {
         answer,
         setAnswer,
         ask,
+        askAssistant,
         closeChat,
         resetChat,
         chatInputRef,

package/dist/templates/components/SearchDocs.d.ts

@@ -1 +1 @@
-export declare const searchDocsTemplate = "\"use client\";\nimport React, {\n  createContext,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { useRouter } from \"next/navigation\";\nimport dynamic from \"next/dynamic\";\nimport styled from \"styled-components\";\nimport { mq, Theme } from \"@/app/theme\";\nimport { interactiveStyles } from \"@/components/layout/SharedStyled\";\nimport type { PageItem, MergedResult } from \"@/components/SearchModalContent\";\n\nconst SearchModalContent = dynamic(\n  () =>\n    import(\"@/components/SearchModalContent\").then(\n      (mod) => mod.SearchModalContent,\n    ),\n  { ssr: false },\n);\n\ninterface SectionItem {\n  label: string;\n  slug: string;\n}\n\n// Stable empty array so the derived contentResults keeps the same identity\n// across renders when there are no hits (memo deps stay stable).\nconst EMPTY_RESULTS: ContentHit[] = [];\n\ninterface ContentHit {\n  slug: string;\n  snippet: string;\n}\n\ninterface SearchContextValue {\n  openSearch: () => void;\n}\n\nconst SearchContext = createContext<SearchContextValue>({\n  openSearch: () => {},\n});\n\nconst StyledKbd = styled.kbd<{ theme: Theme }>`\n  font-size: 11px;\n  font-family: inherit;\n  background: ${({ theme }) => theme.colors.grayLight};\n  color: ${({ theme }) => theme.colors.grayDark};\n  padding: 2px 6px;\n  border-radius: 4px;\n  margin-left: auto;\n  font-weight: 600;\n  display: none;\n\n  ${mq(\"lg\")} {\n    display: initial;\n  }\n`;\n\nconst StyledSearchButton = styled.button<{ theme: Theme }>`\n  ${interactiveStyles};\n  border: solid 1px ${({ theme }) => theme.colors.grayLight};\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  background: ${({ theme }) => theme.colors.light};\n  color: ${({ theme }) => theme.colors.primary};\n  border-radius: ${({ theme }) => theme.spacing.radius.xs};\n  padding: 7px 8px;\n  font-family: inherit;\n  cursor: pointer;\n\n  ${mq(\"lg\")} {\n    padding: 5px 8px;\n  }\n\n  & svg.lucide {\n    color: inherit;\n  }\n`;\n\nfunction SearchProvider({\n  pages,\n  sections,\n  children,\n}: {\n  pages: PageItem[];\n  sections?: SectionItem[];\n  children: React.ReactNode;\n}) {\n  const [isVisible, setIsVisible] = useState(false);\n  const [isClosing, setIsClosing] = useState(false);\n  const [query, setQuery] = useState(\"\");\n  const [activeIndex, setActiveIndex] = useState(0);\n  // Latest completed content search, keyed by the query that produced it.\n  // contentResults and isSearching are derived from it at render time, so\n  // the debounced-search effect never sets state synchronously (which would\n  // trigger cascading renders \u2014 react-hooks/set-state-in-effect).\n  const [fetched, setFetched] = useState<{\n    q: string;\n    results: ContentHit[];\n  } | null>(null);\n  const resultsRef = useRef<HTMLUListElement>(null);\n  const closingRef = useRef(false);\n  const abortRef = useRef<AbortController | null>(null);\n  const debounceRef = useRef<ReturnType<typeof setTimeout>>(null);\n  const router = useRouter();\n\n  const sectionLabels = useMemo(() => {\n    const map: Record<string, string> = {};\n    sections?.forEach((s) => {\n      map[s.slug] = s.label;\n    });\n    return map;\n  }, [sections]);\n\n  const openSearch = useCallback(() => {\n    closingRef.current = false;\n    setIsClosing(false);\n    setIsVisible(true);\n  }, []);\n\n  const closeSearch = useCallback(() => {\n    closingRef.current = true;\n    setIsClosing(true);\n    if (abortRef.current) abortRef.current.abort();\n    if (debounceRef.current) clearTimeout(debounceRef.current);\n  }, []);\n\n  const handleCloseAnimationEnd = useCallback(() => {\n    if (!closingRef.current) return;\n    closingRef.current = false;\n    setIsVisible(false);\n    setIsClosing(false);\n    setQuery(\"\");\n    setActiveIndex(0);\n    setFetched(null);\n  }, []);\n\n  const trimmedQuery = query.trim();\n  const contentResults =\n    trimmedQuery.length >= 2 && fetched?.q === trimmedQuery\n      ? fetched.results\n      : EMPTY_RESULTS;\n  const isSearching = trimmedQuery.length >= 2 && fetched?.q !== trimmedQuery;\n\n  // Instant title/description filtering\n  const titleFiltered = useMemo(() => {\n    if (!query.trim()) return pages;\n    const q = query.toLowerCase();\n    return pages.filter(\n      (p) =>\n        p.title.toLowerCase().includes(q) ||\n        p.description?.toLowerCase().includes(q),\n    );\n  }, [pages, query]);\n\n  // Merge title matches with content matches\n  const merged = useMemo<MergedResult[]>(() => {\n    if (!query.trim()) {\n      return pages.map((p) => ({ page: p }));\n    }\n\n    const titleMatchSlugs = new Set(titleFiltered.map((p) => p.slug));\n    const titleMatches: MergedResult[] = titleFiltered.map((p) => {\n      const hit = contentResults.find((cr) => cr.slug === p.slug);\n      return { page: p, snippet: hit?.snippet };\n    });\n\n    const pageMap = new Map(pages.map((p) => [p.slug, p]));\n    const contentOnly: MergedResult[] = [];\n    for (const cr of contentResults) {\n      if (!titleMatchSlugs.has(cr.slug)) {\n        const page = pageMap.get(cr.slug);\n        if (page) {\n          contentOnly.push({ page, snippet: cr.snippet });\n        }\n      }\n    }\n\n    return [...titleMatches, ...contentOnly];\n  }, [pages, query, titleFiltered, contentResults]);\n\n  // Debounced content search. State updates happen only inside the timeout's\n  // async callback; short queries need no reset because the derived values\n  // above ignore results whose query no longer matches.\n  useEffect(() => {\n    if (debounceRef.current) clearTimeout(debounceRef.current);\n    if (abortRef.current) abortRef.current.abort();\n\n    const q = query.trim();\n    if (q.length < 2) return;\n\n    debounceRef.current = setTimeout(async () => {\n      const controller = new AbortController();\n      abortRef.current = controller;\n      try {\n        const res = await fetch(\n          `/api/search?q=${encodeURIComponent(q)}&limit=15`,\n          { signal: controller.signal },\n        );\n        if (!res.ok) throw new Error(\"Search failed\");\n        const data = await res.json();\n        setFetched({ q, results: data.results ?? [] });\n      } catch (err: unknown) {\n        if (err instanceof DOMException && err.name === \"AbortError\") return;\n        setFetched({ q, results: [] });\n      }\n    }, 300);\n\n    return () => {\n      if (debounceRef.current) clearTimeout(debounceRef.current);\n    };\n  }, [query]);\n\n  const navigate = useCallback(\n    (slug: string) => {\n      closeSearch();\n      router.push(`/${slug}`);\n    },\n    [closeSearch, router],\n  );\n\n  // Global Cmd+K / Ctrl+K listener\n  const isVisibleRef = useRef(false);\n\n  useEffect(() => {\n    isVisibleRef.current = isVisible;\n  }, [isVisible]);\n\n  useEffect(() => {\n    function handleKeyDown(e: KeyboardEvent) {\n      if ((e.metaKey || e.ctrlKey) && e.key === \"k\") {\n        e.preventDefault();\n        if (isVisibleRef.current) {\n          closeSearch();\n        } else {\n          openSearch();\n        }\n      }\n    }\n    document.addEventListener(\"keydown\", handleKeyDown);\n    return () => document.removeEventListener(\"keydown\", handleKeyDown);\n  }, [closeSearch, openSearch]);\n\n  // Scroll active item into view\n  useEffect(() => {\n    if (!resultsRef.current) return;\n    const active = resultsRef.current.children[activeIndex] as HTMLElement;\n    active?.scrollIntoView({ block: \"nearest\" });\n  }, [activeIndex]);\n\n  function handleKeyDown(e: React.KeyboardEvent) {\n    if (e.key === \"ArrowDown\") {\n      e.preventDefault();\n      setActiveIndex((i) => (i < merged.length - 1 ? i + 1 : 0));\n    } else if (e.key === \"ArrowUp\") {\n      e.preventDefault();\n      setActiveIndex((i) => (i > 0 ? i - 1 : merged.length - 1));\n    } else if (e.key === \"Enter\") {\n      e.preventDefault();\n      if (merged[activeIndex]) {\n        navigate(merged[activeIndex].page.slug);\n      }\n    } else if (e.key === \"Escape\") {\n      closeSearch();\n    }\n  }\n\n  return (\n    <SearchContext.Provider value={{ openSearch }}>\n      {children}\n      {isVisible && (\n        <SearchModalContent\n          isClosing={isClosing}\n          closeSearch={closeSearch}\n          onCloseAnimationEnd={handleCloseAnimationEnd}\n          query={query}\n          setQuery={setQuery}\n          activeIndex={activeIndex}\n          setActiveIndex={setActiveIndex}\n          resultsRef={resultsRef}\n          onKeyDown={handleKeyDown}\n          merged={merged}\n          sectionLabels={sectionLabels}\n          isSearching={isSearching}\n          navigate={navigate}\n        />\n      )}\n    </SearchContext.Provider>\n  );\n}\n\nexport {\n  SearchProvider,\n  SearchContext,\n  StyledKbd as SearchKbd,\n  StyledSearchButton,\n};\n";
+export declare const searchDocsTemplate = "\"use client\";\nimport React, {\n  createContext,\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { useRouter } from \"next/navigation\";\nimport dynamic from \"next/dynamic\";\nimport styled from \"styled-components\";\nimport { mq, Theme } from \"@/app/theme\";\nimport { interactiveStyles } from \"@/components/layout/SharedStyled\";\nimport { ChatContext } from \"@/components/Chat\";\nimport type { PageItem, MergedResult } from \"@/components/SearchModalContent\";\n\nconst SearchModalContent = dynamic(\n  () =>\n    import(\"@/components/SearchModalContent\").then(\n      (mod) => mod.SearchModalContent,\n    ),\n  { ssr: false },\n);\n\ninterface SectionItem {\n  label: string;\n  slug: string;\n}\n\n// Stable empty array so the derived contentResults keeps the same identity\n// across renders when there are no hits (memo deps stay stable).\nconst EMPTY_RESULTS: ContentHit[] = [];\n\ninterface ContentHit {\n  slug: string;\n  snippet: string;\n}\n\ninterface SearchContextValue {\n  openSearch: () => void;\n}\n\nconst SearchContext = createContext<SearchContextValue>({\n  openSearch: () => {},\n});\n\nconst StyledKbd = styled.kbd<{ theme: Theme }>`\n  font-size: 11px;\n  font-family: inherit;\n  background: ${({ theme }) => theme.colors.grayLight};\n  color: ${({ theme }) => theme.colors.grayDark};\n  padding: 2px 6px;\n  border-radius: 4px;\n  margin-left: auto;\n  font-weight: 600;\n  display: none;\n\n  ${mq(\"lg\")} {\n    display: initial;\n  }\n`;\n\nconst StyledSearchButton = styled.button<{ theme: Theme }>`\n  ${interactiveStyles};\n  border: solid 1px ${({ theme }) => theme.colors.grayLight};\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  background: ${({ theme }) => theme.colors.light};\n  color: ${({ theme }) => theme.colors.primary};\n  border-radius: ${({ theme }) => theme.spacing.radius.xs};\n  padding: 7px 8px;\n  font-family: inherit;\n  cursor: pointer;\n\n  ${mq(\"lg\")} {\n    padding: 5px 8px;\n  }\n\n  & svg.lucide {\n    color: inherit;\n  }\n`;\n\nfunction SearchProvider({\n  pages,\n  sections,\n  children,\n}: {\n  pages: PageItem[];\n  sections?: SectionItem[];\n  children: React.ReactNode;\n}) {\n  const [isVisible, setIsVisible] = useState(false);\n  const [isClosing, setIsClosing] = useState(false);\n  const [query, setQuery] = useState(\"\");\n  const [activeIndex, setActiveIndex] = useState(0);\n  // Latest completed content search, keyed by the query that produced it.\n  // contentResults and isSearching are derived from it at render time, so\n  // the debounced-search effect never sets state synchronously (which would\n  // trigger cascading renders \u2014 react-hooks/set-state-in-effect).\n  const [fetched, setFetched] = useState<{\n    q: string;\n    results: ContentHit[];\n  } | null>(null);\n  const resultsRef = useRef<HTMLUListElement>(null);\n  const closingRef = useRef(false);\n  const abortRef = useRef<AbortController | null>(null);\n  const debounceRef = useRef<ReturnType<typeof setTimeout>>(null);\n  const router = useRouter();\n  const { isChatActive, askAssistant } = useContext(ChatContext);\n\n  const sectionLabels = useMemo(() => {\n    const map: Record<string, string> = {};\n    sections?.forEach((s) => {\n      map[s.slug] = s.label;\n    });\n    return map;\n  }, [sections]);\n\n  const openSearch = useCallback(() => {\n    closingRef.current = false;\n    setIsClosing(false);\n    setIsVisible(true);\n  }, []);\n\n  const closeSearch = useCallback(() => {\n    closingRef.current = true;\n    setIsClosing(true);\n    if (abortRef.current) abortRef.current.abort();\n    if (debounceRef.current) clearTimeout(debounceRef.current);\n  }, []);\n\n  const handleCloseAnimationEnd = useCallback(() => {\n    if (!closingRef.current) return;\n    closingRef.current = false;\n    setIsVisible(false);\n    setIsClosing(false);\n    setQuery(\"\");\n    setActiveIndex(0);\n    setFetched(null);\n  }, []);\n\n  const trimmedQuery = query.trim();\n  const contentResults =\n    trimmedQuery.length >= 2 && fetched?.q === trimmedQuery\n      ? fetched.results\n      : EMPTY_RESULTS;\n  const isSearching = trimmedQuery.length >= 2 && fetched?.q !== trimmedQuery;\n\n  // Instant title/description filtering\n  const titleFiltered = useMemo(() => {\n    if (!query.trim()) return pages;\n    const q = query.toLowerCase();\n    return pages.filter(\n      (p) =>\n        p.title.toLowerCase().includes(q) ||\n        p.description?.toLowerCase().includes(q),\n    );\n  }, [pages, query]);\n\n  // Merge title matches with content matches\n  const merged = useMemo<MergedResult[]>(() => {\n    if (!query.trim()) {\n      return pages.map((p) => ({ page: p }));\n    }\n\n    const titleMatchSlugs = new Set(titleFiltered.map((p) => p.slug));\n    const titleMatches: MergedResult[] = titleFiltered.map((p) => {\n      const hit = contentResults.find((cr) => cr.slug === p.slug);\n      return { page: p, snippet: hit?.snippet };\n    });\n\n    const pageMap = new Map(pages.map((p) => [p.slug, p]));\n    const contentOnly: MergedResult[] = [];\n    for (const cr of contentResults) {\n      if (!titleMatchSlugs.has(cr.slug)) {\n        const page = pageMap.get(cr.slug);\n        if (page) {\n          contentOnly.push({ page, snippet: cr.snippet });\n        }\n      }\n    }\n\n    return [...titleMatches, ...contentOnly];\n  }, [pages, query, titleFiltered, contentResults]);\n\n  // Debounced content search. State updates happen only inside the timeout's\n  // async callback; short queries need no reset because the derived values\n  // above ignore results whose query no longer matches.\n  useEffect(() => {\n    if (debounceRef.current) clearTimeout(debounceRef.current);\n    if (abortRef.current) abortRef.current.abort();\n\n    const q = query.trim();\n    if (q.length < 2) return;\n\n    debounceRef.current = setTimeout(async () => {\n      const controller = new AbortController();\n      abortRef.current = controller;\n      try {\n        const res = await fetch(\n          `/api/search?q=${encodeURIComponent(q)}&limit=15`,\n          { signal: controller.signal },\n        );\n        if (!res.ok) throw new Error(\"Search failed\");\n        const data = await res.json();\n        setFetched({ q, results: data.results ?? [] });\n      } catch (err: unknown) {\n        if (err instanceof DOMException && err.name === \"AbortError\") return;\n        setFetched({ q, results: [] });\n      }\n    }, 300);\n\n    return () => {\n      if (debounceRef.current) clearTimeout(debounceRef.current);\n    };\n  }, [query]);\n\n  const navigate = useCallback(\n    (\n      slug: string,\n      modifiers?: { metaKey?: boolean; ctrlKey?: boolean; shiftKey?: boolean },\n    ) => {\n      const url = `/${slug}`;\n\n      // Shift+Enter / Shift+Click: open in a separate browser window. Window\n      // features (dimensions) are what make the browser spawn a window instead\n      // of a tab; noopener/noreferrer keep the new window from reaching back\n      // into this one via window.opener.\n      if (modifiers?.shiftKey) {\n        const width = Math.min(1024, window.screen.availWidth);\n        const height = Math.min(800, window.screen.availHeight);\n        const left = Math.round((window.screen.availWidth - width) / 2);\n        const top = Math.round((window.screen.availHeight - height) / 2);\n        window.open(\n          url,\n          \"_blank\",\n          `popup=yes,noopener,noreferrer,width=${width},height=${height},left=${left},top=${top}`,\n        );\n        return;\n      }\n\n      // Cmd+Enter / Ctrl+Enter / Cmd+Click: open in a new background tab. With\n      // no dimension features the browser keeps this as a tab.\n      if (modifiers?.metaKey || modifiers?.ctrlKey) {\n        window.open(url, \"_blank\", \"noopener,noreferrer\");\n        return;\n      }\n\n      // Plain Enter / Click: navigate in place within the app.\n      closeSearch();\n      router.push(url);\n    },\n    [closeSearch, router],\n  );\n\n  // Hand the current query to the AI assistant, then dismiss the search modal.\n  // `askAssistant` opens the chat and either submits the question or (if a\n  // response is already streaming) pre-fills it, ready to send.\n  const askAssistantWithQuery = useCallback(() => {\n    const q = query.trim();\n    if (!q) return;\n    askAssistant(q);\n    closeSearch();\n  }, [query, askAssistant, closeSearch]);\n\n  // Global Cmd+K / Ctrl+K listener\n  const isVisibleRef = useRef(false);\n\n  useEffect(() => {\n    isVisibleRef.current = isVisible;\n  }, [isVisible]);\n\n  useEffect(() => {\n    function handleKeyDown(e: KeyboardEvent) {\n      if ((e.metaKey || e.ctrlKey) && e.key === \"k\") {\n        e.preventDefault();\n        if (isVisibleRef.current) {\n          closeSearch();\n        } else {\n          openSearch();\n        }\n      }\n    }\n    document.addEventListener(\"keydown\", handleKeyDown);\n    return () => document.removeEventListener(\"keydown\", handleKeyDown);\n  }, [closeSearch, openSearch]);\n\n  // Active-row scrolling now lives in SearchModalContent's layout effect,\n  // alongside the highlight measurement, so highlight + scroll update together\n  // before paint (no flicker) and stay in sync on query changes.\n\n  function handleKeyDown(e: React.KeyboardEvent) {\n    if (e.key === \"ArrowDown\") {\n      e.preventDefault();\n      setActiveIndex((i) => (i < merged.length - 1 ? i + 1 : 0));\n    } else if (e.key === \"ArrowUp\") {\n      e.preventDefault();\n      setActiveIndex((i) => (i > 0 ? i - 1 : merged.length - 1));\n    } else if (e.key === \"Enter\") {\n      e.preventDefault();\n      // Option/Alt+Enter is reserved for handing the query to the AI assistant.\n      if (e.altKey) {\n        if (isChatActive) askAssistantWithQuery();\n        return;\n      }\n      if (merged[activeIndex]) {\n        navigate(merged[activeIndex].page.slug, e);\n      }\n    } else if (e.key === \"Escape\") {\n      closeSearch();\n    }\n  }\n\n  return (\n    <SearchContext.Provider value={{ openSearch }}>\n      {children}\n      {isVisible && (\n        <SearchModalContent\n          isClosing={isClosing}\n          closeSearch={closeSearch}\n          onCloseAnimationEnd={handleCloseAnimationEnd}\n          query={query}\n          setQuery={setQuery}\n          activeIndex={activeIndex}\n          setActiveIndex={setActiveIndex}\n          resultsRef={resultsRef}\n          onKeyDown={handleKeyDown}\n          merged={merged}\n          sectionLabels={sectionLabels}\n          isSearching={isSearching}\n          navigate={navigate}\n          canAskAssistant={isChatActive}\n          onAskAssistant={askAssistantWithQuery}\n        />\n      )}\n    </SearchContext.Provider>\n  );\n}\n\nexport {\n  SearchProvider,\n  SearchContext,\n  StyledKbd as SearchKbd,\n  StyledSearchButton,\n};\n";

package/dist/templates/components/SearchDocs.js

@@ -2,6 +2,7 @@ export const searchDocsTemplate = `"use client";
 import React, {
   createContext,
   useCallback,
+  useContext,
   useEffect,
   useMemo,
   useRef,
@@ -12,6 +13,7 @@ import dynamic from "next/dynamic";
 import styled from "styled-components";
 import { mq, Theme } from "@/app/theme";
 import { interactiveStyles } from "@/components/layout/SharedStyled";
+import { ChatContext } from "@/components/Chat";
 import type { PageItem, MergedResult } from "@/components/SearchModalContent";
 
 const SearchModalContent = dynamic(
@@ -108,6 +110,7 @@ function SearchProvider({
   const abortRef = useRef<AbortController | null>(null);
   const debounceRef = useRef<ReturnType<typeof setTimeout>>(null);
   const router = useRouter();
+  const { isChatActive, askAssistant } = useContext(ChatContext);
 
   const sectionLabels = useMemo(() => {
     const map: Record<string, string> = {};
@@ -217,13 +220,53 @@ function SearchProvider({
   }, [query]);
 
   const navigate = useCallback(
-    (slug: string) => {
+    (
+      slug: string,
+      modifiers?: { metaKey?: boolean; ctrlKey?: boolean; shiftKey?: boolean },
+    ) => {
+      const url = \`/\${slug}\`;
+
+      // Shift+Enter / Shift+Click: open in a separate browser window. Window
+      // features (dimensions) are what make the browser spawn a window instead
+      // of a tab; noopener/noreferrer keep the new window from reaching back
+      // into this one via window.opener.
+      if (modifiers?.shiftKey) {
+        const width = Math.min(1024, window.screen.availWidth);
+        const height = Math.min(800, window.screen.availHeight);
+        const left = Math.round((window.screen.availWidth - width) / 2);
+        const top = Math.round((window.screen.availHeight - height) / 2);
+        window.open(
+          url,
+          "_blank",
+          \`popup=yes,noopener,noreferrer,width=\${width},height=\${height},left=\${left},top=\${top}\`,
+        );
+        return;
+      }
+
+      // Cmd+Enter / Ctrl+Enter / Cmd+Click: open in a new background tab. With
+      // no dimension features the browser keeps this as a tab.
+      if (modifiers?.metaKey || modifiers?.ctrlKey) {
+        window.open(url, "_blank", "noopener,noreferrer");
+        return;
+      }
+
+      // Plain Enter / Click: navigate in place within the app.
       closeSearch();
-      router.push(\`/\${slug}\`);
+      router.push(url);
     },
     [closeSearch, router],
   );
 
+  // Hand the current query to the AI assistant, then dismiss the search modal.
+  // \`askAssistant\` opens the chat and either submits the question or (if a
+  // response is already streaming) pre-fills it, ready to send.
+  const askAssistantWithQuery = useCallback(() => {
+    const q = query.trim();
+    if (!q) return;
+    askAssistant(q);
+    closeSearch();
+  }, [query, askAssistant, closeSearch]);
+
   // Global Cmd+K / Ctrl+K listener
   const isVisibleRef = useRef(false);
 
@@ -246,12 +289,9 @@ function SearchProvider({
     return () => document.removeEventListener("keydown", handleKeyDown);
   }, [closeSearch, openSearch]);
 
-  // Scroll active item into view
-  useEffect(() => {
-    if (!resultsRef.current) return;
-    const active = resultsRef.current.children[activeIndex] as HTMLElement;
-    active?.scrollIntoView({ block: "nearest" });
-  }, [activeIndex]);
+  // Active-row scrolling now lives in SearchModalContent's layout effect,
+  // alongside the highlight measurement, so highlight + scroll update together
+  // before paint (no flicker) and stay in sync on query changes.
 
   function handleKeyDown(e: React.KeyboardEvent) {
     if (e.key === "ArrowDown") {
@@ -262,8 +302,13 @@ function SearchProvider({
       setActiveIndex((i) => (i > 0 ? i - 1 : merged.length - 1));
     } else if (e.key === "Enter") {
       e.preventDefault();
+      // Option/Alt+Enter is reserved for handing the query to the AI assistant.
+      if (e.altKey) {
+        if (isChatActive) askAssistantWithQuery();
+        return;
+      }
       if (merged[activeIndex]) {
-        navigate(merged[activeIndex].page.slug);
+        navigate(merged[activeIndex].page.slug, e);
       }
     } else if (e.key === "Escape") {
       closeSearch();
@@ -288,6 +333,8 @@ function SearchProvider({
           sectionLabels={sectionLabels}
           isSearching={isSearching}
           navigate={navigate}
+          canAskAssistant={isChatActive}
+          onAskAssistant={askAssistantWithQuery}
         />
       )}
     </SearchContext.Provider>

package/dist/templates/components/SearchModalContent.d.ts

@@ -1 +1 @@
-export declare const searchModalContentTemplate = "\"use client\";\nimport React from \"react\";\nimport styled, { css, keyframes } from \"styled-components\";\nimport { Search, X } from \"lucide-react\";\nimport { IconButton } from \"cherry-styled-components\";\nimport { mq, Theme } from \"@/app/theme\";\nimport { Spinner } from \"@/components/Spinner\";\nimport { thinScrollbar } from \"@/components/layout/SharedStyled\";\n\nexport interface PageItem {\n  slug: string;\n  title: string;\n  description?: string;\n  category: string;\n  section?: string;\n}\n\nexport interface MergedResult {\n  page: PageItem;\n  snippet?: string;\n}\n\nexport interface SearchModalContentProps {\n  isClosing: boolean;\n  closeSearch: () => void;\n  onCloseAnimationEnd: () => void;\n  query: string;\n  setQuery: (q: string) => void;\n  activeIndex: number;\n  setActiveIndex: (i: number | ((prev: number) => number)) => void;\n  resultsRef: React.RefObject<HTMLUListElement | null>;\n  onKeyDown: (e: React.KeyboardEvent) => void;\n  merged: MergedResult[];\n  sectionLabels: Record<string, string>;\n  isSearching: boolean;\n  navigate: (slug: string) => void;\n}\n\nconst ANIMATION_MS = 300;\n\nconst backdropIn = keyframes`\n  from { opacity: 0; }\n  to { opacity: 1; }\n`;\n\nconst backdropOut = keyframes`\n  from { opacity: 1; }\n  to { opacity: 0; }\n`;\n\nconst modalIn = keyframes`\n  from { opacity: 0; transform: scale(0.96) translateY(-8px); }\n  to { opacity: 1; transform: scale(1) translateY(0); }\n`;\n\nconst modalOut = keyframes`\n  from { opacity: 1; transform: scale(1) translateY(0); }\n  to { opacity: 0; transform: scale(0.96) translateY(-8px); }\n`;\n\nconst StyledBackdrop = styled.div<{ theme: Theme; $isClosing: boolean }>`\n  position: fixed;\n  inset: 0;\n  z-index: 9999;\n  /* Backdrop is intentionally near-black in both modes \u2014 covers everything\n     behind the modal regardless of the user's theme. */\n  background: rgba(0, 0, 0, 0.5);\n  backdrop-filter: blur(4px);\n  -webkit-backdrop-filter: blur(4px);\n  display: flex;\n  align-items: flex-start;\n  justify-content: center;\n  padding: 20px;\n  animation: ${({ $isClosing }) => ($isClosing ? backdropOut : backdropIn)}\n    ${ANIMATION_MS}ms ease forwards;\n\n  ${mq(\"lg\")} {\n    padding: 120px 20px 20px 20px;\n  }\n`;\n\nconst StyledModal = styled.div<{ theme: Theme; $isClosing: boolean }>`\n  background: ${({ theme }) => theme.colors.light};\n  border-radius: ${({ theme }) => theme.spacing.radius.lg};\n  box-shadow: ${({ theme }) => theme.shadows.xs};\n  width: 100%;\n  max-width: 560px;\n  max-height: calc(100dvh - 40px);\n  display: flex;\n  flex-direction: column;\n  border: solid 1px ${({ theme }) => theme.colors.grayLight};\n  padding-bottom: 8px;\n  animation: ${({ $isClosing }) => ($isClosing ? modalOut : modalIn)}\n    ${ANIMATION_MS}ms ease forwards;\n\n  ${mq(\"lg\")} {\n    max-height: calc(100dvh - 240px);\n  }\n`;\n\nconst StyledInputWrapper = styled.div<{ theme: Theme }>`\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 16px;\n  flex-shrink: 0;\n  border-bottom: solid 1px ${({ theme }) => theme.colors.grayLight};\n\n  & svg.lucide {\n    color: ${({ theme }) => theme.colors.gray};\n    flex-shrink: 0;\n  }\n`;\n\nconst StyledInput = styled.input<{ theme: Theme }>`\n  flex: 1;\n  border: none;\n  outline: none;\n  background: transparent;\n  font-size: ${({ theme }) => theme.fontSizes.text.lg};\n  line-height: ${({ theme }) => theme.lineHeights.text.lg};\n  color: ${({ theme }) => theme.colors.dark};\n  font-family: inherit;\n\n  &::placeholder {\n    color: ${({ theme }) => theme.colors.gray};\n  }\n`;\n\nconst StyledResults = styled.ul<{ theme: Theme }>`\n  list-style: none;\n  margin: 8px 0 0 0;\n  padding: 0 8px;\n  overflow-y: auto;\n  flex: 1;\n  min-height: 0;\n  -webkit-overflow-scrolling: touch;\n  ${thinScrollbar};\n\n  /* The results list is a keyboard-focusable scroll container; frame it with\n     the app focus ring (inset so it hugs the visible viewport and isn't clipped\n     by the scroll overflow) instead of the browser's default outline. */\n  &:focus-visible {\n    outline: none;\n    border-radius: ${({ theme }) => theme.spacing.radius.xs};\n    box-shadow: inset 0 0 0 2px ${({ theme }) => theme.colors.primaryLight};\n  }\n`;\n\nconst StyledResultItem = styled.li<{ theme: Theme; $isActive: boolean }>`\n  padding: 10px 12px;\n  border-radius: ${({ theme }) => theme.spacing.radius.xs};\n  cursor: pointer;\n  transition: background 0.15s ease;\n\n  ${({ $isActive, theme }) =>\n    $isActive &&\n    css`\n      background: color-mix(\n        in srgb,\n        ${theme.colors.primaryLight} 20%,\n        transparent\n      );\n    `}\n\n  &:hover {\n    background: ${({ theme }) =>\n      `color-mix(in srgb, ${theme.colors.primaryLight} 15%, transparent)`};\n  }\n`;\n\nconst StyledResultTitle = styled.span<{ theme: Theme }>`\n  font-size: ${({ theme }) => theme.fontSizes.text.lg};\n  font-weight: 500;\n  color: ${({ theme }) => theme.colors.dark};\n  display: block;\n`;\n\nconst StyledResultMeta = styled.span<{ theme: Theme }>`\n  font-size: ${({ theme }) => theme.fontSizes.small.lg};\n  color: ${({ theme }) => theme.colors.gray};\n  display: block;\n  margin-top: 2px;\n`;\n\nconst StyledSnippet = styled.span<{ theme: Theme }>`\n  font-size: ${({ theme }) => theme.fontSizes.small.lg};\n  color: ${({ theme }) => theme.colors.grayDark};\n  display: block;\n  margin-top: 4px;\n  line-height: 1.4;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n\n  & mark {\n    background: ${({ theme }) =>\n      `color-mix(in srgb, ${theme.colors.primaryLight} 35%, transparent)`};\n    color: inherit;\n    border-radius: 4px;\n    padding: 0 1px;\n  }\n`;\n\nconst StyledEmpty = styled.div<{ theme: Theme }>`\n  padding: 20px 20px 12px;\n  min-height: 40px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  font-size: ${({ theme }) => theme.fontSizes.small.lg};\n  color: ${({ theme }) => theme.colors.gray};\n`;\n\nfunction escapeHtml(str: string): string {\n  return str\n    .replace(/&/g, \"&amp;\")\n    .replace(/</g, \"&lt;\")\n    .replace(/>/g, \"&gt;\")\n    .replace(/\"/g, \"&quot;\");\n}\n\nfunction highlightMatch(snippet: string, query: string): string {\n  const escaped = escapeHtml(snippet);\n  if (!query.trim()) return escaped;\n  const q = escapeHtml(query.trim());\n  const regex = new RegExp(\n    `(${q.replace(/[.*+?^${}()|[\\]\\\\]/g, \"\\\\$&\")})`,\n    \"gi\",\n  );\n  return escaped.replace(regex, \"<mark>$1</mark>\");\n}\n\nexport function SearchModalContent({\n  isClosing,\n  closeSearch,\n  onCloseAnimationEnd,\n  query,\n  setQuery,\n  activeIndex,\n  setActiveIndex,\n  resultsRef,\n  onKeyDown,\n  merged,\n  sectionLabels,\n  isSearching,\n  navigate,\n}: SearchModalContentProps) {\n  return (\n    <StyledBackdrop\n      $isClosing={isClosing}\n      onClick={closeSearch}\n      onAnimationEnd={(e) => {\n        // animationend bubbles, so this handler also fires for animations\n        // completing on descendants (the inner modal, icons, result items).\n        // Only the backdrop's own exit animation should trigger the unmount -\n        // otherwise a child finishing its animation first tears the modal down\n        // before the close animation plays, making it vanish instantly.\n        if (e.target === e.currentTarget) onCloseAnimationEnd();\n      }}\n    >\n      <StyledModal $isClosing={isClosing} onClick={(e) => e.stopPropagation()}>\n        <StyledInputWrapper>\n          <Search size={18} />\n          <StyledInput\n            autoFocus\n            value={query}\n            onChange={(e) => {\n              setQuery(e.target.value);\n              setActiveIndex(0);\n            }}\n            onKeyDown={onKeyDown}\n            placeholder=\"Search docs...\"\n            autoComplete=\"off\"\n            spellCheck={false}\n          />\n          <IconButton\n            onClick={closeSearch}\n            aria-label=\"Close search\"\n            title=\"Close search\"\n          >\n            <X />\n          </IconButton>\n        </StyledInputWrapper>\n        {merged.length > 0 ? (\n          <StyledResults ref={resultsRef}>\n            {merged.map((result, index) => (\n              <StyledResultItem\n                key={result.page.slug + result.page.section}\n                $isActive={index === activeIndex}\n                onClick={() => navigate(result.page.slug)}\n                onMouseEnter={() => setActiveIndex(index)}\n              >\n                <StyledResultTitle>{result.page.title}</StyledResultTitle>\n                <StyledResultMeta>\n                  {result.page.section\n                    ? `${sectionLabels[result.page.section] || result.page.section} / `\n                    : \"\"}\n                  {result.page.category}\n                </StyledResultMeta>\n                {result.snippet && (\n                  <StyledSnippet\n                    dangerouslySetInnerHTML={{\n                      __html: highlightMatch(result.snippet, query),\n                    }}\n                  />\n                )}\n              </StyledResultItem>\n            ))}\n          </StyledResults>\n        ) : (\n          <StyledEmpty>\n            {isSearching ? <Spinner size={18} /> : \"No results found\"}\n          </StyledEmpty>\n        )}\n      </StyledModal>\n    </StyledBackdrop>\n  );\n}\n";
+export declare const searchModalContentTemplate = "\"use client\";\nimport React from \"react\";\nimport styled, { css, keyframes } from \"styled-components\";\nimport { Search, X } from \"lucide-react\";\nimport { IconButton } from \"cherry-styled-components\";\nimport { mq, Theme } from \"@/app/theme\";\nimport { Spinner } from \"@/components/Spinner\";\nimport {\n  interactiveStyles,\n  thinScrollbar,\n} from \"@/components/layout/SharedStyled\";\n\nexport interface PageItem {\n  slug: string;\n  title: string;\n  description?: string;\n  category: string;\n  section?: string;\n}\n\nexport interface MergedResult {\n  page: PageItem;\n  snippet?: string;\n}\n\nexport interface SearchModalContentProps {\n  isClosing: boolean;\n  closeSearch: () => void;\n  onCloseAnimationEnd: () => void;\n  query: string;\n  setQuery: (q: string) => void;\n  activeIndex: number;\n  setActiveIndex: (i: number | ((prev: number) => number)) => void;\n  resultsRef: React.RefObject<HTMLUListElement | null>;\n  onKeyDown: (e: React.KeyboardEvent) => void;\n  merged: MergedResult[];\n  sectionLabels: Record<string, string>;\n  isSearching: boolean;\n  navigate: (\n    slug: string,\n    modifiers?: { metaKey?: boolean; ctrlKey?: boolean; shiftKey?: boolean },\n  ) => void;\n  canAskAssistant: boolean;\n  onAskAssistant: () => void;\n}\n\nconst ANIMATION_MS = 300;\n\nconst backdropIn = keyframes`\n  from { opacity: 0; }\n  to { opacity: 1; }\n`;\n\nconst backdropOut = keyframes`\n  from { opacity: 1; }\n  to { opacity: 0; }\n`;\n\nconst modalIn = keyframes`\n  from { opacity: 0; transform: scale(0.96) translateY(-8px); }\n  to { opacity: 1; transform: scale(1) translateY(0); }\n`;\n\nconst modalOut = keyframes`\n  from { opacity: 1; transform: scale(1) translateY(0); }\n  to { opacity: 0; transform: scale(0.96) translateY(-8px); }\n`;\n\nconst StyledBackdrop = styled.div<{ theme: Theme; $isClosing: boolean }>`\n  position: fixed;\n  inset: 0;\n  z-index: 9999;\n  /* Backdrop is intentionally near-black in both modes \u2014 covers everything\n     behind the modal regardless of the user's theme. */\n  background: rgba(0, 0, 0, 0.5);\n  backdrop-filter: blur(4px);\n  -webkit-backdrop-filter: blur(4px);\n  display: flex;\n  align-items: flex-start;\n  justify-content: center;\n  padding: 20px;\n  animation: ${({ $isClosing }) => ($isClosing ? backdropOut : backdropIn)}\n    ${ANIMATION_MS}ms ease forwards;\n\n  ${mq(\"lg\")} {\n    padding: 120px 20px 20px 20px;\n  }\n`;\n\nconst StyledModal = styled.div<{ theme: Theme; $isClosing: boolean }>`\n  background: ${({ theme }) => theme.colors.light};\n  border-radius: ${({ theme }) => theme.spacing.radius.lg};\n  box-shadow: ${({ theme }) => theme.shadows.xs};\n  width: 100%;\n  max-width: 560px;\n  max-height: calc(100dvh - 40px);\n  display: flex;\n  flex-direction: column;\n  border: solid 1px ${({ theme }) => theme.colors.grayLight};\n  padding-bottom: 8px;\n  animation: ${({ $isClosing }) => ($isClosing ? modalOut : modalIn)}\n    ${ANIMATION_MS}ms ease forwards;\n\n  ${mq(\"lg\")} {\n    max-height: calc(100dvh - 240px);\n  }\n`;\n\nconst StyledInputWrapper = styled.div<{ theme: Theme }>`\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 16px;\n  flex-shrink: 0;\n  border-bottom: solid 1px ${({ theme }) => theme.colors.grayLight};\n\n  & svg.lucide {\n    color: ${({ theme }) => theme.colors.gray};\n    flex-shrink: 0;\n  }\n`;\n\nconst StyledInput = styled.input<{ theme: Theme }>`\n  flex: 1;\n  border: none;\n  outline: none;\n  background: transparent;\n  font-size: ${({ theme }) => theme.fontSizes.text.lg};\n  line-height: ${({ theme }) => theme.lineHeights.text.lg};\n  color: ${({ theme }) => theme.colors.dark};\n  font-family: inherit;\n\n  &::placeholder {\n    color: ${({ theme }) => theme.colors.gray};\n  }\n`;\n\n// \"Ask AI\" affordance shown before the close button when the AI chat is\n// enabled. Desktop-only (like the header's Cmd+K hint) since it advertises the\n// Option+Enter shortcut; mobile users reach the assistant from the header CTA.\nconst StyledAskAssistant = styled.button<{ theme: Theme }>`\n  ${interactiveStyles};\n  display: none;\n  align-items: center;\n  gap: 6px;\n  flex-shrink: 0;\n  border: solid 1px ${({ theme }) => theme.colors.grayLight};\n  background: ${({ theme }) => theme.colors.light};\n  color: ${({ theme }) => theme.colors.grayDark};\n  border-radius: ${({ theme }) => theme.spacing.radius.xs};\n  padding: 5px 8px;\n  font-family: inherit;\n  font-size: ${({ theme }) => theme.fontSizes.small.lg};\n  font-weight: 500;\n  line-height: 1;\n  white-space: nowrap;\n  cursor: pointer;\n\n  &:disabled {\n    opacity: 0.5;\n    cursor: default;\n\n    &:hover {\n      border-color: ${({ theme }) => theme.colors.grayLight};\n    }\n  }\n\n  ${mq(\"lg\")} {\n    display: inline-flex;\n  }\n`;\n\nconst StyledAskKeys = styled.span`\n  display: inline-flex;\n  align-items: center;\n  gap: 3px;\n`;\n\nconst StyledAskKbd = styled.kbd<{ theme: Theme }>`\n  font-family: inherit;\n  font-size: 12px;\n  font-weight: 600;\n  line-height: 1;\n  min-width: 18px;\n  height: 18px;\n  padding: 0 4px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  background: ${({ theme }) => theme.colors.grayLight};\n  color: ${({ theme }) => theme.colors.grayDark};\n  border-radius: 4px;\n`;\n\n// The return glyph's ink sits high in its em box, so it reads top-aligned even\n// when the keycap flex-centers it. Nudge just the character (not the pill) down\n// a pixel so it optically centers and lines up with the option glyph.\nconst StyledReturnGlyph = styled.span`\n  display: inline-block;\n  transform: translateY(1.5px);\n`;\n\nconst StyledResults = styled.ul<{ theme: Theme }>`\n  list-style: none;\n  position: relative;\n  margin: 8px 0 0 0;\n  padding: 0 8px;\n  overflow-y: auto;\n  flex: 1;\n  min-height: 0;\n  -webkit-overflow-scrolling: touch;\n  ${thinScrollbar};\n\n  /* The results list is a keyboard-focusable scroll container; frame it with\n     the app focus ring (inset so it hugs the visible viewport and isn't clipped\n     by the scroll overflow) instead of the browser's default outline. */\n  &:focus-visible {\n    outline: none;\n    border-radius: ${({ theme }) => theme.spacing.radius.xs};\n    box-shadow: inset 0 0 0 2px ${({ theme }) => theme.colors.primaryLight};\n  }\n`;\n\n// Single indicator that slides between result items instead of each item\n// fading its own background in and out. Positioned/sized inline from the active\n// item's measured offset (see the layout effect below); the transition on\n// transform + height produces the up/down glide as the active item changes.\nconst StyledHighlight = styled.div<{ theme: Theme }>`\n  position: absolute;\n  left: 8px;\n  right: 8px;\n  top: 0;\n  z-index: 0;\n  pointer-events: none;\n  border-radius: ${({ theme }) => theme.spacing.radius.xs};\n  background: ${({ theme }) =>\n    `color-mix(in srgb, ${theme.colors.primaryLight} 20%, transparent)`};\n  transition:\n    transform 0.2s cubic-bezier(0.22, 1, 0.36, 1),\n    height 0.2s cubic-bezier(0.22, 1, 0.36, 1);\n  will-change: transform, height;\n\n  @media (prefers-reduced-motion: reduce) {\n    transition: none;\n  }\n`;\n\nconst StyledResultItem = styled.li<{ theme: Theme; $isActive: boolean }>`\n  position: relative;\n  z-index: 1;\n  padding: 10px 12px;\n  border-radius: ${({ theme }) => theme.spacing.radius.xs};\n  cursor: pointer;\n\n  ${({ $isActive, theme }) =>\n    $isActive &&\n    css`\n      & > span:first-of-type {\n        color: ${theme.colors.primary};\n      }\n    `}\n`;\n\nconst StyledResultTitle = styled.span<{ theme: Theme }>`\n  font-size: ${({ theme }) => theme.fontSizes.text.lg};\n  font-weight: 500;\n  color: ${({ theme }) => theme.colors.dark};\n  display: block;\n  transition: color 0.15s ease;\n`;\n\nconst StyledResultMeta = styled.span<{ theme: Theme }>`\n  font-size: ${({ theme }) => theme.fontSizes.small.lg};\n  color: ${({ theme }) => theme.colors.gray};\n  display: block;\n  margin-top: 2px;\n`;\n\nconst StyledSnippet = styled.span<{ theme: Theme }>`\n  font-size: ${({ theme }) => theme.fontSizes.small.lg};\n  color: ${({ theme }) => theme.colors.grayDark};\n  display: block;\n  margin-top: 4px;\n  line-height: 1.4;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n\n  & mark {\n    background: ${({ theme }) =>\n      `color-mix(in srgb, ${theme.colors.primaryLight} 35%, transparent)`};\n    color: inherit;\n    border-radius: 4px;\n    padding: 0 1px;\n  }\n`;\n\nconst StyledEmpty = styled.div<{ theme: Theme }>`\n  padding: 20px 20px 12px;\n  min-height: 40px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  font-size: ${({ theme }) => theme.fontSizes.small.lg};\n  color: ${({ theme }) => theme.colors.gray};\n`;\n\nfunction escapeHtml(str: string): string {\n  return str\n    .replace(/&/g, \"&amp;\")\n    .replace(/</g, \"&lt;\")\n    .replace(/>/g, \"&gt;\")\n    .replace(/\"/g, \"&quot;\");\n}\n\nfunction highlightMatch(snippet: string, query: string): string {\n  const escaped = escapeHtml(snippet);\n  if (!query.trim()) return escaped;\n  const q = escapeHtml(query.trim());\n  const regex = new RegExp(\n    `(${q.replace(/[.*+?^${}()|[\\]\\\\]/g, \"\\\\$&\")})`,\n    \"gi\",\n  );\n  return escaped.replace(regex, \"<mark>$1</mark>\");\n}\n\nexport function SearchModalContent({\n  isClosing,\n  closeSearch,\n  onCloseAnimationEnd,\n  query,\n  setQuery,\n  activeIndex,\n  setActiveIndex,\n  resultsRef,\n  onKeyDown,\n  merged,\n  sectionLabels,\n  isSearching,\n  navigate,\n  canAskAssistant,\n  onAskAssistant,\n}: SearchModalContentProps) {\n  // Measure the active item so the sliding highlight can be placed over it.\n  // useLayoutEffect runs before paint, so the first position is committed\n  // without a transition (no slide-in on open); later activeIndex/hover\n  // changes glide because only the transform + height differ.\n  const [indicator, setIndicator] = React.useState<{\n    top: number;\n    height: number;\n  } | null>(null);\n\n  React.useLayoutEffect(() => {\n    const list = resultsRef.current;\n    if (!list) {\n      setIndicator(null);\n      return;\n    }\n    const items = list.querySelectorAll(\"li\");\n    const active = items[activeIndex] as HTMLElement | undefined;\n    if (!active) {\n      setIndicator(null);\n      return;\n    }\n    setIndicator({ top: active.offsetTop, height: active.offsetHeight });\n\n    // Keep the active row inside the scroll viewport in the SAME pre-paint pass\n    // that positions the highlight, so the two never desync into a one-frame\n    // flicker. merged is a dependency, so re-filtering (a new query) also\n    // re-scrolls the reset active row into view even when its index is\n    // unchanged. This list is flat (no group headers), so no header inclusion\n    // is needed; a small margin keeps rows off the container's hard edges.\n    // Adjust scrollTop directly (never scrollIntoView, which can also pan\n    // ancestors).\n    const margin = 8;\n    const viewTop = active.offsetTop - margin;\n    const viewBottom = active.offsetTop + active.offsetHeight + margin;\n\n    if (viewTop < list.scrollTop) {\n      list.scrollTop = viewTop;\n    } else if (viewBottom > list.scrollTop + list.clientHeight) {\n      list.scrollTop = viewBottom - list.clientHeight;\n    }\n  }, [activeIndex, merged, resultsRef]);\n\n  return (\n    <StyledBackdrop\n      $isClosing={isClosing}\n      onClick={closeSearch}\n      onAnimationEnd={(e) => {\n        // animationend bubbles, so this handler also fires for animations\n        // completing on descendants (the inner modal, icons, result items).\n        // Only the backdrop's own exit animation should trigger the unmount -\n        // otherwise a child finishing its animation first tears the modal down\n        // before the close animation plays, making it vanish instantly.\n        if (e.target === e.currentTarget) onCloseAnimationEnd();\n      }}\n    >\n      <StyledModal $isClosing={isClosing} onClick={(e) => e.stopPropagation()}>\n        <StyledInputWrapper>\n          <Search size={18} />\n          <StyledInput\n            autoFocus\n            value={query}\n            onChange={(e) => {\n              setQuery(e.target.value);\n              setActiveIndex(0);\n            }}\n            onKeyDown={onKeyDown}\n            placeholder=\"Search docs...\"\n            autoComplete=\"off\"\n            spellCheck={false}\n          />\n          {canAskAssistant && (\n            <StyledAskAssistant\n              type=\"button\"\n              onClick={onAskAssistant}\n              disabled={!query.trim()}\n              aria-label=\"Ask AI\"\n              title=\"Ask AI\"\n            >\n              Ask AI\n              <StyledAskKeys aria-hidden=\"true\">\n                <StyledAskKbd>&#8997;</StyledAskKbd>\n                <StyledAskKbd>\n                  <StyledReturnGlyph>&#8629;</StyledReturnGlyph>\n                </StyledAskKbd>\n              </StyledAskKeys>\n            </StyledAskAssistant>\n          )}\n          <IconButton\n            onClick={closeSearch}\n            aria-label=\"Close search\"\n            title=\"Close search\"\n          >\n            <X />\n          </IconButton>\n        </StyledInputWrapper>\n        {merged.length > 0 ? (\n          <StyledResults ref={resultsRef}>\n            {indicator && (\n              <StyledHighlight\n                aria-hidden=\"true\"\n                style={{\n                  transform: `translateY(${indicator.top}px)`,\n                  height: `${indicator.height}px`,\n                }}\n              />\n            )}\n            {merged.map((result, index) => (\n              <StyledResultItem\n                key={result.page.slug + result.page.section}\n                $isActive={index === activeIndex}\n                onClick={(e) => navigate(result.page.slug, e)}\n                onMouseEnter={() => setActiveIndex(index)}\n              >\n                <StyledResultTitle>{result.page.title}</StyledResultTitle>\n                <StyledResultMeta>\n                  {result.page.section\n                    ? `${sectionLabels[result.page.section] || result.page.section} / `\n                    : \"\"}\n                  {result.page.category}\n                </StyledResultMeta>\n                {result.snippet && (\n                  <StyledSnippet\n                    dangerouslySetInnerHTML={{\n                      __html: highlightMatch(result.snippet, query),\n                    }}\n                  />\n                )}\n              </StyledResultItem>\n            ))}\n          </StyledResults>\n        ) : (\n          <StyledEmpty>\n            {isSearching ? <Spinner size={18} /> : \"No results found\"}\n          </StyledEmpty>\n        )}\n      </StyledModal>\n    </StyledBackdrop>\n  );\n}\n";

package/dist/templates/components/SearchModalContent.js

@@ -5,7 +5,10 @@ import { Search, X } from "lucide-react";
 import { IconButton } from "cherry-styled-components";
 import { mq, Theme } from "@/app/theme";
 import { Spinner } from "@/components/Spinner";
-import { thinScrollbar } from "@/components/layout/SharedStyled";
+import {
+  interactiveStyles,
+  thinScrollbar,
+} from "@/components/layout/SharedStyled";
 
 export interface PageItem {
   slug: string;
@@ -33,7 +36,12 @@ export interface SearchModalContentProps {
   merged: MergedResult[];
   sectionLabels: Record<string, string>;
   isSearching: boolean;
-  navigate: (slug: string) => void;
+  navigate: (
+    slug: string,
+    modifiers?: { metaKey?: boolean; ctrlKey?: boolean; shiftKey?: boolean },
+  ) => void;
+  canAskAssistant: boolean;
+  onAskAssistant: () => void;
 }
 
 const ANIMATION_MS = 300;
@@ -127,8 +135,74 @@ const StyledInput = styled.input<{ theme: Theme }>\`
   }
 \`;
 
+// "Ask AI" affordance shown before the close button when the AI chat is
+// enabled. Desktop-only (like the header's Cmd+K hint) since it advertises the
+// Option+Enter shortcut; mobile users reach the assistant from the header CTA.
+const StyledAskAssistant = styled.button<{ theme: Theme }>\`
+  \${interactiveStyles};
+  display: none;
+  align-items: center;
+  gap: 6px;
+  flex-shrink: 0;
+  border: solid 1px \${({ theme }) => theme.colors.grayLight};
+  background: \${({ theme }) => theme.colors.light};
+  color: \${({ theme }) => theme.colors.grayDark};
+  border-radius: \${({ theme }) => theme.spacing.radius.xs};
+  padding: 5px 8px;
+  font-family: inherit;
+  font-size: \${({ theme }) => theme.fontSizes.small.lg};
+  font-weight: 500;
+  line-height: 1;
+  white-space: nowrap;
+  cursor: pointer;
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: default;
+
+    &:hover {
+      border-color: \${({ theme }) => theme.colors.grayLight};
+    }
+  }
+
+  \${mq("lg")} {
+    display: inline-flex;
+  }
+\`;
+
+const StyledAskKeys = styled.span\`
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+\`;
+
+const StyledAskKbd = styled.kbd<{ theme: Theme }>\`
+  font-family: inherit;
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 1;
+  min-width: 18px;
+  height: 18px;
+  padding: 0 4px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: \${({ theme }) => theme.colors.grayLight};
+  color: \${({ theme }) => theme.colors.grayDark};
+  border-radius: 4px;
+\`;
+
+// The return glyph's ink sits high in its em box, so it reads top-aligned even
+// when the keycap flex-centers it. Nudge just the character (not the pill) down
+// a pixel so it optically centers and lines up with the option glyph.
+const StyledReturnGlyph = styled.span\`
+  display: inline-block;
+  transform: translateY(1.5px);
+\`;
+
 const StyledResults = styled.ul<{ theme: Theme }>\`
   list-style: none;
+  position: relative;
   margin: 8px 0 0 0;
   padding: 0 8px;
   overflow-y: auto;
@@ -147,26 +221,44 @@ const StyledResults = styled.ul<{ theme: Theme }>\`
   }
 \`;
 
+// Single indicator that slides between result items instead of each item
+// fading its own background in and out. Positioned/sized inline from the active
+// item's measured offset (see the layout effect below); the transition on
+// transform + height produces the up/down glide as the active item changes.
+const StyledHighlight = styled.div<{ theme: Theme }>\`
+  position: absolute;
+  left: 8px;
+  right: 8px;
+  top: 0;
+  z-index: 0;
+  pointer-events: none;
+  border-radius: \${({ theme }) => theme.spacing.radius.xs};
+  background: \${({ theme }) =>
+    \`color-mix(in srgb, \${theme.colors.primaryLight} 20%, transparent)\`};
+  transition:
+    transform 0.2s cubic-bezier(0.22, 1, 0.36, 1),
+    height 0.2s cubic-bezier(0.22, 1, 0.36, 1);
+  will-change: transform, height;
+
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
+\`;
+
 const StyledResultItem = styled.li<{ theme: Theme; $isActive: boolean }>\`
+  position: relative;
+  z-index: 1;
   padding: 10px 12px;
   border-radius: \${({ theme }) => theme.spacing.radius.xs};
   cursor: pointer;
-  transition: background 0.15s ease;
 
   \${({ $isActive, theme }) =>
     $isActive &&
     css\`
-      background: color-mix(
-        in srgb,
-        \${theme.colors.primaryLight} 20%,
-        transparent
-      );
+      & > span:first-of-type {
+        color: \${theme.colors.primary};
+      }
     \`}
-
-  &:hover {
-    background: \${({ theme }) =>
-      \`color-mix(in srgb, \${theme.colors.primaryLight} 15%, transparent)\`};
-  }
 \`;
 
 const StyledResultTitle = styled.span<{ theme: Theme }>\`
@@ -174,6 +266,7 @@ const StyledResultTitle = styled.span<{ theme: Theme }>\`
   font-weight: 500;
   color: \${({ theme }) => theme.colors.dark};
   display: block;
+  transition: color 0.15s ease;
 \`;
 
 const StyledResultMeta = styled.span<{ theme: Theme }>\`
@@ -246,7 +339,51 @@ export function SearchModalContent({
   sectionLabels,
   isSearching,
   navigate,
+  canAskAssistant,
+  onAskAssistant,
 }: SearchModalContentProps) {
+  // Measure the active item so the sliding highlight can be placed over it.
+  // useLayoutEffect runs before paint, so the first position is committed
+  // without a transition (no slide-in on open); later activeIndex/hover
+  // changes glide because only the transform + height differ.
+  const [indicator, setIndicator] = React.useState<{
+    top: number;
+    height: number;
+  } | null>(null);
+
+  React.useLayoutEffect(() => {
+    const list = resultsRef.current;
+    if (!list) {
+      setIndicator(null);
+      return;
+    }
+    const items = list.querySelectorAll("li");
+    const active = items[activeIndex] as HTMLElement | undefined;
+    if (!active) {
+      setIndicator(null);
+      return;
+    }
+    setIndicator({ top: active.offsetTop, height: active.offsetHeight });
+
+    // Keep the active row inside the scroll viewport in the SAME pre-paint pass
+    // that positions the highlight, so the two never desync into a one-frame
+    // flicker. merged is a dependency, so re-filtering (a new query) also
+    // re-scrolls the reset active row into view even when its index is
+    // unchanged. This list is flat (no group headers), so no header inclusion
+    // is needed; a small margin keeps rows off the container's hard edges.
+    // Adjust scrollTop directly (never scrollIntoView, which can also pan
+    // ancestors).
+    const margin = 8;
+    const viewTop = active.offsetTop - margin;
+    const viewBottom = active.offsetTop + active.offsetHeight + margin;
+
+    if (viewTop < list.scrollTop) {
+      list.scrollTop = viewTop;
+    } else if (viewBottom > list.scrollTop + list.clientHeight) {
+      list.scrollTop = viewBottom - list.clientHeight;
+    }
+  }, [activeIndex, merged, resultsRef]);
+
   return (
     <StyledBackdrop
       $isClosing={isClosing}
@@ -275,6 +412,23 @@ export function SearchModalContent({
             autoComplete="off"
             spellCheck={false}
           />
+          {canAskAssistant && (
+            <StyledAskAssistant
+              type="button"
+              onClick={onAskAssistant}
+              disabled={!query.trim()}
+              aria-label="Ask AI"
+              title="Ask AI"
+            >
+              Ask AI
+              <StyledAskKeys aria-hidden="true">
+                <StyledAskKbd>&#8997;</StyledAskKbd>
+                <StyledAskKbd>
+                  <StyledReturnGlyph>&#8629;</StyledReturnGlyph>
+                </StyledAskKbd>
+              </StyledAskKeys>
+            </StyledAskAssistant>
+          )}
           <IconButton
             onClick={closeSearch}
             aria-label="Close search"
@@ -285,11 +439,20 @@ export function SearchModalContent({
         </StyledInputWrapper>
         {merged.length > 0 ? (
           <StyledResults ref={resultsRef}>
+            {indicator && (
+              <StyledHighlight
+                aria-hidden="true"
+                style={{
+                  transform: \`translateY(\${indicator.top}px)\`,
+                  height: \`\${indicator.height}px\`,
+                }}
+              />
+            )}
             {merged.map((result, index) => (
               <StyledResultItem
                 key={result.page.slug + result.page.section}
                 $isActive={index === activeIndex}
-                onClick={() => navigate(result.page.slug)}
+                onClick={(e) => navigate(result.page.slug, e)}
                 onMouseEnter={() => setActiveIndex(index)}
               >
                 <StyledResultTitle>{result.page.title}</StyledResultTitle>

package/dist/templates/components/SideBar.d.ts

@@ -1 +1 @@
-export declare const sideBarTemplate = "\"use client\";\nimport { useContext, useEffect, useRef, useState } from \"react\";\nimport { usePathname } from \"next/navigation\";\nimport { Flex, Space, ThemeToggle } from \"cherry-styled-components\";\nimport {\n  DocsSidebar,\n  SectionBarContext,\n  StyledSidebar,\n  StyledSidebarList,\n  StyledSidebarListItem,\n  StyledStrong,\n  StyledSidebarListItemLink,\n  StyledSidebarGroupButton,\n  StyledSidebarGroupRow,\n  StyledSidebarGroupLink,\n  StyledSidebarGroupChevron,\n  StyledSidebarGroupContent,\n  StyledSidebarFooter,\n  StyleMobileBar,\n  StyledMobileBurger,\n} from \"@/components/layout/DocsComponents\";\nimport { Icon } from \"@/components/layout/Icon\";\nimport { useLockBodyScroll } from \"@/components/LockBodyScroll\";\n\n// A link can be a leaf (slug + title) or a group with nested children. Both the\n// category icon and the per-link icon are optional Lucide names.\ntype NavItemLink = {\n  slug?: string;\n  title: string;\n  icon?: string;\n  links?: NavItemLink[];\n};\n\ntype NavItem = {\n  label: string;\n  icon?: string;\n  links: NavItemLink[];\n};\n\ninterface SideBarProps {\n  result: NavItem[];\n}\n\nfunction linkContainsActivePath(link: NavItemLink, pathname: string): boolean {\n  if (link.slug !== undefined && pathname === `/${link.slug}`) {\n    return true;\n  }\n  return (link.links ?? []).some((child) =>\n    linkContainsActivePath(child, pathname),\n  );\n}\n\nfunction SidebarNavLink({\n  link,\n  depth,\n  pathname,\n  onNavigate,\n}: {\n  link: NavItemLink;\n  depth: number;\n  pathname: string;\n  onNavigate: () => void;\n}) {\n  const children = link.links ?? [];\n  const hasChildren = children.length > 0;\n  const href = link.slug !== undefined ? `/${link.slug}` : undefined;\n  const isActive = href !== undefined && pathname === href;\n  const indent = { paddingLeft: `${20 + depth * 14}px` };\n\n  // Open collapsible groups that contain the active page so deep links land\n  // with their ancestors already expanded.\n  const [isOpen, setIsOpen] = useState(\n    hasChildren\n      ? children.some((child) => linkContainsActivePath(child, pathname))\n      : false,\n  );\n\n  if (!hasChildren) {\n    return (\n      <StyledSidebarListItem>\n        <StyledSidebarListItemLink\n          href={href ?? \"#\"}\n          $isActive={isActive}\n          aria-current={isActive ? \"page\" : undefined}\n          onClick={onNavigate}\n          style={indent}\n        >\n          {link.icon && <Icon name={link.icon} size={16} />}\n          {link.title}\n        </StyledSidebarListItemLink>\n      </StyledSidebarListItem>\n    );\n  }\n\n  const toggle = () => setIsOpen((prev) => !prev);\n  const toggleLabel = isOpen\n    ? `Collapse ${link.title}`\n    : `Expand ${link.title}`;\n  const groupActive = linkContainsActivePath(link, pathname);\n\n  return (\n    <li>\n      {href !== undefined ? (\n        <StyledSidebarGroupRow\n          $isActive={groupActive}\n          $isOpen={isOpen}\n          style={indent}\n        >\n          <StyledSidebarGroupLink\n            href={href}\n            aria-current={pathname === href ? \"page\" : undefined}\n            onClick={onNavigate}\n          >\n            {link.icon && <Icon name={link.icon} size={16} />}\n            {link.title}\n          </StyledSidebarGroupLink>\n          <StyledSidebarGroupChevron\n            type=\"button\"\n            onClick={toggle}\n            aria-expanded={isOpen}\n            aria-label={toggleLabel}\n          >\n            <Icon name=\"chevron-right\" size={16} />\n          </StyledSidebarGroupChevron>\n        </StyledSidebarGroupRow>\n      ) : (\n        <StyledSidebarGroupButton\n          type=\"button\"\n          onClick={toggle}\n          $isActive={groupActive}\n          $isOpen={isOpen}\n          style={indent}\n          aria-expanded={isOpen}\n          aria-label={toggleLabel}\n        >\n          {link.icon && <Icon name={link.icon} size={16} />}\n          {link.title}\n          <Icon name=\"chevron-right\" size={16} />\n        </StyledSidebarGroupButton>\n      )}\n      <StyledSidebarGroupContent $isOpen={isOpen}>\n        {children.map((child: NavItemLink, index: number) => (\n          <SidebarNavLink\n            key={index}\n            link={child}\n            depth={depth + 1}\n            pathname={pathname}\n            onNavigate={onNavigate}\n          />\n        ))}\n      </StyledSidebarGroupContent>\n    </li>\n  );\n}\n\nfunction SideBar({ result }: SideBarProps) {\n  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);\n  const hasSectionBar = useContext(SectionBarContext);\n  const pathname = usePathname();\n  const navRef = useRef<HTMLElement>(null);\n  const footerRef = useRef<HTMLDivElement>(null);\n\n  useLockBodyScroll(isMobileMenuOpen);\n\n  // Bring the current page's link into view within the sidebar's own scroll\n  // area when it starts off-screen (deep pages, in-content links, search).\n  // Scoped to the nav via scrollTo so the main document never jumps.\n  useEffect(() => {\n    const nav = navRef.current;\n    if (!nav) return;\n    const active = nav.querySelector<HTMLElement>('[aria-current=\"page\"]');\n    if (!active) return;\n\n    const navRect = nav.getBoundingClientRect();\n    const activeRect = active.getBoundingClientRect();\n\n    // The theme-toggle footer is sticky over the bottom of the scroll area\n    // (~60px tall), so links underneath it are covered rather than visible.\n    // Clamp the visible bottom to the footer's top edge when it's pinned.\n    const footerRect = footerRef.current?.getBoundingClientRect();\n    const visibleBottom = footerRect\n      ? Math.min(navRect.bottom, footerRect.top)\n      : navRect.bottom;\n\n    const isOutOfView =\n      activeRect.top < navRect.top || activeRect.bottom > visibleBottom;\n    if (!isOutOfView) return;\n\n    // Center within the visible band (nav top .. footer top), not the full\n    // nav height, so the link never settles behind the footer.\n    const visibleHeight = visibleBottom - navRect.top;\n    const target =\n      nav.scrollTop +\n      (activeRect.top - navRect.top) -\n      (visibleHeight - active.clientHeight) / 2;\n\n    // Animate the scroll, but honor users who opt out of motion.\n    const prefersReducedMotion = window.matchMedia(\n      \"(prefers-reduced-motion: reduce)\",\n    ).matches;\n    nav.scrollTo({\n      top: Math.max(0, target),\n      behavior: prefersReducedMotion ? \"auto\" : \"smooth\",\n    });\n  }, [pathname]);\n\n  return (\n    <DocsSidebar>\n      <StyleMobileBar\n        onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}\n        $isActive={isMobileMenuOpen}\n        aria-label={\n          isMobileMenuOpen ? \"Close navigation menu\" : \"Open navigation menu\"\n        }\n        aria-expanded={isMobileMenuOpen}\n      >\n        <StyledMobileBurger $isActive={isMobileMenuOpen} />\n      </StyleMobileBar>\n\n      <StyledSidebar\n        ref={navRef}\n        $isActive={isMobileMenuOpen}\n        $hasSectionBar={hasSectionBar}\n      >\n        {result &&\n          result.map((item: NavItem, index: number) => {\n            return (\n              <StyledSidebarList key={index}>\n                <StyledSidebarListItem>\n                  <StyledStrong>\n                    {item.icon && <Icon name={item.icon} size={16} />}\n                    {item.label}\n                  </StyledStrong>{\" \"}\n                </StyledSidebarListItem>\n                <li>\n                  <Space $size={20} />\n                </li>\n                {item.links &&\n                  item.links.map((link: NavItemLink, indexChild: number) => (\n                    <SidebarNavLink\n                      key={indexChild}\n                      link={link}\n                      depth={0}\n                      pathname={pathname}\n                      onNavigate={() => setIsMobileMenuOpen(false)}\n                    />\n                  ))}\n                <li aria-hidden=\"true\">\n                  <Space $size={20} />\n                </li>\n              </StyledSidebarList>\n            );\n          })}\n        <StyledSidebarFooter ref={footerRef}>\n          <Flex $xsJustifyContent=\"flex-start\" $lgJustifyContent=\"flex-end\">\n            <ThemeToggle />\n          </Flex>\n        </StyledSidebarFooter>\n      </StyledSidebar>\n    </DocsSidebar>\n  );\n}\n\nexport { SideBar };\n";
+export declare const sideBarTemplate = "\"use client\";\nimport { useContext, useEffect, useRef, useState } from \"react\";\nimport { usePathname } from \"next/navigation\";\nimport { Flex, Space, ThemeToggle } from \"cherry-styled-components\";\nimport {\n  DocsSidebar,\n  SectionBarContext,\n  StyledSidebar,\n  StyledSidebarList,\n  StyledSidebarListItem,\n  StyledStrong,\n  StyledSidebarListItemLink,\n  StyledSidebarGroupButton,\n  StyledSidebarGroupRow,\n  StyledSidebarGroupLink,\n  StyledSidebarGroupChevron,\n  StyledSidebarGroupContent,\n  StyledSidebarFooter,\n  StyleMobileBar,\n  StyledMobileBurger,\n} from \"@/components/layout/DocsComponents\";\nimport { Icon } from \"@/components/layout/Icon\";\nimport { useLockBodyScroll } from \"@/components/LockBodyScroll\";\n\n// A link can be a leaf (slug + title) or a group with nested children. Both the\n// category icon and the per-link icon are optional Lucide names.\ntype NavItemLink = {\n  slug?: string;\n  title: string;\n  icon?: string;\n  links?: NavItemLink[];\n};\n\ntype NavItem = {\n  label: string;\n  icon?: string;\n  links: NavItemLink[];\n};\n\ninterface SideBarProps {\n  result: NavItem[];\n}\n\nfunction linkContainsActivePath(link: NavItemLink, pathname: string): boolean {\n  if (link.slug !== undefined && pathname === `/${link.slug}`) {\n    return true;\n  }\n  return (link.links ?? []).some((child) =>\n    linkContainsActivePath(child, pathname),\n  );\n}\n\nfunction SidebarNavLink({\n  link,\n  depth,\n  pathname,\n  onNavigate,\n}: {\n  link: NavItemLink;\n  depth: number;\n  pathname: string;\n  onNavigate: () => void;\n}) {\n  const children = link.links ?? [];\n  const hasChildren = children.length > 0;\n  const href = link.slug !== undefined ? `/${link.slug}` : undefined;\n  const isActive = href !== undefined && pathname === href;\n  const indent = { paddingLeft: `${20 + depth * 14}px` };\n\n  // Open collapsible groups that contain the active page so deep links land\n  // with their ancestors already expanded.\n  const [isOpen, setIsOpen] = useState(\n    hasChildren\n      ? children.some((child) => linkContainsActivePath(child, pathname))\n      : false,\n  );\n\n  if (!hasChildren) {\n    return (\n      <StyledSidebarListItem>\n        <StyledSidebarListItemLink\n          href={href ?? \"#\"}\n          $isActive={isActive}\n          aria-current={isActive ? \"page\" : undefined}\n          onClick={onNavigate}\n          style={indent}\n        >\n          {link.icon && <Icon name={link.icon} size={16} />}\n          {link.title}\n        </StyledSidebarListItemLink>\n      </StyledSidebarListItem>\n    );\n  }\n\n  const toggle = () => setIsOpen((prev) => !prev);\n  const toggleLabel = isOpen\n    ? `Collapse ${link.title}`\n    : `Expand ${link.title}`;\n  const groupActive = linkContainsActivePath(link, pathname);\n\n  return (\n    <li>\n      {href !== undefined ? (\n        <StyledSidebarGroupRow\n          $isActive={groupActive}\n          $isOpen={isOpen}\n          style={indent}\n        >\n          <StyledSidebarGroupLink\n            href={href}\n            aria-current={pathname === href ? \"page\" : undefined}\n            onClick={onNavigate}\n          >\n            {link.icon && <Icon name={link.icon} size={16} />}\n            {link.title}\n          </StyledSidebarGroupLink>\n          <StyledSidebarGroupChevron\n            type=\"button\"\n            onClick={toggle}\n            aria-expanded={isOpen}\n            aria-label={toggleLabel}\n          >\n            <Icon name=\"chevron-right\" size={16} />\n          </StyledSidebarGroupChevron>\n        </StyledSidebarGroupRow>\n      ) : (\n        <StyledSidebarGroupButton\n          type=\"button\"\n          onClick={toggle}\n          $isActive={groupActive}\n          $isOpen={isOpen}\n          style={indent}\n          aria-expanded={isOpen}\n          aria-label={toggleLabel}\n        >\n          {link.icon && <Icon name={link.icon} size={16} />}\n          {link.title}\n          <Icon name=\"chevron-right\" size={16} />\n        </StyledSidebarGroupButton>\n      )}\n      <StyledSidebarGroupContent $isOpen={isOpen}>\n        {children.map((child: NavItemLink, index: number) => (\n          <SidebarNavLink\n            key={index}\n            link={child}\n            depth={depth + 1}\n            pathname={pathname}\n            onNavigate={onNavigate}\n          />\n        ))}\n      </StyledSidebarGroupContent>\n    </li>\n  );\n}\n\nfunction SideBar({ result }: SideBarProps) {\n  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);\n  const hasSectionBar = useContext(SectionBarContext);\n  const pathname = usePathname();\n  const navRef = useRef<HTMLElement>(null);\n  const footerRef = useRef<HTMLDivElement>(null);\n\n  useLockBodyScroll(isMobileMenuOpen);\n\n  // Bring the current page's link into view within the sidebar's own scroll\n  // area when it starts off-screen (deep pages, in-content links, search).\n  // Scoped to the nav via scrollTo so the main document never jumps.\n  useEffect(() => {\n    const nav = navRef.current;\n    if (!nav) return;\n    const active = nav.querySelector<HTMLElement>('[aria-current=\"page\"]');\n    if (!active) return;\n\n    const navRect = nav.getBoundingClientRect();\n    const activeRect = active.getBoundingClientRect();\n\n    // The theme-toggle footer is sticky over the bottom of the scroll area\n    // (~60px tall), so links underneath it are covered rather than visible.\n    // Clamp the visible bottom to the footer's top edge when it's pinned.\n    const footerRect = footerRef.current?.getBoundingClientRect();\n    const visibleBottom = footerRect\n      ? Math.min(navRect.bottom, footerRect.top)\n      : navRect.bottom;\n\n    const isOutOfView =\n      activeRect.top < navRect.top || activeRect.bottom > visibleBottom;\n    if (!isOutOfView) return;\n\n    // Center within the visible band (nav top .. footer top), not the full\n    // nav height, so the link never settles behind the footer.\n    const visibleHeight = visibleBottom - navRect.top;\n    const target =\n      nav.scrollTop +\n      (activeRect.top - navRect.top) -\n      (visibleHeight - active.clientHeight) / 2;\n\n    // Animate the scroll, but honor users who opt out of motion.\n    const prefersReducedMotion = window.matchMedia(\n      \"(prefers-reduced-motion: reduce)\",\n    ).matches;\n    nav.scrollTo({\n      top: Math.max(0, target),\n      behavior: prefersReducedMotion ? \"auto\" : \"smooth\",\n    });\n  }, [pathname]);\n\n  return (\n    <DocsSidebar>\n      <StyleMobileBar\n        onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}\n        $isActive={isMobileMenuOpen}\n        aria-label={\n          isMobileMenuOpen ? \"Close navigation menu\" : \"Open navigation menu\"\n        }\n        aria-expanded={isMobileMenuOpen}\n      >\n        <StyledMobileBurger $isActive={isMobileMenuOpen} />\n      </StyleMobileBar>\n\n      <StyledSidebar\n        ref={navRef}\n        $isActive={isMobileMenuOpen}\n        $hasSectionBar={hasSectionBar}\n      >\n        {result &&\n          result.map((item: NavItem, index: number) => {\n            return (\n              <StyledSidebarList key={index}>\n                <StyledSidebarListItem>\n                  <StyledStrong>\n                    {item.icon && <Icon name={item.icon} size={16} />}\n                    {item.label}\n                  </StyledStrong>{\" \"}\n                </StyledSidebarListItem>\n                <li>\n                  <Space $size={20} />\n                </li>\n                {item.links &&\n                  item.links.map((link: NavItemLink, indexChild: number) => (\n                    <SidebarNavLink\n                      key={indexChild}\n                      link={link}\n                      depth={0}\n                      pathname={pathname}\n                      onNavigate={() => setIsMobileMenuOpen(false)}\n                    />\n                  ))}\n                <li aria-hidden=\"true\">\n                  <Space $size={20} />\n                </li>\n              </StyledSidebarList>\n            );\n          })}\n        <StyledSidebarFooter ref={footerRef}>\n          <Flex $xsJustifyContent=\"flex-start\" $lgJustifyContent=\"flex-end\">\n            <ThemeToggle $shortcut />\n          </Flex>\n        </StyledSidebarFooter>\n      </StyledSidebar>\n    </DocsSidebar>\n  );\n}\n\nexport { SideBar };\n";

package/dist/templates/components/SideBar.js

@@ -253,7 +253,7 @@ function SideBar({ result }: SideBarProps) {
           })}
         <StyledSidebarFooter ref={footerRef}>
           <Flex $xsJustifyContent="flex-start" $lgJustifyContent="flex-end">
-            <ThemeToggle />
+            <ThemeToggle $shortcut />
           </Flex>
         </StyledSidebarFooter>
       </StyledSidebar>

package/dist/templates/components/layout/SiteGate.d.ts

@@ -1 +1 @@
-export declare const siteGateComponentTemplate = "\"use client\";\nimport { useState, type FormEvent } from \"react\";\nimport styled from \"styled-components\";\nimport { Input, ThemeToggle } from \"cherry-styled-components\";\nimport { Lock } from \"lucide-react\";\nimport { Theme } from \"@/app/theme\";\nimport { Button } from \"@/components/layout/Button\";\nimport { Callout } from \"@/components/layout/Callout\";\nimport { config } from \"@/utils/config\";\n\nconst StyledWrapper = styled.div<{ theme: Theme }>`\n  min-height: 100dvh;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 20px;\n  background: ${({ theme }) => theme.colors.light};\n`;\n\nconst StyledInner = styled.div`\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 20px;\n  width: 100%;\n  max-width: 380px;\n`;\n\nconst StyledFooter = styled.div`\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 12px;\n`;\n\nconst StyledBranding = styled.p<{ theme: Theme }>`\n  margin: 0;\n  font-size: 14px;\n  color: ${({ theme }) => theme.colors.grayDark};\n\n  & a {\n    color: ${({ theme }) => theme.colors.accent};\n    font-weight: 700;\n    text-decoration: none;\n    transition: all 0.3s ease;\n  }\n\n  & a:hover {\n    color: ${({ theme }) => theme.colors.primary};\n  }\n`;\n\nconst StyledCard = styled.div<{ theme: Theme }>`\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 20px;\n  width: 100%;\n  padding: 40px 32px;\n  background: ${({ theme }) => theme.colors.light};\n  border: solid 1px ${({ theme }) => theme.colors.grayLight};\n  border-radius: ${({ theme }) => theme.spacing.radius.lg};\n  box-shadow: ${({ theme }) => theme.shadows.sm};\n  text-align: center;\n`;\n\nconst StyledIcon = styled.div<{ theme: Theme }>`\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 48px;\n  height: 48px;\n  border-radius: 50%;\n  color: ${({ theme }) => theme.colors.accent};\n  background: ${({ theme }) => theme.colors.grayLight};\n\n  & svg {\n    width: 22px;\n    height: 22px;\n  }\n`;\n\nconst StyledTitle = styled.h1<{ theme: Theme }>`\n  margin: 0;\n  font-size: 22px;\n  color: ${({ theme }) => theme.colors.accent};\n`;\n\nconst StyledLede = styled.p<{ theme: Theme }>`\n  margin: 0;\n  font-size: 15px;\n  color: ${({ theme }) => theme.colors.grayDark};\n`;\n\nconst StyledForm = styled.form`\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n  width: 100%;\n`;\n\nconst StyledAlert = styled.div`\n  width: 100%;\n  text-align: left;\n`;\n\nexport function SiteGate({ hideBranding }: { hideBranding?: boolean }) {\n  const [password, setPassword] = useState(\"\");\n  const [status, setStatus] = useState<\"idle\" | \"loading\" | \"error\">(\"idle\");\n\n  async function handleSubmit(event: FormEvent<HTMLFormElement>) {\n    event.preventDefault();\n    if (!password || status === \"loading\") return;\n\n    setStatus(\"loading\");\n    try {\n      const res = await fetch(\"/api/gate\", {\n        method: \"POST\",\n        headers: { \"Content-Type\": \"application/json\" },\n        body: JSON.stringify({ password }),\n      });\n      if (res.ok) {\n        window.location.reload();\n        return;\n      }\n      setStatus(\"error\");\n    } catch {\n      setStatus(\"error\");\n    }\n  }\n\n  return (\n    <StyledWrapper>\n      <StyledInner>\n        <StyledCard>\n          <StyledIcon>\n            <Lock />\n          </StyledIcon>\n          <StyledTitle>{config.name || \"Documentation\"}</StyledTitle>\n          <StyledLede>This site is password protected.</StyledLede>\n          <StyledForm onSubmit={handleSubmit} noValidate>\n            <Input\n              type=\"password\"\n              name=\"password\"\n              autoComplete=\"current-password\"\n              placeholder=\"Enter password\"\n              aria-label=\"Password\"\n              autoFocus\n              value={password}\n              $error={status === \"error\"}\n              $fullWidth\n              onChange={(e) => {\n                setPassword(e.target.value);\n                if (status === \"error\") setStatus(\"idle\");\n              }}\n            />\n            <Button\n              type=\"submit\"\n              fullWidth\n              disabled={status === \"loading\" || !password}\n            >\n              {status === \"loading\" ? \"Unlocking...\" : \"Enter\"}\n            </Button>\n          </StyledForm>\n          {status === \"error\" && (\n            <StyledAlert>\n              <Callout type=\"danger\">\n                <p>Incorrect password. Try again.</p>\n              </Callout>\n            </StyledAlert>\n          )}\n        </StyledCard>\n        <StyledFooter>\n          <ThemeToggle />\n          {!hideBranding && (\n            <StyledBranding>\n              Powered by{\" \"}\n              <a\n                href=\"https://doccupine.com\"\n                target=\"_blank\"\n                rel=\"noopener noreferrer\"\n              >\n                Doccupine\n              </a>\n            </StyledBranding>\n          )}\n        </StyledFooter>\n      </StyledInner>\n    </StyledWrapper>\n  );\n}\n";
+export declare const siteGateComponentTemplate = "\"use client\";\nimport { useState, type FormEvent } from \"react\";\nimport styled from \"styled-components\";\nimport { Input, ThemeToggle } from \"cherry-styled-components\";\nimport { Lock } from \"lucide-react\";\nimport { Theme } from \"@/app/theme\";\nimport { Button } from \"@/components/layout/Button\";\nimport { Callout } from \"@/components/layout/Callout\";\nimport { config } from \"@/utils/config\";\n\nconst StyledWrapper = styled.div<{ theme: Theme }>`\n  min-height: 100dvh;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 20px;\n  background: ${({ theme }) => theme.colors.light};\n`;\n\nconst StyledInner = styled.div`\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 20px;\n  width: 100%;\n  max-width: 380px;\n`;\n\nconst StyledFooter = styled.div`\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 12px;\n`;\n\nconst StyledBranding = styled.p<{ theme: Theme }>`\n  margin: 0;\n  font-size: 14px;\n  color: ${({ theme }) => theme.colors.grayDark};\n\n  & a {\n    color: ${({ theme }) => theme.colors.accent};\n    font-weight: 700;\n    text-decoration: none;\n    transition: all 0.3s ease;\n  }\n\n  & a:hover {\n    color: ${({ theme }) => theme.colors.primary};\n  }\n`;\n\nconst StyledCard = styled.div<{ theme: Theme }>`\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 20px;\n  width: 100%;\n  padding: 40px 32px;\n  background: ${({ theme }) => theme.colors.light};\n  border: solid 1px ${({ theme }) => theme.colors.grayLight};\n  border-radius: ${({ theme }) => theme.spacing.radius.lg};\n  box-shadow: ${({ theme }) => theme.shadows.sm};\n  text-align: center;\n`;\n\nconst StyledIcon = styled.div<{ theme: Theme }>`\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 48px;\n  height: 48px;\n  border-radius: 50%;\n  color: ${({ theme }) => theme.colors.accent};\n  background: ${({ theme }) => theme.colors.grayLight};\n\n  & svg {\n    width: 22px;\n    height: 22px;\n  }\n`;\n\nconst StyledTitle = styled.h1<{ theme: Theme }>`\n  margin: 0;\n  font-size: 22px;\n  color: ${({ theme }) => theme.colors.accent};\n`;\n\nconst StyledLede = styled.p<{ theme: Theme }>`\n  margin: 0;\n  font-size: 15px;\n  color: ${({ theme }) => theme.colors.grayDark};\n`;\n\nconst StyledForm = styled.form`\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n  width: 100%;\n`;\n\nconst StyledAlert = styled.div`\n  width: 100%;\n  text-align: left;\n`;\n\nexport function SiteGate({ hideBranding }: { hideBranding?: boolean }) {\n  const [password, setPassword] = useState(\"\");\n  const [status, setStatus] = useState<\"idle\" | \"loading\" | \"error\">(\"idle\");\n\n  async function handleSubmit(event: FormEvent<HTMLFormElement>) {\n    event.preventDefault();\n    if (!password || status === \"loading\") return;\n\n    setStatus(\"loading\");\n    try {\n      const res = await fetch(\"/api/gate\", {\n        method: \"POST\",\n        headers: { \"Content-Type\": \"application/json\" },\n        body: JSON.stringify({ password }),\n      });\n      if (res.ok) {\n        window.location.reload();\n        return;\n      }\n      setStatus(\"error\");\n    } catch {\n      setStatus(\"error\");\n    }\n  }\n\n  return (\n    <StyledWrapper>\n      <StyledInner>\n        <StyledCard>\n          <StyledIcon>\n            <Lock />\n          </StyledIcon>\n          <StyledTitle>{config.name || \"Documentation\"}</StyledTitle>\n          <StyledLede>This site is password protected.</StyledLede>\n          <StyledForm onSubmit={handleSubmit} noValidate>\n            <Input\n              type=\"password\"\n              name=\"password\"\n              autoComplete=\"current-password\"\n              placeholder=\"Enter password\"\n              aria-label=\"Password\"\n              autoFocus\n              value={password}\n              $error={status === \"error\"}\n              $fullWidth\n              onChange={(e) => {\n                setPassword(e.target.value);\n                if (status === \"error\") setStatus(\"idle\");\n              }}\n            />\n            <Button\n              type=\"submit\"\n              fullWidth\n              disabled={status === \"loading\" || !password}\n            >\n              {status === \"loading\" ? \"Unlocking...\" : \"Enter\"}\n            </Button>\n          </StyledForm>\n          {status === \"error\" && (\n            <StyledAlert>\n              <Callout type=\"danger\">\n                <p>Incorrect password. Try again.</p>\n              </Callout>\n            </StyledAlert>\n          )}\n        </StyledCard>\n        <StyledFooter>\n          <ThemeToggle $shortcut />\n          {!hideBranding && (\n            <StyledBranding>\n              Powered by{\" \"}\n              <a\n                href=\"https://doccupine.com\"\n                target=\"_blank\"\n                rel=\"noopener noreferrer\"\n              >\n                Doccupine\n              </a>\n            </StyledBranding>\n          )}\n        </StyledFooter>\n      </StyledInner>\n    </StyledWrapper>\n  );\n}\n";

package/dist/templates/components/layout/SiteGate.js

@@ -171,7 +171,7 @@ export function SiteGate({ hideBranding }: { hideBranding?: boolean }) {
           )}
         </StyledCard>
         <StyledFooter>
-          <ThemeToggle />
+          <ThemeToggle $shortcut />
           {!hideBranding && (
             <StyledBranding>
               Powered by{" "}

package/dist/templates/mdx/ai-assistant.mdx.d.ts

@@ -1 +1 @@
-export declare const aiAssistantMdxTemplate = "---\ntitle: \"AI Assistant\"\ndescription: \"Integrate AI capabilities into your Doccupine documentation using OpenAI, Anthropic, or Google Gemini.\"\ndate: \"2026-02-19\"\ncategory: \"Configuration\"\ncategoryOrder: 3\norder: 8\n---\n\n# AI Assistant\n\nDoccupine supports AI integration to enhance your documentation experience. You can use OpenAI, Anthropic, or Google Gemini to power AI features in your documentation site. The AI assistant uses your documentation content as context, allowing users to ask questions about your docs and receive accurate answers based on the documentation.\n\n## Opening the Assistant\n\nOnce a provider is configured, an assistant button appears in the header. You can open and close the assistant from anywhere on the site by pressing <kbd>Command</kbd> + <kbd>I</kbd> (<kbd>Ctrl</kbd> + <kbd>I</kbd> on Windows). Press the same shortcut again to dismiss it.\n\n<Callout type=\"note\">\n  The keyboard shortcut is only active once you have configured an LLM provider, as described below.\n</Callout>\n\n## Setup\n\nTo enable AI features, create an `.env` file in the directory where your website is generated. By default, this is the `nextjs-app/` directory.\n\n## Configuration\n\nCreate an `.env` file with the following configuration options:\n\n```env\n# LLM Provider Configuration\n# Choose your preferred LLM provider: openai, anthropic, or google\nLLM_PROVIDER=openai\n\n# API Keys (set the one matching your provider)\nOPENAI_API_KEY=your_openai_api_key_here\nANTHROPIC_API_KEY=your_anthropic_api_key_here\nGOOGLE_API_KEY=your_google_api_key_here\n\n# Optional: Override default chat model (see your provider's docs for available models)\n# LLM_CHAT_MODEL=your-model-id\n\n# Optional: Override default embedding model (see your provider's docs for available models)\n# Note: Anthropic doesn't provide embeddings, will fallback to OpenAI\n# LLM_EMBEDDING_MODEL=your-embedding-model-id\n\n# Optional: Set temperature (0-1, default: 0)\n# LLM_TEMPERATURE=0\n```\n\n## Provider Selection\n\nSet `LLM_PROVIDER` to one of the following values:\n\n- `openai` - Use OpenAI's models\n- `anthropic` - Use Anthropic's models\n- `google` - Use Google's models\n\n## API Keys\n\nYou need to set the API key that matches your chosen provider:\n\n- For OpenAI: Set `OPENAI_API_KEY`\n- For Anthropic: Set `ANTHROPIC_API_KEY`\n- For Google: Set `GOOGLE_API_KEY`\n\n<Callout type=\"warning\">\n  Keep your API keys secure. Never commit your `.env` file to version control.\n</Callout>\n\n<Callout type=\"note\">\n  Doccupine automatically adds `.env` to your `.gitignore` file.\n</Callout>\n\n## Using Anthropic with OpenAI\n\nIf you want to use Anthropic as your LLM provider, you must also have an OpenAI API key set. Here's why:\n\n### The Situation\n\nAnthropic (Claude) does not provide an embeddings API. They only offer chat/completion models, not text embeddings.\n\nYour RAG (Retrieval-Augmented Generation) system has two components:\n\n- **Chat/Completion** - Generates answers, works with Anthropic.\n- **Embeddings** - Creates vector representations of text for search, Anthropic doesn't provide this.\n\nWhen using Anthropic as your `LLM_PROVIDER`, Doccupine will use Anthropic for chat/completion tasks, but will automatically fallback to OpenAI for embeddings. This means you need both API keys configured:\n\n```env\nLLM_PROVIDER=anthropic\nANTHROPIC_API_KEY=your_anthropic_api_key_here\nOPENAI_API_KEY=your_openai_api_key_here\n```\n\nThis hybrid approach allows you to leverage Anthropic's powerful chat models while still having access to embeddings functionality through OpenAI.\n\n## Default models\n\n| Provider  | Chat model                   | Embedding model          |\n| --------- | ---------------------------- | ------------------------ |\n| OpenAI    | `gpt-4.1-nano`               | `text-embedding-3-small` |\n| Anthropic | `claude-sonnet-4-5-20250929` | OpenAI fallback          |\n| Google    | `gemini-2.5-flash-lite`      | `gemini-embedding-001`   |\n\n## Optional Settings\n\n### Chat Model\n\nOverride the default chat model by uncommenting and setting `LLM_CHAT_MODEL`. You can use any available model from your chosen provider. For a complete list of available models, refer to the official documentation:\n\n- [OpenAI Models](https://platform.openai.com/docs/models)\n- [Anthropic Models](https://docs.anthropic.com/claude/docs/models-overview)\n- [Google Gemini Models](https://ai.google.dev/models/gemini)\n\n### Embedding Model\n\nOverride the default embedding model by uncommenting and setting `LLM_EMBEDDING_MODEL`. For a complete list of available embedding models, refer to the official documentation:\n\n- [OpenAI Embeddings](https://platform.openai.com/docs/guides/embeddings)\n- [Google Gemini Embeddings](https://ai.google.dev/gemini-api/docs/embeddings)\n- **Anthropic**: Anthropic doesn't provide embeddings. If you use Anthropic as your provider, Doccupine will fallback to OpenAI for embeddings.\n\n### Temperature\n\nControl the randomness of AI responses by setting `LLM_TEMPERATURE` to a value between 0 and 1:\n\n- `0` - More deterministic and focused responses (default)\n- `1` - More creative and varied responses";
+export declare const aiAssistantMdxTemplate = "---\ntitle: \"AI Assistant\"\ndescription: \"Integrate AI capabilities into your Doccupine documentation using OpenAI, Anthropic, or Google Gemini.\"\ndate: \"2026-02-19\"\ncategory: \"Configuration\"\ncategoryOrder: 3\norder: 8\n---\n\n# AI Assistant\n\nDoccupine supports AI integration to enhance your documentation experience. You can use OpenAI, Anthropic, or Google Gemini to power AI features in your documentation site. The AI assistant uses your documentation content as context, allowing users to ask questions about your docs and receive accurate answers based on the documentation.\n\n## Opening the Assistant\n\nOnce a provider is configured, an assistant button appears in the header. You can open and close the assistant from anywhere on the site by pressing <kbd>Command</kbd> + <kbd>I</kbd> (<kbd>Ctrl</kbd> + <kbd>I</kbd> on Windows). Press the same shortcut again to dismiss it.\n\n<Callout type=\"note\">\n  The keyboard shortcut is only active once you have configured an LLM provider, as described below.\n</Callout>\n\n## Setup\n\nTo enable AI features, create an `.env` file in the directory where your website is generated. By default, this is the `nextjs-app/` directory.\n\n## Configuration\n\nCreate an `.env` file with the following configuration options:\n\n```env\n# LLM Provider Configuration\n# Choose your preferred LLM provider: openai, anthropic, or google\nLLM_PROVIDER=openai\n\n# API Keys (set the one matching your provider)\nOPENAI_API_KEY=your_openai_api_key_here\nANTHROPIC_API_KEY=your_anthropic_api_key_here\nGOOGLE_API_KEY=your_google_api_key_here\n\n# Optional: Override default chat model (see your provider's docs for available models)\n# LLM_CHAT_MODEL=your-model-id\n\n# Optional: Override default embedding model (see your provider's docs for available models)\n# Note: Anthropic doesn't provide embeddings, will fallback to OpenAI\n# LLM_EMBEDDING_MODEL=your-embedding-model-id\n\n# Optional: Set temperature (0-1, default: 0)\n# LLM_TEMPERATURE=0\n\n# Optional: Embedding dimensions for the prebuilt search index (default: 512)\n# Doc vectors are truncated to this many dimensions and stored as int8 to keep\n# the search index small. Lower = smaller index, slightly lower recall.\n# Rebuild after changing this.\n# LLM_EMBEDDING_DIMS=512\n```\n\n## Provider Selection\n\nSet `LLM_PROVIDER` to one of the following values:\n\n- `openai` - Use OpenAI's models\n- `anthropic` - Use Anthropic's models\n- `google` - Use Google's models\n\n## API Keys\n\nYou need to set the API key that matches your chosen provider:\n\n- For OpenAI: Set `OPENAI_API_KEY`\n- For Anthropic: Set `ANTHROPIC_API_KEY`\n- For Google: Set `GOOGLE_API_KEY`\n\n<Callout type=\"warning\">\n  Keep your API keys secure. Never commit your `.env` file to version control.\n</Callout>\n\n<Callout type=\"note\">\n  Doccupine automatically adds `.env` to your `.gitignore` file.\n</Callout>\n\n## Using Anthropic with OpenAI\n\nIf you want to use Anthropic as your LLM provider, you must also have an OpenAI API key set. Here's why:\n\n### The Situation\n\nAnthropic (Claude) does not provide an embeddings API. They only offer chat/completion models, not text embeddings.\n\nYour RAG (Retrieval-Augmented Generation) system has two components:\n\n- **Chat/Completion** - Generates answers, works with Anthropic.\n- **Embeddings** - Creates vector representations of text for search, Anthropic doesn't provide this.\n\nWhen using Anthropic as your `LLM_PROVIDER`, Doccupine will use Anthropic for chat/completion tasks, but will automatically fallback to OpenAI for embeddings. This means you need both API keys configured:\n\n```env\nLLM_PROVIDER=anthropic\nANTHROPIC_API_KEY=your_anthropic_api_key_here\nOPENAI_API_KEY=your_openai_api_key_here\n```\n\nThis hybrid approach allows you to leverage Anthropic's powerful chat models while still having access to embeddings functionality through OpenAI.\n\n## Default models\n\n| Provider  | Chat model                   | Embedding model          |\n| --------- | ---------------------------- | ------------------------ |\n| OpenAI    | `gpt-4.1-nano`               | `text-embedding-3-small` |\n| Anthropic | `claude-sonnet-4-5-20250929` | OpenAI fallback          |\n| Google    | `gemini-2.5-flash-lite`      | `gemini-embedding-001`   |\n\n## Optional Settings\n\n### Chat Model\n\nOverride the default chat model by uncommenting and setting `LLM_CHAT_MODEL`. You can use any available model from your chosen provider. For a complete list of available models, refer to the official documentation:\n\n- [OpenAI Models](https://platform.openai.com/docs/models)\n- [Anthropic Models](https://docs.anthropic.com/claude/docs/models-overview)\n- [Google Gemini Models](https://ai.google.dev/models/gemini)\n\n### Embedding Model\n\nOverride the default embedding model by uncommenting and setting `LLM_EMBEDDING_MODEL`. For a complete list of available embedding models, refer to the official documentation:\n\n- [OpenAI Embeddings](https://platform.openai.com/docs/guides/embeddings)\n- [Google Gemini Embeddings](https://ai.google.dev/gemini-api/docs/embeddings)\n- **Anthropic**: Anthropic doesn't provide embeddings. If you use Anthropic as your provider, Doccupine will fallback to OpenAI for embeddings.\n\n### Temperature\n\nControl the randomness of AI responses by setting `LLM_TEMPERATURE` to a value between 0 and 1:\n\n- `0` - More deterministic and focused responses (default)\n- `1` - More creative and varied responses\n\n### Embedding Dimensions\n\nControl the size of the prebuilt search index by setting `LLM_EMBEDDING_DIMS` (default: 512). Doc vectors are truncated to this many dimensions and stored as int8, keeping `services/mcp/docs-index.json` small so large doc sets don't stall the AI chat on serverless cold starts.\n\n- Lower values produce a smaller index with slightly lower search recall.\n- Values greater than or equal to the model's native dimension keep full precision.\n\nThis value must match between build time and runtime. A mismatch forces Doccupine to re-embed your docs at runtime, so rebuild or redeploy your site after changing it.";

package/dist/templates/mdx/ai-assistant.mdx.js

@@ -46,6 +46,12 @@ GOOGLE_API_KEY=your_google_api_key_here
 
 # Optional: Set temperature (0-1, default: 0)
 # LLM_TEMPERATURE=0
+
+# Optional: Embedding dimensions for the prebuilt search index (default: 512)
+# Doc vectors are truncated to this many dimensions and stored as int8 to keep
+# the search index small. Lower = smaller index, slightly lower recall.
+# Rebuild after changing this.
+# LLM_EMBEDDING_DIMS=512
 \`\`\`
 
 ## Provider Selection
@@ -126,4 +132,13 @@ Override the default embedding model by uncommenting and setting \`LLM_EMBEDDING
 Control the randomness of AI responses by setting \`LLM_TEMPERATURE\` to a value between 0 and 1:
 
 - \`0\` - More deterministic and focused responses (default)
-- \`1\` - More creative and varied responses`;
+- \`1\` - More creative and varied responses
+
+### Embedding Dimensions
+
+Control the size of the prebuilt search index by setting \`LLM_EMBEDDING_DIMS\` (default: 512). Doc vectors are truncated to this many dimensions and stored as int8, keeping \`services/mcp/docs-index.json\` small so large doc sets don't stall the AI chat on serverless cold starts.
+
+- Lower values produce a smaller index with slightly lower search recall.
+- Values greater than or equal to the model's native dimension keep full precision.
+
+This value must match between build time and runtime. A mismatch forces Doccupine to re-embed your docs at runtime, so rebuild or redeploy your site after changing it.`;

package/dist/templates/mdx/globals.mdx.d.ts

@@ -1 +1 @@
-export declare const globalsMdxTemplate = "---\ntitle: \"Globals\"\ndescription: \"Configure global settings for your documentation.\"\ndate: \"2026-02-19\"\ncategory: \"Configuration\"\ncategoryOrder: 3\ncategoryIcon: \"settings\"\norder: 1\n---\n\n# Global Configuration\n\nUse a `config.json` file to define project\u2011wide metadata for your documentation site. These values are applied to every generated page unless a page overrides them in its own frontmatter.\n\n## config.json\n\nPlace a `config.json` at your project root (the same directory where you execute `npx doccupine`) to define global metadata for your documentation site.\n\n```json\n{\n  \"name\": \"Doccupine\",\n  \"description\": \"Doccupine is a free and open-source documentation platform. Write MDX, get a production-ready site with AI chat, built-in components, and an MCP server - in one command.\",\n  \"icon\": \"https://docs.doccupine.com/favicon.ico\",\n  \"image\": \"https://docs.doccupine.com/preview.png\",\n  \"url\": \"https://docs.example.com\"\n}\n```\n\n## Fields\n\nAll fields are optional. Doccupine uses sensible defaults when a field is not set.\n\n- **name**: The primary name of your documentation website. Displayed in the site title and used in various UI elements.\n- **description**: A concise summary of your project, used in site metadata (e.g., HTML meta description) and social previews when not overridden.\n- **icon**: The favicon for your site. You can provide a full URL or a relative path to an asset in your project.\n- **image**: The Open Graph image used when links to your docs are shared on social platforms. Accepts a full URL or a relative path.\n- **url**: The public URL of your deployed site. Used as the base URL for `sitemap.xml` and `robots.txt`. When omitted, no sitemap is generated. Can be overridden at deploy time with the `NEXT_PUBLIC_SITE_URL` environment variable.\n\n## Per-page overrides\n\nAny page can override global values by defining the matching key in its frontmatter. When present, the page's value takes precedence over `config.json` for that page only.\n\n| Frontmatter field | Overrides     | Effect                                                      |\n| ----------------- | ------------- | ----------------------------------------------------------- |\n| **title**         | -             | Page title in metadata and Open Graph                       |\n| **description**   | `description` | Meta description and Open Graph description                 |\n| **name**          | `name`        | Site name shown in the title suffix (e.g. \"Page - My Docs\") |\n| **icon**          | `icon`        | Favicon for this page                                       |\n| **image**         | `image`       | Open Graph preview image                                    |\n| **section**       | -             | Assigns the page to a [section](/sections)                  |\n| **sectionOrder**  | -             | Controls section position in the tab bar                    |\n| **sectionLabel**  | -             | Renames the default \"Docs\" tab (use on `index.mdx`)         |\n\n<Callout type=\"note\">\n  If a key is not specified in a page's frontmatter, Doccupine falls back to the corresponding value in `config.json`.\n</Callout>\n\nExample frontmatter in an `.mdx` file:\n\n```text\n---\ntitle: \"My Feature\"\ndescription: \"A focused description just for this page.\"\nname: \"My Product Docs\"\nicon: \"/custom-favicon.ico\"\nimage: \"/custom-preview.png\"\ndate: \"2026-02-19\"\ncategory: \"Guides\"\n---\n```";
+export declare const globalsMdxTemplate = "---\ntitle: \"Globals\"\ndescription: \"Configure global settings for your documentation.\"\ndate: \"2026-02-19\"\ncategory: \"Configuration\"\ncategoryOrder: 3\ncategoryIcon: \"settings\"\norder: 1\n---\n\n# Global Configuration\n\nUse a `config.json` file to define project\u2011wide metadata for your documentation site. These values are applied to every generated page unless a page overrides them in its own frontmatter.\n\n## config.json\n\nPlace a `config.json` at your project root (the same directory where you execute `npx doccupine`) to define global metadata for your documentation site.\n\n```json\n{\n  \"name\": \"Doccupine\",\n  \"description\": \"Doccupine is a free and open-source documentation platform. Write MDX, get a production-ready site with AI chat, built-in components, and an MCP server - in one command.\",\n  \"icon\": \"https://docs.doccupine.com/favicon.ico\",\n  \"image\": \"https://docs.doccupine.com/preview.png\",\n  \"url\": \"https://docs.doccupine.com\"\n}\n```\n\n## Fields\n\nAll fields are optional. Doccupine uses sensible defaults when a field is not set.\n\n- **name**: The primary name of your documentation website. Displayed in the site title and used in various UI elements.\n- **description**: A concise summary of your project, used in site metadata (e.g., HTML meta description) and social previews when not overridden.\n- **icon**: The favicon for your site. You can provide a full URL or a relative path to an asset in your project.\n- **image**: The Open Graph image used when links to your docs are shared on social platforms. Accepts a full URL or a relative path.\n- **url**: The public URL of your deployed site. Used as the base URL for `sitemap.xml` and `robots.txt`. When omitted, no sitemap is generated. Can be overridden at deploy time with the `NEXT_PUBLIC_SITE_URL` environment variable.\n\n## Per-page overrides\n\nAny page can override global values by defining the matching key in its frontmatter. When present, the page's value takes precedence over `config.json` for that page only.\n\n| Frontmatter field | Overrides     | Effect                                                      |\n| ----------------- | ------------- | ----------------------------------------------------------- |\n| **title**         | -             | Page title in metadata and Open Graph                       |\n| **description**   | `description` | Meta description and Open Graph description                 |\n| **name**          | `name`        | Site name shown in the title suffix (e.g. \"Page - My Docs\") |\n| **icon**          | `icon`        | Favicon for this page                                       |\n| **image**         | `image`       | Open Graph preview image                                    |\n| **section**       | -             | Assigns the page to a [section](/sections)                  |\n| **sectionOrder**  | -             | Controls section position in the tab bar                    |\n| **sectionLabel**  | -             | Renames the default \"Docs\" tab (use on `index.mdx`)         |\n\n<Callout type=\"note\">\n  If a key is not specified in a page's frontmatter, Doccupine falls back to the corresponding value in `config.json`.\n</Callout>\n\nExample frontmatter in an `.mdx` file:\n\n```text\n---\ntitle: \"My Feature\"\ndescription: \"A focused description just for this page.\"\nname: \"My Product Docs\"\nicon: \"/custom-favicon.ico\"\nimage: \"/custom-preview.png\"\ndate: \"2026-02-19\"\ncategory: \"Guides\"\n---\n```";

package/dist/templates/mdx/globals.mdx.js

@@ -1,4 +1,4 @@
-import { DEFAULT_DESCRIPTION, DEFAULT_FAVICON, DEFAULT_OG_IMAGE, } from "../../lib/constants.js";
+import { DEFAULT_DESCRIPTION, DEFAULT_FAVICON, DEFAULT_OG_IMAGE, DEFAULT_URL, } from "../../lib/constants.js";
 export const globalsMdxTemplate = `---
 title: "Globals"
 description: "Configure global settings for your documentation."
@@ -23,7 +23,7 @@ Place a \`config.json\` at your project root (the same directory where you execu
   "description": "${DEFAULT_DESCRIPTION}",
   "icon": "${DEFAULT_FAVICON}",
   "image": "${DEFAULT_OG_IMAGE}",
-  "url": "https://docs.example.com"
+  "url": "${DEFAULT_URL}"
 }
 \`\`\`
 

package/dist/templates/mdx/model-context-protocol.mdx.d.ts

@@ -1 +1 @@
-export declare const mcpMdxTemplate = "---\ntitle: \"Model Context Protocol\"\ndescription: \"Connect your Doccupine documentation to AI tools with an MCP server for enhanced AI-powered documentation search.\"\ndate: \"2026-02-19\"\ncategory: \"Configuration\"\ncategoryOrder: 3\norder: 9\n---\n\n# Model Context Protocol\n\nConnect your documentation to AI tools with a hosted MCP server.\n\nDoccupine automatically generates a Model Context Protocol (MCP) server from your documentation, making your content accessible to AI applications like Claude, Cursor, VS Code, and other MCP-compatible tools. Your MCP server exposes semantic search capabilities, allowing AI tools to query your documentation directly and provide accurate, context-aware answers.\n\n<Callout type=\"warning\">\n  The MCP server requires the [AI Assistant](/ai-assistant) to be configured. Make sure you have set up your LLM provider and API keys before using the MCP server.\n</Callout>\n\n## About MCP servers\n\nThe Model Context Protocol (MCP) is an open protocol that creates standardized connections between AI applications and external services, like documentation. Doccupine generates an MCP server from your documentation, preparing your content for the broader AI ecosystem where any MCP client can connect to your documentation.\n\nYour MCP server exposes search and retrieval tools for AI applications to query your documentation. Your users must connect your MCP server to their preferred AI tools to access your documentation.\n\n### How MCP servers work\n\nWhen an AI tool has your documentation MCP server connected, the AI tool can search your documentation directly instead of making a generic web search in response to a user's prompt. Your MCP server provides access to all indexed content from your documentation site.\n\n- The LLM can proactively search your documentation while generating a response, not just when explicitly asked.\n- The LLM determines when to use the search tool based on the context of the conversation and the relevance of your documentation.\n- Each tool call happens during the generation process, so the LLM searches up-to-date information from your documentation to generate its response.\n\n### MCP compared to web search\n\nAI tools can search the web, but MCP provides distinct advantages for documentation.\n\n- **Direct source access**: Web search depends on what search engines have indexed, which may be stale or incomplete. MCP searches your current indexed documentation directly.\n- **Integrated workflow**: MCP allows the AI to search during response generation rather than performing a separate web search.\n- **Semantic search**: MCP uses vector embeddings for semantic similarity search, providing more relevant results than keyword-based web search.\n- **No search noise**: SEO and ranking algorithms influence web search results. MCP goes straight to your documentation content.\n\n## Access your MCP server\n\nDoccupine automatically generates an MCP server for your documentation and hosts it at your documentation URL with the `/api/mcp` path. For example, if your documentation is hosted at `https://example.com`, your MCP server is available at `https://example.com/api/mcp`.\n\nThe MCP server provides both a GET endpoint to discover available tools and a POST endpoint to execute tool calls.\n\n### Authentication\n\nYou can optionally protect your MCP server with an API key by setting the `DOCS_API_KEY` environment variable in your `.env` file:\n\n```bash\nDOCS_API_KEY=your-secret-key\n```\n\nWhen `DOCS_API_KEY` is set, all requests to `/api/mcp` must include an `Authorization` header with a Bearer token:\n\n```text\nAuthorization: Bearer your-secret-key\n```\n\nRequests without a valid token receive a `401 Unauthorized` response. When `DOCS_API_KEY` is not set, the MCP server is publicly accessible with no authentication required.\n\n<Callout type=\"note\">\n  Authentication only applies to the `/api/mcp` endpoint. The `/api/rag` endpoint used by the built-in AI Assistant chat is not affected by this setting.\n</Callout>\n\n### API Endpoints\n\n#### GET /api/mcp\n\nReturns information about available tools and the current index status.\n\n**Response:**\n\n```json\n{\n  \"tools\": [\n    {\n      \"name\": \"search_docs\",\n      \"description\": \"Search through the documentation content using semantic search...\",\n      \"inputSchema\": { ... }\n    },\n    ...\n  ],\n  \"index\": {\n    \"ready\": true,\n    \"chunkCount\": 150\n  }\n}\n```\n\n#### POST /api/mcp\n\nExecutes an MCP tool call.\n\n**Request Body:**\n\n```json\n{\n  \"tool\": \"search_docs\",\n  \"params\": {\n    \"query\": \"how to deploy\",\n    \"limit\": 6\n  }\n}\n```\n\n**Response:**\n\n```json\n{\n  \"content\": [\n    {\n      \"path\": \"app/deployment-and-hosting/page.tsx\",\n      \"uri\": \"docs://deployment-and-hosting\",\n      \"score\": \"0.892\",\n      \"text\": \"Deploy your Doccupine site as a Next.js application...\"\n    },\n    ...\n  ]\n}\n```\n\n## Available Tools\n\nYour MCP server exposes three tools for interacting with your documentation:\n\n### search_docs\n\nSearch through the documentation content using semantic search. Returns relevant chunks of documentation based on the query using vector embeddings and cosine similarity.\n\n**Parameters:**\n\n- `query` (required): The search query to find relevant documentation\n- `limit` (optional): Maximum number of results to return (default: 6)\n\n**Example:**\n\n```json\n{\n  \"tool\": \"search_docs\",\n  \"params\": {\n    \"query\": \"how to configure AI assistant\",\n    \"limit\": 5\n  }\n}\n```\n\n### get_doc\n\nGet the full content of a specific documentation page by its path.\n\n**Parameters:**\n\n- `path` (required): The file path to the documentation page (e.g., `app/getting-started/page.tsx`)\n\n**Example:**\n\n```json\n{\n  \"tool\": \"get_doc\",\n  \"params\": {\n    \"path\": \"app/deployment-and-hosting/page.tsx\"\n  }\n}\n```\n\n### list_docs\n\nList all available documentation pages, optionally filtered by directory.\n\n**Parameters:**\n\n- `directory` (optional): Optional directory to filter results (e.g., `components`)\n\n**Example:**\n\n```json\n{\n  \"tool\": \"list_docs\",\n  \"params\": {\n    \"directory\": \"configuration\"\n  }\n}\n```\n\n## How it works\n\nDoccupine's MCP server uses semantic search powered by vector embeddings to provide accurate, context-aware search results.\n\n### Indexing Process\n\nDoccupine runs this pipeline at build time and ships the resulting vectors with your site, so the server loads a ready-made index instead of re-embedding your docs on every cold start.\n\n1. **Document Discovery**: Doccupine scans your `app/` directory for all `page.tsx`, `page.ts`, `page.jsx`, and `page.js` files.\n2. **Content Extraction**: It extracts content from `const content =` declarations in your page files.\n3. **Chunking**: Large documents are split into chunks of approximately 800 characters with 100 character overlap for better context preservation.\n4. **Embedding Generation**: Each chunk is converted to a vector embedding using your configured LLM provider's embedding model.\n5. **Compaction**: Each vector is truncated to `LLM_EMBEDDING_DIMS` dimensions (default 512) and quantized to int8, keeping the index roughly 20x smaller than raw floats so large doc sets don't stall the chat on cold start.\n6. **Index Building**: The compact embeddings are written to `services/mcp/docs-index.json`, bundled into your serverless functions, and loaded into memory at runtime for fast similarity search.\n\n### Search Process\n\n1. **Query Embedding**: The search query is converted to a vector embedding using the same embedding model.\n2. **Similarity Calculation**: Cosine similarity is calculated between the query embedding and all document chunk embeddings.\n3. **Ranking**: Results are sorted by similarity score (highest first).\n4. **Response**: The top N results (based on the limit parameter) are returned with their paths, URIs, scores, and text content.\n\n<Callout type=\"note\">\n  Embeddings are precomputed at build time and bundled with your site, so the server loads the ready-made index into memory on startup instead of re-embedding your docs on every cold start. It only embeds at runtime when the precomputed index is missing or was built with a different provider or model. When you update your documentation, rebuild or redeploy your site to regenerate the index with fresh content.\n</Callout>\n\n## Use your MCP server\n\nYour users must connect your MCP server to their preferred AI tools.\n\n1. Make your MCP server URL publicly available.\n2. Users copy your MCP server URL and add it to their tools.\n3. Users access your documentation through their tools.\n\nThese are some of the ways you can help your users connect to your MCP server:\n\n<Tabs>\n  <TabContent title=\"Claude\">\n    <Steps>\n      <Step title=\"Get your MCP server URL.\">\n        Your MCP server URL is available at `https://your-domain.com/api/mcp`.\n      </Step>\n      <Step title=\"Publish your MCP server URL for your users.\">\n        Create a guide for your users that includes your MCP server URL and the steps to connect it to Claude.\n        1. Navigate to the [Connectors](https://claude.ai/settings/connectors) page in the Claude settings.\n        2. Select **Add custom connector**.\n        3. Add your MCP server name and URL.\n        4. Select **Add**.\n        5. When using Claude, select the attachments button (the plus icon).\n        6. Select your MCP server.\n      </Step>\n    </Steps>\n    See the [Model Context Protocol documentation](https://modelcontextprotocol.io/docs/tutorials/use-remote-mcp-server#connecting-to-a-remote-mcp-server) for more details.\n  </TabContent>\n  <TabContent title=\"Claude Code\">\n    <Steps>\n      <Step title=\"Get your MCP server URL.\">\n        Your MCP server URL is available at `https://your-domain.com/api/mcp`.\n      </Step>\n      <Step title=\"Publish your MCP server URL for your users.\">\n        Create a guide for your users that includes your MCP server URL and the command to connect it to Claude Code.\n        ```bash\n        claude mcp add --transport http <name> <url>\n        ```\n      </Step>\n    </Steps>\n    See the [Claude Code documentation](https://docs.anthropic.com/en/docs/claude-code/mcp#installing-mcp-servers) for more details.\n  </TabContent>\n  <TabContent title=\"Cursor\">\n    <Steps>\n      <Step title=\"Get your MCP server URL.\">\n        Your MCP server URL is available at `https://your-domain.com/api/mcp`.\n      </Step>\n      <Step title=\"Publish your MCP server URL for your users.\">\n        Create a guide for your users that includes your MCP server URL and the steps to connect it to Cursor.\n        1. Use <kbd>Command</kbd> + <kbd>Shift</kbd> + <kbd>P</kbd> (<kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>P</kbd> on Windows) to open the command palette.\n        2. Search for \"Open MCP settings\".\n        3. Select **Add custom MCP**. This opens the `mcp.json` file.\n        4. In `mcp.json`, configure your server:\n        ```json\n        {\n          \"mcpServers\": {\n            \"<your-mcp-server-name>\": {\n              \"url\": \"<your-mcp-server-url>\"\n            }\n          }\n        }\n        ```\n      </Step>\n    </Steps>\n    See the [Cursor documentation](https://docs.cursor.com/en/context/mcp#installing-mcp-servers) for more details.\n  </TabContent>\n  <TabContent title=\"VS Code\">\n    <Steps>\n      <Step title=\"Get your MCP server URL.\">\n        Your MCP server URL is available at `https://your-domain.com/api/mcp`.\n      </Step>\n      <Step title=\"Publish your MCP server URL for your users.\">\n        Create a guide for your users that includes your MCP server URL and the steps to connect it to VS Code.\n        1. Create a `.vscode/mcp.json` file.\n        2. In `mcp.json`, configure your server:\n        ```json\n        {\n          \"servers\": {\n            \"<your-mcp-server-name>\": {\n              \"type\": \"http\",\n              \"url\": \"<your-mcp-server-url>\"\n            }\n          }\n        }\n        ```\n      </Step>\n    </Steps>\n    See the [VS Code documentation](https://code.visualstudio.com/docs/copilot/chat/mcp-servers) for more details.\n  </TabContent>\n</Tabs>\n\n## Requirements\n\nTo use the MCP server, you need to have the AI Assistant configured. The MCP server uses the same LLM configuration for generating embeddings.\n\n| Variable       | Required | Description                                                  |\n| -------------- | -------- | ------------------------------------------------------------ |\n| `LLM_PROVIDER` | Yes      | Your LLM provider (`openai`, `anthropic`, or `google`)       |\n| `DOCS_API_KEY` | No       | When set, requires Bearer token authentication on `/api/mcp` |\n\n<Callout type=\"warning\">\n  The MCP server requires an LLM provider to be configured for generating embeddings. Make sure you have set up your AI Assistant with a valid API key before using the MCP server.\n</Callout>\n\nSee the [AI Assistant documentation](/ai-assistant) for configuration details.\n\n## Content indexing\n\nYour MCP server searches content extracted from your page files. The server automatically discovers and indexes all `page.tsx`, `page.ts`, `page.jsx`, and `page.js` files in your `app/` directory.\n\n### Content extraction\n\nThe server extracts content from `const content =` declarations in your page files. Make sure your documentation pages export a `content` constant with your markdown or MDX content.\n\n**Example:**\n\n```tsx\nexport const content = `\n# Getting Started\n\nWelcome to the documentation...\n`;\n```\n\n### Excluded directories\n\nThe following directories are automatically excluded from indexing:\n\n- `node_modules`\n- `.next`\n- `.git`\n- `api`\n\n## Troubleshooting\n\n### Index not building\n\nIf the index is not building, check:\n\n- Your LLM provider is configured correctly in your `.env` file\n- You have a valid API key set\n- Your documentation pages export a `content` constant\n\n### No search results\n\nIf searches return no results:\n\n- Verify that your documentation pages are in the `app/` directory\n- Check that your pages export a `content` constant\n- Ensure the index has been built (check the `index.ready` status via GET `/api/mcp`)\n\n### Slow search performance\n\nSearches use the precomputed in-memory index and are fast. The first search is only slow when the app has to embed your docs at runtime, which happens when the precomputed index is missing or was built with a different provider or model. If performance is consistently slow:\n\n- Confirm the build ran the doc-index precompute step (the `build` script runs it before `next build`) with a valid API key\n- Check your embedding API response times\n- Consider reducing the number of documentation pages\n- Verify your server has sufficient memory\n\n### Cloudflare blocking MCP requests\n\nIf you use Cloudflare as a proxy in front of your documentation site, Cloudflare's bot protection may block server-to-server requests from AI tools like Claude.ai. This can cause MCP connections to fail silently or return errors.\n\nThere are two ways to resolve this:\n\n**Option 1: Disable the Cloudflare proxy (simplest)**\n\nIn your Cloudflare DNS settings, click the orange cloud icon next to your domain record to switch it to \"DNS only\" (grey cloud). This disables Cloudflare's proxy and bot protection for your domain, allowing MCP requests to reach your server directly.\n\n**Option 2: Add a Cloudflare WAF exception (keeps your custom domain proxied)**\n\nIn Cloudflare dashboard:\n\n1. Go to **Security > WAF**.\n2. Click **Create rule**.\n3. Set it up as:\n   - **Rule name**: Allow MCP API\n   - **Field**: URI Path\n   - **Operator**: starts with\n   - **Value**: `/api/mcp`\n   - **Action**: Skip -- then check all remaining custom rules, Rate limiting rules, and Bot Fight Mode / Super Bot Fight Mode.\n4. Deploy the rule and make sure it is ordered first (above other rules).\n\n<Callout type=\"warning\">\n  Also check **Security > Bots** in your Cloudflare dashboard. If \"Bot Fight Mode\" or \"Super Bot Fight Mode\" is enabled, that is very likely what is blocking server-to-server requests from AI tools.\n</Callout>\n\n## Best practices\n\n- **Keep content up-to-date**: Rebuild or redeploy your site after updating documentation to regenerate the index with fresh content.\n- **Use descriptive queries**: More specific queries yield better semantic search results.\n- **Monitor index status**: Use the GET endpoint to check if your index is ready before performing searches.\n- **Optimize content structure**: Well-structured markdown with clear headings improves search relevance.";
+export declare const mcpMdxTemplate = "---\ntitle: \"Model Context Protocol\"\ndescription: \"Connect your Doccupine documentation to AI tools with an MCP server for enhanced AI-powered documentation search.\"\ndate: \"2026-02-19\"\ncategory: \"Configuration\"\ncategoryOrder: 3\norder: 9\n---\n\n# Model Context Protocol\n\nConnect your documentation to AI tools with a hosted MCP server.\n\nDoccupine automatically generates a Model Context Protocol (MCP) server from your documentation, making your content accessible to AI applications like Claude, Cursor, VS Code, and other MCP-compatible tools. Your MCP server exposes semantic search capabilities, allowing AI tools to query your documentation directly and provide accurate, context-aware answers.\n\n<Callout type=\"warning\">\n  The MCP server requires the [AI Assistant](/ai-assistant) to be configured. Make sure you have set up your LLM provider and API keys before using the MCP server.\n</Callout>\n\n## About MCP servers\n\nThe Model Context Protocol (MCP) is an open protocol that creates standardized connections between AI applications and external services, like documentation. Doccupine generates an MCP server from your documentation, preparing your content for the broader AI ecosystem where any MCP client can connect to your documentation.\n\nYour MCP server exposes search and retrieval tools for AI applications to query your documentation. Your users must connect your MCP server to their preferred AI tools to access your documentation.\n\n### How MCP servers work\n\nWhen an AI tool has your documentation MCP server connected, the AI tool can search your documentation directly instead of making a generic web search in response to a user's prompt. Your MCP server provides access to all indexed content from your documentation site.\n\n- The LLM can proactively search your documentation while generating a response, not just when explicitly asked.\n- The LLM determines when to use the search tool based on the context of the conversation and the relevance of your documentation.\n- Each tool call happens during the generation process, so the LLM searches up-to-date information from your documentation to generate its response.\n\n### MCP compared to web search\n\nAI tools can search the web, but MCP provides distinct advantages for documentation.\n\n- **Direct source access**: Web search depends on what search engines have indexed, which may be stale or incomplete. MCP searches your current indexed documentation directly.\n- **Integrated workflow**: MCP allows the AI to search during response generation rather than performing a separate web search.\n- **Semantic search**: MCP uses vector embeddings for semantic similarity search, providing more relevant results than keyword-based web search.\n- **No search noise**: SEO and ranking algorithms influence web search results. MCP goes straight to your documentation content.\n\n## Access your MCP server\n\nDoccupine automatically generates an MCP server for your documentation and hosts it at your documentation URL with the `/api/mcp` path. For example, if your documentation is hosted at `https://example.com`, your MCP server is available at `https://example.com/api/mcp`.\n\nThe MCP server provides both a GET endpoint to discover available tools and a POST endpoint to execute tool calls.\n\n### Authentication\n\nYou can optionally protect your MCP server with an API key by setting the `DOCS_API_KEY` environment variable in your `.env` file:\n\n```bash\nDOCS_API_KEY=your-secret-key\n```\n\nWhen `DOCS_API_KEY` is set, all requests to `/api/mcp` must include an `Authorization` header with a Bearer token:\n\n```text\nAuthorization: Bearer your-secret-key\n```\n\nRequests without a valid token receive a `401 Unauthorized` response. When `DOCS_API_KEY` is not set, the MCP server is publicly accessible with no authentication required.\n\n<Callout type=\"note\">\n  The `DOCS_API_KEY` check only applies to the `/api/mcp` endpoint. It does not affect the `/api/rag` endpoint used by the built-in AI Assistant chat. To gate the entire site (including the chat and search APIs) behind a shared password instead, see the [Authentication](/authentication) documentation.\n</Callout>\n\n### Rate limiting\n\nTool calls to `POST /api/mcp` are rate limited per client IP address. When a client exceeds the limit, the server responds with `429 Too Many Requests` and a `Retry-After` header indicating how many seconds to wait before retrying.\n\n### API Endpoints\n\n#### GET /api/mcp\n\nReturns information about available tools and the current index status.\n\n**Response:**\n\n```json\n{\n  \"tools\": [\n    {\n      \"name\": \"search_docs\",\n      \"description\": \"Search through the documentation content using semantic search...\",\n      \"inputSchema\": { ... }\n    },\n    ...\n  ],\n  \"index\": {\n    \"ready\": true,\n    \"chunkCount\": 150\n  }\n}\n```\n\n#### POST /api/mcp\n\nExecutes an MCP tool call.\n\n**Request Body:**\n\n```json\n{\n  \"tool\": \"search_docs\",\n  \"params\": {\n    \"query\": \"how to deploy\",\n    \"limit\": 6\n  }\n}\n```\n\n**Response:**\n\n```json\n{\n  \"content\": [\n    {\n      \"path\": \"app/deployment-and-hosting/page.tsx\",\n      \"uri\": \"docs://deployment-and-hosting\",\n      \"score\": \"0.892\",\n      \"text\": \"Deploy your Doccupine site as a Next.js application...\"\n    },\n    ...\n  ]\n}\n```\n\n## Available Tools\n\nYour MCP server exposes three tools for interacting with your documentation:\n\n### search_docs\n\nSearch through the documentation content using semantic search. Returns relevant chunks of documentation based on the query using vector embeddings and cosine similarity.\n\n**Parameters:**\n\n- `query` (required): The search query to find relevant documentation\n- `limit` (optional): Maximum number of results to return (default: 6)\n\n**Example:**\n\n```json\n{\n  \"tool\": \"search_docs\",\n  \"params\": {\n    \"query\": \"how to configure AI assistant\",\n    \"limit\": 5\n  }\n}\n```\n\n### get_doc\n\nGet the full content of a specific documentation page by its path.\n\n**Parameters:**\n\n- `path` (required): The file path to the documentation page (e.g., `app/getting-started/page.tsx`)\n\n**Example:**\n\n```json\n{\n  \"tool\": \"get_doc\",\n  \"params\": {\n    \"path\": \"app/deployment-and-hosting/page.tsx\"\n  }\n}\n```\n\n### list_docs\n\nList all available documentation pages, optionally filtered by directory.\n\n**Parameters:**\n\n- `directory` (optional): Optional directory to filter results (e.g., `components`)\n\n**Example:**\n\n```json\n{\n  \"tool\": \"list_docs\",\n  \"params\": {\n    \"directory\": \"configuration\"\n  }\n}\n```\n\n## How it works\n\nDoccupine's MCP server uses semantic search powered by vector embeddings to provide accurate, context-aware search results.\n\n### Indexing Process\n\nDoccupine runs this pipeline at build time and ships the resulting vectors with your site, so the server loads a ready-made index instead of re-embedding your docs on every cold start.\n\n1. **Document Discovery**: Doccupine scans your `app/` directory for all `page.tsx`, `page.ts`, `page.jsx`, and `page.js` files.\n2. **Content Extraction**: It extracts content from `const content =` declarations in your page files.\n3. **Chunking**: Large documents are split into chunks of approximately 800 characters with 100 character overlap for better context preservation.\n4. **Embedding Generation**: Each chunk is converted to a vector embedding using your configured LLM provider's embedding model.\n5. **Compaction**: Each vector is truncated to `LLM_EMBEDDING_DIMS` dimensions (default 512) and quantized to int8, keeping the index roughly 20x smaller than raw floats so large doc sets don't stall the chat on cold start.\n6. **Index Building**: The compact embeddings are written to `services/mcp/docs-index.json`, bundled into your serverless functions, and loaded into memory at runtime for fast similarity search.\n\n### Search Process\n\n1. **Query Embedding**: The search query is converted to a vector embedding using the same embedding model.\n2. **Similarity Calculation**: Cosine similarity is calculated between the query embedding and all document chunk embeddings.\n3. **Ranking**: Results are sorted by similarity score (highest first).\n4. **Response**: The top N results (based on the limit parameter) are returned with their paths, URIs, scores, and text content.\n\n<Callout type=\"note\">\n  Embeddings are precomputed at build time and bundled with your site, so the server loads the ready-made index into memory on startup instead of re-embedding your docs on every cold start. It only embeds at runtime when the precomputed index is missing or was built with a different provider or model. When you update your documentation, rebuild or redeploy your site to regenerate the index with fresh content.\n</Callout>\n\n## Use your MCP server\n\nYour users must connect your MCP server to their preferred AI tools.\n\n1. Make your MCP server URL publicly available.\n2. Users copy your MCP server URL and add it to their tools.\n3. Users access your documentation through their tools.\n\nThese are some of the ways you can help your users connect to your MCP server:\n\n<Tabs>\n  <TabContent title=\"Claude\">\n    <Steps>\n      <Step title=\"Get your MCP server URL.\">\n        Your MCP server URL is available at `https://your-domain.com/api/mcp`.\n      </Step>\n      <Step title=\"Publish your MCP server URL for your users.\">\n        Create a guide for your users that includes your MCP server URL and the steps to connect it to Claude.\n        1. Navigate to the [Connectors](https://claude.ai/settings/connectors) page in the Claude settings.\n        2. Select **Add custom connector**.\n        3. Add your MCP server name and URL.\n        4. Select **Add**.\n        5. When using Claude, select the attachments button (the plus icon).\n        6. Select your MCP server.\n      </Step>\n    </Steps>\n    See the [Model Context Protocol documentation](https://modelcontextprotocol.io/docs/tutorials/use-remote-mcp-server#connecting-to-a-remote-mcp-server) for more details.\n  </TabContent>\n  <TabContent title=\"Claude Code\">\n    <Steps>\n      <Step title=\"Get your MCP server URL.\">\n        Your MCP server URL is available at `https://your-domain.com/api/mcp`.\n      </Step>\n      <Step title=\"Publish your MCP server URL for your users.\">\n        Create a guide for your users that includes your MCP server URL and the command to connect it to Claude Code.\n        ```bash\n        claude mcp add --transport http <name> <url>\n        ```\n      </Step>\n    </Steps>\n    See the [Claude Code documentation](https://docs.anthropic.com/en/docs/claude-code/mcp#installing-mcp-servers) for more details.\n  </TabContent>\n  <TabContent title=\"Cursor\">\n    <Steps>\n      <Step title=\"Get your MCP server URL.\">\n        Your MCP server URL is available at `https://your-domain.com/api/mcp`.\n      </Step>\n      <Step title=\"Publish your MCP server URL for your users.\">\n        Create a guide for your users that includes your MCP server URL and the steps to connect it to Cursor.\n        1. Use <kbd>Command</kbd> + <kbd>Shift</kbd> + <kbd>P</kbd> (<kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>P</kbd> on Windows) to open the command palette.\n        2. Search for \"Open MCP settings\".\n        3. Select **Add custom MCP**. This opens the `mcp.json` file.\n        4. In `mcp.json`, configure your server:\n        ```json\n        {\n          \"mcpServers\": {\n            \"<your-mcp-server-name>\": {\n              \"url\": \"<your-mcp-server-url>\"\n            }\n          }\n        }\n        ```\n      </Step>\n    </Steps>\n    See the [Cursor documentation](https://docs.cursor.com/en/context/mcp#installing-mcp-servers) for more details.\n  </TabContent>\n  <TabContent title=\"VS Code\">\n    <Steps>\n      <Step title=\"Get your MCP server URL.\">\n        Your MCP server URL is available at `https://your-domain.com/api/mcp`.\n      </Step>\n      <Step title=\"Publish your MCP server URL for your users.\">\n        Create a guide for your users that includes your MCP server URL and the steps to connect it to VS Code.\n        1. Create a `.vscode/mcp.json` file.\n        2. In `mcp.json`, configure your server:\n        ```json\n        {\n          \"servers\": {\n            \"<your-mcp-server-name>\": {\n              \"type\": \"http\",\n              \"url\": \"<your-mcp-server-url>\"\n            }\n          }\n        }\n        ```\n      </Step>\n    </Steps>\n    See the [VS Code documentation](https://code.visualstudio.com/docs/copilot/chat/mcp-servers) for more details.\n  </TabContent>\n</Tabs>\n\n## Requirements\n\nTo use the MCP server, you need to have the AI Assistant configured. The MCP server uses the same LLM configuration for generating embeddings.\n\n| Variable       | Required | Description                                                  |\n| -------------- | -------- | ------------------------------------------------------------ |\n| `LLM_PROVIDER` | Yes      | Your LLM provider (`openai`, `anthropic`, or `google`)       |\n| `DOCS_API_KEY` | No       | When set, requires Bearer token authentication on `/api/mcp` |\n\n<Callout type=\"warning\">\n  The MCP server requires an LLM provider to be configured for generating embeddings. Make sure you have set up your AI Assistant with a valid API key before using the MCP server.\n</Callout>\n\nSee the [AI Assistant documentation](/ai-assistant) for configuration details.\n\n## Content indexing\n\nYour MCP server searches content extracted from your page files. The server automatically discovers and indexes all `page.tsx`, `page.ts`, `page.jsx`, and `page.js` files in your `app/` directory.\n\n### Content extraction\n\nThe server extracts content from `const content =` declarations in your page files. Make sure your documentation pages export a `content` constant with your markdown or MDX content.\n\n**Example:**\n\n```tsx\nexport const content = `\n# Getting Started\n\nWelcome to the documentation...\n`;\n```\n\n### Excluded directories\n\nThe following directories are automatically excluded from indexing:\n\n- `node_modules`\n- `.next`\n- `.git`\n- `api`\n\n## Troubleshooting\n\n### Index not building\n\nIf the index is not building, check:\n\n- Your LLM provider is configured correctly in your `.env` file\n- You have a valid API key set\n- Your documentation pages export a `content` constant\n\n### No search results\n\nIf searches return no results:\n\n- Verify that your documentation pages are in the `app/` directory\n- Check that your pages export a `content` constant\n- Ensure the index has been built (check the `index.ready` status via GET `/api/mcp`)\n\n### Slow search performance\n\nSearches use the precomputed in-memory index and are fast. The first search is only slow when the app has to embed your docs at runtime, which happens when the precomputed index is missing or was built with a different provider or model. If performance is consistently slow:\n\n- Confirm the build ran the doc-index precompute step (the `build` script runs it before `next build`) with a valid API key\n- Check your embedding API response times\n- Consider reducing the number of documentation pages\n- Verify your server has sufficient memory\n\n### Cloudflare blocking MCP requests\n\nIf you use Cloudflare as a proxy in front of your documentation site, Cloudflare's bot protection may block server-to-server requests from AI tools like Claude.ai. This can cause MCP connections to fail silently or return errors.\n\nThere are two ways to resolve this:\n\n**Option 1: Disable the Cloudflare proxy (simplest)**\n\nIn your Cloudflare DNS settings, click the orange cloud icon next to your domain record to switch it to \"DNS only\" (grey cloud). This disables Cloudflare's proxy and bot protection for your domain, allowing MCP requests to reach your server directly.\n\n**Option 2: Add a Cloudflare WAF exception (keeps your custom domain proxied)**\n\nIn Cloudflare dashboard:\n\n1. Go to **Security > WAF**.\n2. Click **Create rule**.\n3. Set it up as:\n   - **Rule name**: Allow MCP API\n   - **Field**: URI Path\n   - **Operator**: starts with\n   - **Value**: `/api/mcp`\n   - **Action**: Skip -- then check all remaining custom rules, Rate limiting rules, and Bot Fight Mode / Super Bot Fight Mode.\n4. Deploy the rule and make sure it is ordered first (above other rules).\n\n<Callout type=\"warning\">\n  Also check **Security > Bots** in your Cloudflare dashboard. If \"Bot Fight Mode\" or \"Super Bot Fight Mode\" is enabled, that is very likely what is blocking server-to-server requests from AI tools.\n</Callout>\n\n## Best practices\n\n- **Keep content up-to-date**: Rebuild or redeploy your site after updating documentation to regenerate the index with fresh content.\n- **Use descriptive queries**: More specific queries yield better semantic search results.\n- **Monitor index status**: Use the GET endpoint to check if your index is ready before performing searches.\n- **Optimize content structure**: Well-structured markdown with clear headings improves search relevance.";

package/dist/templates/mdx/model-context-protocol.mdx.js

@@ -63,9 +63,13 @@ Authorization: Bearer your-secret-key
 Requests without a valid token receive a \`401 Unauthorized\` response. When \`DOCS_API_KEY\` is not set, the MCP server is publicly accessible with no authentication required.
 
 <Callout type="note">
-  Authentication only applies to the \`/api/mcp\` endpoint. The \`/api/rag\` endpoint used by the built-in AI Assistant chat is not affected by this setting.
+  The \`DOCS_API_KEY\` check only applies to the \`/api/mcp\` endpoint. It does not affect the \`/api/rag\` endpoint used by the built-in AI Assistant chat. To gate the entire site (including the chat and search APIs) behind a shared password instead, see the [Authentication](/authentication) documentation.
 </Callout>
 
+### Rate limiting
+
+Tool calls to \`POST /api/mcp\` are rate limited per client IP address. When a client exceeds the limit, the server responds with \`429 Too Many Requests\` and a \`Retry-After\` header indicating how many seconds to wait before retrying.
+
 ### API Endpoints
 
 #### GET /api/mcp

package/dist/templates/mdx/platform/ai-assistant.mdx.d.ts

@@ -1 +1 @@
-export declare const platformAiAssistantMdxTemplate = "---\ntitle: \"AI Assistant\"\ndescription: \"Configure the built-in AI assistant that ships with every Doccupine documentation site.\"\ndate: \"2026-02-19\"\ncategory: \"Configuration\"\ncategoryOrder: 2\norder: 6\nsection: \"Platform\"\n---\n\n# AI Assistant\n\nEvery Doccupine site ships with a built-in AI assistant that helps visitors find answers across your documentation. The AI settings page lets you choose how it's powered.\n\n## Modes\n\n### Platform (default)\n\nUses Doccupine's built-in integration. Zero configuration needed - the AI assistant works out of the box with no API keys or setup.\n\nEach plan includes a monthly AI usage budget:\n\n| Plan       | Monthly Budget |\n| ---------- | -------------- |\n| Trial      | $2             |\n| Pro        | $20            |\n| Enterprise | $50            |\n\nThe AI settings page shows a usage dashboard with your current spending and remaining budget. Usage resets automatically with your billing cycle.\n\n#### AI credit top-ups\n\nIf you run out of AI credits before your billing cycle resets, you can purchase a one-time top-up to increase your monthly limit. Available tiers:\n\n- **$5**\n- **$10**\n- **$20**\n\nTop-ups are added to your current cycle's budget immediately after purchase and reset when your billing cycle renews. You can purchase multiple top-ups in the same cycle.\n\n### Custom\n\nBring your own API key for full control over the AI model. Supported providers:\n\n- **OpenAI**\n- **Anthropic**\n- **Google**\n\nIn Custom mode, you can also configure:\n\n- **Embedding model** - the model used to index your documentation content\n- **Temperature** - controls response creativity (0.0 for focused answers, up to 1.0 for more varied responses)\n\nFor a complete list of available models, refer to the official documentation of your chosen provider.\n\n### Off\n\nCompletely disables the AI assistant on your site.\n\n<Callout type=\"warning\">\n  AI settings are stored as environment variables on your deployment, not in a JSON file. After saving, a redeploy is triggered automatically to apply the changes.\n</Callout>\n\n## MCP server authentication\n\nEvery Doccupine site exposes an MCP (Model Context Protocol) endpoint at `/api/mcp`. This lets external AI tools query your documentation programmatically.\n\nYou can set an optional **API key** to restrict access to the MCP endpoint. When set, requests must include the key in their authorization header.\n\n<Callout type=\"note\">\n  For more details on how the MCP endpoint works and how to connect it to AI tools, see the [Model Context Protocol documentation](/model-context-protocol).\n</Callout>";
+export declare const platformAiAssistantMdxTemplate = "---\ntitle: \"AI Assistant\"\ndescription: \"Configure the built-in AI assistant that ships with every Doccupine documentation site.\"\ndate: \"2026-02-19\"\ncategory: \"Configuration\"\ncategoryOrder: 2\norder: 6\nsection: \"Platform\"\n---\n\n# AI Assistant\n\nEvery Doccupine site ships with a built-in AI assistant that helps visitors find answers across your documentation. The AI settings page lets you choose how it's powered.\n\n## Modes\n\n### Platform (default)\n\nUses Doccupine's built-in integration. Zero configuration needed - the AI assistant works out of the box with no API keys or setup.\n\nEach plan includes a monthly AI usage budget:\n\n| Plan       | Monthly Budget |\n| ---------- | -------------- |\n| Trial      | $2             |\n| Pro        | $20            |\n| Enterprise | $50            |\n\nThe AI settings page shows a usage dashboard with your current spending and remaining budget. Usage resets automatically with your billing cycle.\n\n#### AI credit top-ups\n\nIf you run out of AI credits before your billing cycle resets, you can purchase a one-time top-up to increase your monthly limit. Available tiers:\n\n- **$5**\n- **$10**\n- **$20**\n\nTop-ups are added to your current cycle's budget immediately after purchase and reset when your billing cycle renews. You can purchase multiple top-ups in the same cycle.\n\n### Custom\n\nBring your own API key for full control over the AI model. Supported providers:\n\n- **OpenAI**\n- **Anthropic**\n- **Google**\n\nIn Custom mode, you can also configure:\n\n- **Embedding model** - the model used to index your documentation content\n- **Temperature** - controls response creativity (0.0 for focused answers, up to 1.0 for more varied responses)\n\nFor a complete list of available models, refer to the official documentation of your chosen provider.\n\n### Off\n\nCompletely disables the AI assistant on your site.\n\n<Callout type=\"warning\">\n  AI settings are stored as environment variables on your deployment, not in a JSON file. After saving, a redeploy is triggered automatically to apply the changes.\n</Callout>\n\n<Callout type=\"note\">\n  Connecting external AI tools (Claude, Cursor, and others) to your site is configured on the dedicated [MCP](/platform/mcp) page, which also covers MCP server authentication.\n</Callout>";

package/dist/templates/mdx/platform/ai-assistant.mdx.js

@@ -61,12 +61,6 @@ Completely disables the AI assistant on your site.
   AI settings are stored as environment variables on your deployment, not in a JSON file. After saving, a redeploy is triggered automatically to apply the changes.
 </Callout>
 
-## MCP server authentication
-
-Every Doccupine site exposes an MCP (Model Context Protocol) endpoint at \`/api/mcp\`. This lets external AI tools query your documentation programmatically.
-
-You can set an optional **API key** to restrict access to the MCP endpoint. When set, requests must include the key in their authorization header.
-
 <Callout type="note">
-  For more details on how the MCP endpoint works and how to connect it to AI tools, see the [Model Context Protocol documentation](/model-context-protocol).
+  Connecting external AI tools (Claude, Cursor, and others) to your site is configured on the dedicated [MCP](/platform/mcp) page, which also covers MCP server authentication.
 </Callout>`;

package/dist/templates/mdx/platform/mcp.mdx.d.ts

@@ -0,0 +1 @@
+export declare const platformMcpMdxTemplate = "---\ntitle: \"MCP\"\ndescription: \"Connect external AI apps like Claude and Cursor to your documentation with a Model Context Protocol server, and protect it with an API key.\"\ndate: \"2026-07-12\"\ncategory: \"Configuration\"\ncategoryOrder: 2\norder: 7\nsection: \"Platform\"\n---\n\n# MCP\n\nThe **MCP** settings page lets external AI applications connect to your documentation through a hosted Model Context Protocol (MCP) server. Every Doccupine site exposes an MCP endpoint at `/api/mcp` that AI tools can query to search and read your content.\n\n## Connect your site with AI apps\n\nThe **Connect your site with AI apps** card gives you a ready-to-paste MCP configuration for popular AI tools. Pick a tab, copy the snippet, and add it to that tool's MCP config:\n\n- **Claude** - add the configuration to Claude Desktop's `claude_desktop_config.json`, or add the server URL as a connector from Claude's settings.\n- **Cursor** - add the configuration to Cursor's `~/.cursor/mcp.json`, or connect it from Cursor's MCP settings.\n- **Others** - a generic `mcpServers` block for any MCP-compatible application.\n\nEvery snippet points to your site's own MCP endpoint, for example:\n\n```json\n{\n  \"mcpServers\": {\n    \"Your Project\": { \"url\": \"https://your-site.com/api/mcp\" }\n  }\n}\n```\n\n<Callout type=\"note\">\n  The connection snippet appears once your site has been deployed. If you haven't published yet, deploy your site first to get its MCP server URL.\n</Callout>\n\n## MCP server authentication\n\nBy default your MCP endpoint is publicly accessible. You can restrict access with an API key:\n\n1. Enable **Require API key for MCP access**.\n2. Enter an API key.\n3. Save.\n\nOnce enabled, clients must include the key as a Bearer token in the `Authorization` header of every request to `/api/mcp`.\n\n<Callout type=\"warning\">\n  The API key is stored as an environment variable (`DOCS_API_KEY`) on your deployment, not in a JSON file. After saving, a redeploy is triggered automatically to apply the change.\n</Callout>\n\n<Callout type=\"note\">\n  For the full reference on how the MCP server works - available tools, rate limits, and endpoint details - see the [Model Context Protocol documentation](/model-context-protocol).\n</Callout>";

package/dist/templates/mdx/platform/mcp.mdx.js

@@ -0,0 +1,53 @@
+export const platformMcpMdxTemplate = `---
+title: "MCP"
+description: "Connect external AI apps like Claude and Cursor to your documentation with a Model Context Protocol server, and protect it with an API key."
+date: "2026-07-12"
+category: "Configuration"
+categoryOrder: 2
+order: 7
+section: "Platform"
+---
+
+# MCP
+
+The **MCP** settings page lets external AI applications connect to your documentation through a hosted Model Context Protocol (MCP) server. Every Doccupine site exposes an MCP endpoint at \`/api/mcp\` that AI tools can query to search and read your content.
+
+## Connect your site with AI apps
+
+The **Connect your site with AI apps** card gives you a ready-to-paste MCP configuration for popular AI tools. Pick a tab, copy the snippet, and add it to that tool's MCP config:
+
+- **Claude** - add the configuration to Claude Desktop's \`claude_desktop_config.json\`, or add the server URL as a connector from Claude's settings.
+- **Cursor** - add the configuration to Cursor's \`~/.cursor/mcp.json\`, or connect it from Cursor's MCP settings.
+- **Others** - a generic \`mcpServers\` block for any MCP-compatible application.
+
+Every snippet points to your site's own MCP endpoint, for example:
+
+\`\`\`json
+{
+  "mcpServers": {
+    "Your Project": { "url": "https://your-site.com/api/mcp" }
+  }
+}
+\`\`\`
+
+<Callout type="note">
+  The connection snippet appears once your site has been deployed. If you haven't published yet, deploy your site first to get its MCP server URL.
+</Callout>
+
+## MCP server authentication
+
+By default your MCP endpoint is publicly accessible. You can restrict access with an API key:
+
+1. Enable **Require API key for MCP access**.
+2. Enter an API key.
+3. Save.
+
+Once enabled, clients must include the key as a Bearer token in the \`Authorization\` header of every request to \`/api/mcp\`.
+
+<Callout type="warning">
+  The API key is stored as an environment variable (\`DOCS_API_KEY\`) on your deployment, not in a JSON file. After saving, a redeploy is triggered automatically to apply the change.
+</Callout>
+
+<Callout type="note">
+  For the full reference on how the MCP server works - available tools, rate limits, and endpoint details - see the [Model Context Protocol documentation](/model-context-protocol).
+</Callout>`;

package/dist/templates/package.js

@@ -18,14 +18,14 @@ export const packageJsonTemplate = JSON.stringify({
         "@mdx-js/react": "^3.1.1",
         "@modelcontextprotocol/sdk": "^1.29.0",
         "@posthog/react": "^1.10.3",
-        "cherry-styled-components": "^0.2.10",
+        "cherry-styled-components": "^0.2.11",
         langchain: "^1.5.3",
         "lucide-react": "^1.24.0",
         minisearch: "^7.2.0",
         next: "16.2.10",
         "next-mdx-remote": "^6.0.0",
-        "posthog-js": "^1.399.1",
-        "posthog-node": "^5.40.0",
+        "posthog-js": "^1.399.2",
+        "posthog-node": "^5.41.0",
         react: "19.2.7",
         "react-dom": "19.2.7",
         "rehype-highlight": "^7.0.2",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "doccupine",
-  "version": "0.0.121",
+  "version": "0.0.123",
   "description": "Free and open-source documentation platform. Write MDX, get a production-ready site with AI chat, built-in components, and an MCP server - in one command.",
   "main": "dist/index.js",
   "bin": {