@zenjoy/vitepress-plugin-llms

v1.8.0-zenjoy.0

Published

2 months ago

📜 A VitePress plugin for generating LLM-friendly documentation

0High
0Medium
0Low

dedene

jurgenj

wouterr

vitepress plugin vite-plugin vitepress-plugin llms documentation ai

📜 vitepress-plugin-llms

🐛 Report bug • Request feature ✨

📦 Installation

npm install vitepress-plugin-llms --save-dev

🛠️ Usage

Add the Vite plugin to your VitePress configuration (.vitepress/config.ts):

import { defineConfig } from 'vitepress'
import llmstxt from 'vitepress-plugin-llms'

export default defineConfig({
  vite: {
    plugins: [llmstxt()]
  }
})

Now, thanks to this plugin, the LLM version of the website documentation is automatically generated

[!NOTE]
For repositories with documentation in other languages: Please do not use this plugin, only English documentation is enough for LLMs.

[!TIP] You can add 📋 Copy as Markdown and 📥 Download as Markdown buttons for each page so that visitors can copy the page in Markdown format with just one click!

First, register a global component with buttons in docs/.vitepress/theme/index.ts:

import DefaultTheme from 'vitepress/theme'
import type { Theme } from 'vitepress'
import CopyOrDownloadAsMarkdownButtons from 'vitepress-plugin-llms/vitepress-components/CopyOrDownloadAsMarkdownButtons.vue'

export default {
  extends: DefaultTheme,
  enhanceApp({ app }) {
    app.component('CopyOrDownloadAsMarkdownButtons', CopyOrDownloadAsMarkdownButtons)
  }
} satisfies Theme

And tell VitePress to use an additional Markdown plugin that will insert them:

import { defineConfig } from 'vitepress'
import { copyOrDownloadAsMarkdownButtons } from 'vitepress-plugin-llms'

export default defineConfig({
  // ...
  markdown: {
    config(md) {
      md.use(copyOrDownloadAsMarkdownButtons)
    }
  }
})

✅ Good practices

1. Use `description` in the pages frontmatter

Typically, the list of pages in llms.txt is generated like this:

- [Tailwind v4](/docs/tailwind-v4.md)

As you can see, it's not very clear what's on this page and what it's for

But you can insert description in frontmatter in the docs/tailwind-v4.md file:

---
description: How to use shadcn-vue with Tailwind v4.
---

...

And the link in the generated llms.txt will display the page description:

- [Tailwind v4](/docs/tailwind-v4.md): How to use shadcn-vue with Tailwind v4.

Plugin Settings

See src/types.d.ts or

Example Configuration

Here is an example of how to configure the plugin with custom settings:

import { defineConfig } from 'vitepress'
import llmstxt from 'vitepress-plugin-llms'

export default defineConfig({
  vite: {
    plugins: [
      llmstxt({
        generateLLMsFullTxt: false,
        ignoreFiles: ['sponsors/*'],
        customLLMsTxtTemplate: `# {title}\n\n{foo}`,
        title: 'Awesome tool',
        customTemplateVariables: {
          foo: 'bar'
        },
        experimental: {
          depth: 2 // Generate llms.txt and llms-full.txt in root and first-level subdirectories
        }
      })
    ]
  }
})

This configuration does the following:

generateLLMsFullTxt: false: Disables the generation of the llms-full.txt file.
ignoreFiles: ['sponsors/*']: Ignores all files in the sponsors directory.
customLLMsTxtTemplate: Uses a custom template for the llms.txt file.
title: Sets a custom header in llms.txt, for your custom variables use customTemplateVariables.
customTemplateVariables: Sets custom variables for the template, replaces {foo} with bar.
experimental: { depth: 2 }: Generates both llms.txt and llms-full.txt files in the root directory and all first-level subdirectories, with each directory containing only files from that specific directory and its subdirectories.

Embedding content specifically for LLMs with `<llm-only>` tag

You can add a content that will be visible in files for LLMs, but invisible to humans, this can be useful for setting special instructions like "Refer to #basic-queries for demonstrations", "NEVER do ....", "ALWAYS use ... in case of ..." etc.

To do this, you need to wrap content with the <llm-only> tag:

<llm-only>

## Section for LLMs

