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

Features

• 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
• Plus all the Server Features

Built with the AI SDK.

Install

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 the plugin 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: 'https://chat-server.cssnr.com/',
    headers: { Authorization: 'Basic Abc123=' },
  }),
}

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: 'https://chat-server.cssnr.com/',
  }),
}

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://example.com/custom-instructions.txt',
  }),
}

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...

 

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