Configuration
Customize your Geistdocs site without modifying source files
While Geistdocs is fully open source, composable and copy-pasteable, it's preferable to customize your site without modifying the source code. This makes it easier to update Geistdocs in the future while preserving your customizations.
To enable this, Geistdocs uses a root-level configuration file that lets you customize your documentation site without touching the source code.
Configuration File
The geistdocs.tsx file in your project root contains all customization options:
import { BookHeartIcon } from "lucide-react";
export const Logo = () => (
<div className="flex items-center gap-2">
<BookHeartIcon className="size-5" />
<p className="font-semibold text-xl tracking-tight">Geistdocs</p>
</div>
);
export const nav = [
{
label: "Docs",
href: "/docs",
},
];
export const suggestions = [
"What is Vercel?",
"What can I deploy with Vercel?",
"What is Fluid Compute?",
"How much does Vercel cost?",
];
export const title = "Geistdocs Documentation";
export const prompt =
"You are a helpful assistant specializing in answering questions about Geistdocs, a modern documentation template built with Next.js and Fumadocs.";Configuration Options
Logo
Customize the logo component displayed in your site header:
export const Logo = () => (
<div className="flex items-center gap-2">
<YourIcon className="size-5" />
<p className="font-semibold text-xl tracking-tight">Your Brand</p>
</div>
);nav
Define navigation links shown in the header:
export const nav = [
{
label: "Documentation",
href: "/docs",
},
{
label: "API Reference",
href: "/api",
},
{
label: "GitHub",
href: "https://github.com/your-org/your-repo",
},
];suggestions
Configure suggested questions for the AI assistant:
export const suggestions = [
"How do I get started?",
"What are the key features?",
"How do I deploy my site?",
"Where can I get help?",
];title
Set the main title for your documentation site:
export const title = "Your Product Documentation";prompt
Customize the system prompt for the AI assistant to match your documentation context:
export const prompt =
"You are a helpful assistant specializing in answering questions about Your Product, a platform for building amazing applications.";