Make Your Vite Project LLM-Friendly with vite-plugin-llms

Sascha Seniuk — Tue, 03 Dec 2024 12:08:29 +0000

As Large Language Models (LLMs) become increasingly integrated into development workflows, there's growing interest in making our websites and documentation more accessible to these AI assistants. The llms.txt specification aims to address this need by providing a standardized way to serve LLM-friendly content. Today, I'm excited to introduce vite-plugin-llms, a Vite plugin that makes implementing the llms.txt specification a breeze.

What is llms.txt?

Before diving into the plugin, let's understand what llms.txt is. The specification suggests two main additions to your website:

A /llms.txt file in your site's root that provides concise, markdown-formatted information about your project
Clean markdown versions of your pages at the same URL with .md appended

This approach helps LLMs consume your content more effectively, which is particularly valuable when users interact with your site through AI-powered development tools or chat interfaces.

Introducing vite-plugin-llms

The vite-plugin-llms plugin automates the process of serving these LLM-friendly versions of your content in Vite-based projects. Whether you're using Vue, React, Svelte, or any other framework that works with Vite, this plugin has you covered.

Key Features

Automatically serves markdown files alongside your routes during development
Handles the copying of llms.txt and markdown files to your build output
Maintains your directory structure for markdown routes
Provides clear logging of available markdown routes during both development and build

Getting Started

First, install the plugin:

npm install vite-plugin-llms --save-dev

Then, add it to your Vite configuration:

import { defineConfig } from 'vite'
import llms from 'vite-plugin-llms'

export default defineConfig({
  plugins: [
    llms({
      llmsDir: 'llms' // optional, defaults to 'llms'
    })
  ]
})

Project Structure

The plugin expects a simple and intuitive project structure. Here's an example for a React project:

your-project/
├── src/
│   └── pages/
│       ├── About.tsx         # route: /about
│       └── Docs.tsx          # route: /docs
├── llms/
│   ├── llms.txt
│   ├── about.md             # accessible via: /about.md
│   └── docs.md              # accessible via: /docs.md
└── vite.config.js

Creating Your llms.txt

Your llms.txt file should follow the specification's format. Here's a basic example:

# Your Project Name

> A concise description of your project

## Documentation

- [Getting Started](docs/getting-started.md): Introduction to the project
- [API Reference](docs/api.md): Complete API documentation

Why Use This Plugin?

Future-Ready Development: As AI tools become more integrated into development workflows, having LLM-friendly documentation will become increasingly important.
Automated Workflow: Instead of manually managing markdown versions of your pages, the plugin handles the serving and building process automatically.
Framework Agnostic: Works with any Vite-based project, giving you flexibility in your tech stack.
Zero Configuration Needed: While configurable, the plugin works out of the box with sensible defaults.

Get Involved

The plugin is open source and welcomes contributions! You can:

Star the repository
Report issues
Suggest new features
Submit pull requests

Conclusion

The vite-plugin-llms plugin simplifies the process of making your Vite project LLM-friendly. By automating the implementation of the llms.txt specification, it helps prepare your project for a future where AI assistants are an integral part of the development workflow.

Give it a try in your next Vite project and let me know how it works for you in the comments below!

Links and Resources:

DEV Community: Sascha Seniuk