VitePress Plugin

A VitePress Chat Plugin providing AI Chat support trained on your docs. Includes instructions generator plugin, or works with your existing plugin. Securely connect to any AI provider you choose via the proxy chat-server.

💯 100% Free to use with Zen OpenCode or Gemini Free Tier!

To get started Install and Setup the plugin.

⚡ Ask AI with the Chat button in the bottom right...

🔒 The server features live-streaming results, input token caching, retry on failure and much more. Works with Claude, Gemini, OpenAI, or any OpenAI Compatible Provider.

• Features
• Install
• Setup
  • Chat Plugin
  • Instructions Generator
• Customize
  • ChatOptions
  • Components

Features

• Markdown Formatting with Syntax Highlighting
• Live Streams the Results in Real Time
• Works with Free Render Startup Delay
• Set Custom Button And Header Text and Link
• Includes Instructions Generation Plugin
• Set Custom File Name and Exclude Globs
• Works with Existing LLM Generation Plugins
• Small Footprint (only adds ~6KB to your theme)
• Plus all the Server Features

Built with the AI SDK.

💡 If you need help getting started, support is available.

Live Demos

Other sites using VitePress Chat with various configurations.

Site	Source	Layout	Theme
Cache Cleaner	cssnr/cache-cleaner	Default	Custom
Zipline Android	cssnr/zipline-android-docs	Custom	Default
Django Files	django-files/django-files.github.io	Default	Default
Portainer Deploy	cssnr/portainer-stack-deploy-docs	Default	Custom

Install

From npmjs.com using your favorite package manager...

npm i -D vitepress-chat

Setup

There are two components, the Chat Plugin which adds the chat button and box. Plus the Instructions Generator plugin which generates instructions.txt file.

This allows you to use this with other instructions generator plugins or existing llms.txt files.

Chat Plugin

Add the plugin to your theme.

• .vitepress/theme/index.[js,ts].

Using the default theme.

import DefaultTheme from 'vitepress/theme'

import chat from 'vitepress-chat'
import 'vitepress-chat/style.css'

// https://vitepress.dev/guide/extending-default-theme
export default {
  ...DefaultTheme,
  ...chat(DefaultTheme, {
    api: 'http://localhost:3000/',
  }),
}

Using a custom layout.

import DefaultTheme from 'vitepress/theme'
import MyLayout from './MyLayout.vue'

import chat from 'vitepress-chat'
import 'vitepress-chat/style.css'

export default {
  ...DefaultTheme,
  ...chat(MyLayout, {
    api: 'http://localhost:3000/',
  }),
}

With an Authorization header and remote server.

export default {
  ...DefaultTheme,
  ...chat(DefaultTheme, {
    api: 'https://chat-server.cssnr.com/',
    headers: { Authorization: 'Basic Abc123=' },
  }),
}

With a custom file name, to use with other generators like vitepress-plugin-llms.

export default {
  ...chat(DefaultTheme, {
    api: 'https://chat-server.cssnr.com/',
    filePath: 'llms-full.txt',
  }),
}

With a remote URL path.

export default {
  ...chat(DefaultTheme, {
    api: 'https://chat-server.cssnr.com/',
    filePath: 'https://cssnr.github.io/vitepress-chat/llms.txt',
  }),
}

You can also configure the button text, initial message and much more.
See the ChatOptions for more details...

Instructions Generator

Add the instruction generator plugin to your config.

• .vitepress/config.[ts,mts]

This generates the instructiosn.txt from your docs folder when you run dev or build.

import { defineConfig } from 'vitepress'

import instructions from 'vitepress-chat/instructions'

// https://vitepress.dev/reference/site-config
export default defineConfig({
  vite: {
    plugins: [instructions()],
  },
})

To exclude files/folders from the instructions use the exclude globs.

export default defineConfig({
  vite: {
    plugins: [instructions({ exclude: ['index.md', 'include/**/*'] })],
  },
})

See the InstructionsOptions for more details...

Customize

ChatOptions

All options passed to the chat() function. Only api is required.

Option	Type	Default	Description
api	string	Required	URL of the chat server to connect to.
headers	Record<string, string>	—	Custom HTTP headers sent with every request to the API.
buttonText	string	'AI Chat'	Text displayed on the floating chat button.
headerText	string | null	'VitePress Chat'	Text displayed in the chat window header.
headerUrl	string | null	'https://github.com/cssnr/vitepress-chat'	URL the header text links to.
initialMessage	string | null	—	Message automatically sent to the AI when the chat opens.
aiName	string | null	'AI'	Label displayed above AI messages.
userName	string | null	'YOU'	Label displayed above user messages.
placeholder	string | null	'Enter your question (use Ctrl/Shift+Enter for new lines)…'	Placeholder text shown in the message input field.
filePath	string	'instructions.txt'	Path (or full URL) to the instructions file the server uses as context.
showReasoning	boolean	false	Show the AI's internal reasoning/thinking steps in the chat.
loadingText	string	'Loading Chat…'	Text displayed while the chat is loading.
loadErrorText	string	'Failed to load chat. Please try again.'	Text displayed when the chat fails to load.
viewReasoningText	string	'View Reasoning…'	Text for the reasoning expand/collapse toggle.
chatHeader	Component	—	Vue component to replace the default header entirely.
chatFooter	Component	—	Vue component rendered below the message list.

Options that optionally accept null will completely disable that item when passed.

The full type definition is in src/index.ts.

Components

You can use a custom component for the Header or Footer.

import ChatHeader from './components/ChatHeader.vue'
import ChatFooter from './components/ChatFooter.vue'

export default {
  ...chat(DefaultTheme, {
    api: 'https://chat-server.cssnr.com/',
    chatHeader: ChatHeader,
    chatFooter: ChatFooter,
  }),
}

The custom chatHeader will override the current header text/link.

The custom chatFooter is only displayed when added.

Click here to view this site's ./components/ChatFooter.vue

<script setup lang="ts">
defineProps<{ closeChat: () => void }>()
</script>

<template>
  <hr class="chat-divider" />
  <div class="vp-doc chat-footer">
    <span class="chat-footer-text">
      View the
      <a
        class="vp-external-link-icon"
        href="https://github.com/cssnr/vitepress-chat/blob/master/PRIVACY.md"
        target="_blank"
        >PRIVACY.md</a
      >
    </span>
    <i class="chat-footer-text">View <a href="client#customize" @click="closeChat">Custom Footer</a> Docs</i>
  </div>
</template>

<style scoped>
.chat-divider {
  flex-shrink: 0;
  margin: 0;
  border: none;
  border-top: 1px solid var(--vp-c-divider);
}
.chat-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.chat-footer-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
</style>

 

If you don't have one setup yet, configure your Server.