vitepress-chat

v0.0.2

Published

16 days ago

Easily add AI chat with knowledge on your site and live streaming results from a secure proxy server.

0High
0Medium
0Low

smashed

vitepress-plugin vitepress plugin chat

VitePress Chat

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

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

From npmjs.com 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: '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://cssnr.github.io/vitepress-chat/llms.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...

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.