nuxt-llmsでウェブサイトにllms.txtを設置してみる

検索エンジン用に用意する robots.txt や sitemap.xml のような感じで 大規模言語モデル（LLM：Large Language Model）用に llms.txt というものがある そう。私も OpenAI の ChatGPT や Google の Gemini などの AI ツールを使わせていただくことがしばしばあるので、自分のウェブサイトに導入をしてみました。

私のウェブサイト「Hiratake Web」は Vue.js のフレームワークである Nuxt で構築しています。そんな Nuxt には、Nuxt で構築されたウェブサイトへ簡単に llms.txt を導入するためのモジュール nuxt-llms が存在していて、今回はこちらを利用してウェブサイトへ llms.txt を追加してみました。

llms.txt とは

llms.txt が一体どんなものなのかも分からずに導入するのも良くないので、まずはオフィシャルのウェブサイトを確認。llms.txt は、オーストラリアの Jeremy Howard という方が 2024 年 9 月に提案したもの。

The /llms.txt file – llms-txt

ChatGPT や Gemini など、質問したら何でも教えてくれる AI ツールですが、回答するために収集する情報の多くをインターネット上にあるウェブサイトの情報に依存しています。しかしながら 大多数のウェブサイトは人間が読むために設計 されていて、読みやすくするために様々なコンテンツや装飾が加えられていたり、ウェブサイトを運営するための資金を得るために広告が掲載されていたりしています。

我々は AI のために文章を書いているわけではないのでこれは当然のことではあるのですが、そういった装飾などを実装するために、ウェブサイトの HTML は LLM にとっては必要ないタグが大量に含まれている状態 となっています。これが、LLM がページの内容を理解するのを困難にしているのだそう。

これを解決するために、LLM が読み取りやすい形式で情報を提供しようというのが llms.txt というファイルの目的のようです。ファイルの中身は Markdown 形式で記述 され、ウェブサイトのタイトルや概要、各ページへのリンクといった情報が含まれます。

急増するAIクローラー対策として「llms.txt」を導入してみた | DevelopersIO

投稿を執筆している時点では robots.txt などのように標準化はされていませんが、AI ツールのクローラーによるアクセス負荷の軽減などを目的に llms.txt を導入するウェブサイトが少しずつ増えているようです。

nuxt-llms で llms.txt を導入してみる

Nuxt で構築しているウェブサイトに llms.txt を導入します。今回は先述の通り nuxt-llms という Nuxt 用のモジュールをインストールして導入します。使用するパッケージのバージョン等は以下の通りです。

nuxt-llms - 0.1.3
nuxt - 3.17.5
@nuxt/content - 3.5.1

まずはモジュールをインストールします。私は pnpm を使用していますが、他のものを使っている場合は適宜コマンドを置き換えてください。

pnpm add -D nuxt-llms

その後、他のモジュールと同様に nuxt.config.ts 内の modules に 'nuxt-llms' を追加します。

export default defineNuxtConfig({
  modules: [
    // ...
    '@nuxt/content',
    'nuxt-llms', // 追加
  ],
  // ...
})

nuxt.config.ts での TypeScript の型をいい感じにするために一度 nuxt prepare コマンドを実行し、設定ファイルに nuxt-llms の設定を記述します。今回追加するウェブサイトでは @nuxt/content モジュールを導入していますが、こちらのドキュメントに nuxt-llms を導入する際の説明が用意されているので、こちらを参考にして nuxt.config.ts に設定を追加します。

LLMs Integration - Nuxt Content

設定内容は以下の通りです。llms.domain にウェブサイトのドメイン、llms.title にウェブサイトのタイトル、llms.description にウェブサイトの概要を設定します。

export default defineNuxtConfig({
  modules: ['@nuxt/content', 'nuxt-llms'],
  llms: {
    domain: 'https://hiratake.dev',
    title: 'Hiratake Web',
    description: 'ひらたけの個人ウェブサイトです。',
  },
  // ...
})

たったこれだけで、ウェブサイトに llms.txt を導入することができます。試しにコードを push してデプロイしてみるとファイルが生成され、中には設定したウェブサイトのタイトルや概要、そして @nuxt/content で管理している各コンテンツが列挙されているのが確認できます。

Hiratake Web の llms.txt の画像

ひとつのファイルに情報がまとまっているので、例えば NotebookLM に読み込ませて「こういう投稿はありますか？」みたいに聞いて過去の投稿を探す、みたいなことも出来ます。最近投稿が増えてきて過去の投稿を探し出すのが大変になってきていたので、結構助かりそう。精度はちょっと怪しい気がするけども。

NotebookLMにllms.txtを読み込ませて質問した様子の画像

ウェブサイトへ llms.txt を導入してみましたが、あまりにも簡単に導入できすぎて驚きました。本当はここから色々カスタマイズしていくのだとは思いますが、まだまだ生まれたばかりのファイルなのと、AI クローラーで困っているという状況でもないので、しばらくはこのままいこうかなと思っています。