VitePress Chat

• Install
• Setup
• Server
• Development
• Support
• Contributing

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!

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

• Client: https://github.com/cssnr/vitepress-chat
• Server: https://github.com/cssnr/chat-server

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.

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

Server

For server set instructions see:

• Documentation: https://cssnr.github.io/vitepress-chat/server
• GitHub Repository: https://github.com/cssnr/chat-server

Development

The docs run the plugin from source.

Create a .env.development file similar to this.

VITE_AI_AUTH=Basic Abc123=
VITE_AI_API=http://localhost:3000/
VITE_AI_DEV_INSTRUCTIONS=You are a helpful assistant testing a chat box on a website and should respond with text/links in the requested length and formatting.

Note the VITE_AI_DEV_INSTRUCTIONS will replace the generated instructions.txt for development.

Then run the docs to test your changes.

npm i
npm run docs

Support

If you run into any issues or need help getting started, please do one of the following:

• Report an Issue: https://github.com/cssnr/chat-server/issues
• Q&A Discussion: https://github.com/cssnr/chat-server/discussions/categories/q-a
• Request a Feature: https://github.com/cssnr/chat-server/issues/new?template=1-feature.yaml
• Chat with us on Discord: https://discord.gg/wXy6m2X8wY

Contributing

Please consider making a donation to support the development of this project and additional open source projects.

For a full list of current projects visit: https://cssnr.github.io/