This content appears only in the generated LLMs files without the `<llm-only>` tag
</llm-only>

Check out the Plugins API Guide for documentation about creating plugins.

<llm-only>Note for LLM...</llm-only>

Excluding content for LLMs with the `<llm-exclude>` tag

You can add a content that will be visible in files for humans, but invisible to LLMs, opposite of <llm-only>:

<llm-exclude>
## Section for humans

This content will not be in the generated files for LLMs
</llm-exclude>

Check out the Plugins API Guide for documentation about creating plugins.

<llm-exclude>Note only for humans</llm-exclude>

🔄 Dynamic Routes Support

The plugin automatically supports VitePress dynamic routes, which allow you to generate multiple pages from a single template using route parameters.

Dynamic routes are automatically included in llms.txt, llms-full.txt, and as individual markdown files without any additional configuration!

Example: Package Documentation

Create a dynamic route template packages/[pkg].md:

---
title: "{{ $params.pkg }} Documentation"
---

# {{ $params.pkg }}

Documentation for {{ $params.pkg }} package.

And a paths loader packages/[pkg].paths.js:

export default {
  paths() {
    return [
      { params: { pkg: 'vitepress' }},
      { params: { pkg: 'vue' }},
      { params: { pkg: 'vite' }}
    ]
  }
}

This automatically generates:

✅ packages/vitepress.md with title "vitepress"
✅ packages/vue.md with title "vue"
✅ packages/vite.md with title "vite"
✅ All routes appear in llms.txt table of contents
✅ Full content included in llms-full.txt

CMS Integration

Dynamic routes work great with CMS integration using the content property:

export default {
  async paths() {
    const posts = await fetch('https://my-cms.com/api/posts').then(r => r.json())

    return posts.map(post => ({
      params: {
        id: post.id,
        title: post.title,
        author: post.author
      },
      content: post.content // Raw Markdown or HTML from CMS
    }))
  }
}

The plugin will:

✅ Process all dynamically generated routes
✅ Extract titles from params or content
✅ Apply all markdown transformations (HTML stripping, llm-only tags, etc.)
✅ Include routes in llms.txt with proper descriptions

Disabling Dynamic Routes

If you want to exclude dynamic routes from LLM documentation:

llmstxt({
  includeDynamicRoutes: false
})

🚀 Why `vitepress-plugin-llms`?

LLMs (Large Language Models) are great at processing text, but traditional documentation formats can be too heavy and cluttered. vitepress-plugin-llms generates raw Markdown documentation that LLMs can efficiently process

The file structure in .vitepress/dist folder will be as follows:

📂 .vitepress/dist
├── ...
├── llms-full.txt            // A file where all the website documentation is compiled into one file
├── llms.txt                 // The main file for LLMs with all links to all sections of the documentation for LLMs
├── markdown-examples.html   // A human-friendly version of `markdown-examples` section in HTML format
└── markdown-examples.md     // A LLM-friendly version of `markdown-examples` section in Markdown format

✅ Key Features

⚡️ Easy integration with VitePress
✅ Zero config required, everything works out of the box
⚙️ Customizable
🤖 An LLM-friendly version is generated for each page
📝 Generates llms.txt with section links
📖 Generates llms-full.txt with all content in one file
🔄 Automatic support for VitePress dynamic routes and CMS integration

📖 llmstxt.org Standard

This plugin follows the llmstxt.org standard, which defines the best practices for LLM-friendly documentation.

✨ Projects where this plugin is used

| Project | Stars | llms.txt | llms-full.txt | | -------------------------------------------------------- | :-----------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------: | :-------------------------------------------------------------: | | Vite | | llms.txt | llms-full.txt | | Vue.js | | llms.txt | llms-full.txt | | Slidev | | llms.txt | llms-full.txt | | Elysia | | llms.txt | llms-full.txt | | Rolldown | | llms.txt | llms-full.txt | | shadcn/vue | | llms.txt | llms-full.txt | | Fantastic-admin | | llms.txt | llms-full.txt | | Vue Macros | | llms.txt | llms-full.txt | | oRPC | | llms.txt | llms-full.txt | | tsdown | | llms.txt | llms-full.txt | | GramIO | | llms.txt | llms-full.txt |