The AI Assistant answers questions about your documentation through natural language queries. It is embedded directly in your documentation site, so users can find answers quickly and succeed with your product.
When users ask questions, the assistant:
The AI Assistant uses a multi-agent architecture:
By default, the assistant connects to your documentation's built-in MCP server at /mcp, giving it access to all your pages without additional configuration. You can also connect to an external MCP server if needed.
Get an API key from Vercel AI Gateway. AI Gateway works with multiple AI providers (OpenAI, Anthropic, Google, and more) through a unified API.
Add your API key to your environment:
AI_GATEWAY_API_KEY=your-api-key
That's it! The assistant is automatically enabled when an API key is detected. Deploy your documentation and the assistant will be available to your users.
Users can interact with the assistant in multiple ways:
On documentation pages, a floating input appears at the bottom of the screen. Users can type their questions directly and press Enter to get answers.
Each documentation page includes an Explain with AI button in the table of contents sidebar. Clicking this button opens the assistant with the current page as context, asking it to explain the content.
When a conversation starts, a slideover panel opens on the right side of the screen. This panel displays the conversation history and allows users to continue asking questions.
Configure the assistant through app.config.ts:
export default defineAppConfig({
aiChat: {
// Show the floating input on documentation pages
floatingInput: true,
// Show the "Explain with AI" button in the sidebar
explainWithAi: true,
// FAQ questions to display when chat is empty
faqQuestions: [],
// Keyboard shortcuts
shortcuts: {
focusInput: 'meta_i'
},
// Custom icons
icons: {
trigger: 'i-lucide-sparkles',
explain: 'i-lucide-brain'
}
}
})
Display suggested questions when the chat is empty. This helps users discover what they can ask.
export default defineAppConfig({
aiChat: {
faqQuestions: [
'How do I install Docus?',
'How do I customize the theme?',
'How do I add components to my pages?'
]
}
})
Organize questions into categories:
export default defineAppConfig({
aiChat: {
faqQuestions: [
{
category: 'Getting Started',
items: [
'How do I install Docus?',
'What is the project structure?'
]
},
{
category: 'Customization',
items: [
'How do I change the theme colors?',
'How do I add a custom logo?'
]
}
]
}
})
For multi-language documentation, provide FAQ questions per locale:
export default defineAppConfig({
aiChat: {
faqQuestions: {
en: [
{ category: 'Getting Started', items: ['How do I install?'] }
],
fr: [
{ category: 'Démarrage', items: ['Comment installer ?'] }
]
}
}
})
Configure the keyboard shortcut for focusing the floating input:
export default defineAppConfig({
aiChat: {
shortcuts: {
// Default: 'meta_i' (Cmd+I on Mac, Ctrl+I on Windows)
focusInput: 'meta_k' // Change to Cmd/Ctrl+K
}
}
})
The shortcut format uses underscores to separate keys. Common examples:
meta_i - Cmd+I (Mac) / Ctrl+I (Windows)meta_k - Cmd+K (Mac) / Ctrl+K (Windows)ctrl_shift_p - Ctrl+Shift+PCustomize the icons used by the AI assistant:
export default defineAppConfig({
aiChat: {
icons: {
// Icon for the trigger button and slideover header
trigger: 'i-lucide-bot',
// Icon for the "Explain with AI" button
explain: 'i-lucide-lightbulb'
}
}
})
Icons use the Iconify format (e.g., i-lucide-sparkles, i-heroicons-sparkles).
All UI texts are automatically translated based on the user's locale. Docus includes built-in translations for English and French.
The following texts are translated:
Hide the floating input at the bottom of documentation pages:
export default defineAppConfig({
aiChat: {
floatingInput: false
}
})
Hide the "Explain with AI" button in the documentation sidebar:
export default defineAppConfig({
aiChat: {
explainWithAi: false
}
})
The assistant is automatically disabled when no API key is set. To explicitly disable it, simply remove the environment variable:
# Comment out or remove the API key
# AI_GATEWAY_API_KEY=your-api-key
Configure advanced options in nuxt.config.ts:
export default defineNuxtConfig({
aiChat: {
// AI model (uses AI SDK Gateway format)
model: 'moonshotai/kimi-k2-turbo',
// MCP server (path or URL)
mcpServer: '/mcp',
// API endpoint path
apiPath: '/api/ai-chat'
}
})
The assistant uses an MCP server to access your documentation. You have two options:
By default, the assistant uses Docus's built-in MCP server at /mcp:
export default defineNuxtConfig({
aiChat: {
mcpServer: '/mcp'
}
})
mcpServer accordingly.Connect to any external MCP server by providing a full URL:
export default defineNuxtConfig({
aiChat: {
mcpServer: 'https://other-docs.example.com/mcp'
}
})
This is useful when you want the assistant to answer questions from a different documentation source, or when connecting to a centralized knowledge base.
The assistant uses moonshotai/kimi-k2-turbo by default. You can change this to any model supported by the AI SDK Gateway:
export default defineNuxtConfig({
aiChat: {
model: 'anthropic/claude-sonnet-4-20250514'
}
})
The assistant automatically uses your site name in its responses. Configure the site name in nuxt.config.ts:
export default defineNuxtConfig({
site: {
name: 'My Documentation'
}
})
This makes the assistant respond as "the My Documentation assistant" and speak with authority about your specific product.
Use the useAIChat composable to control the assistant programmatically:
<script setup>
const { isEnabled, isOpen, open, close, toggle } = useAIChat()
function askQuestion() {
// Open the assistant with a pre-filled question
open('How do I configure the theme?', true)
}
</script>
<template>
<UButton v-if="isEnabled" @click="askQuestion">
Ask about themes
</UButton>
</template>
| Property | Type | Description |
|---|---|---|
isEnabled | ComputedRef<boolean> | Whether the assistant is enabled (API key present) |
isOpen | Ref<boolean> | Whether the slideover is open |
open(message?, clearPrevious?) | Function | Open the assistant, optionally with a message |
close() | Function | Close the assistant slideover |
toggle() | Function | Toggle the assistant open/closed |
clearMessages() | Function | Clear the conversation history |