ブラウザアプリの実行
Bun サーバーを起動して、UI 上で brain とチャットする。
ブラウザアプリは CLI の長命版です。brain を保持し、複数を同時に扱え、 brain ごとにチャットスレッドを提供します。
サーバーの起動
PORT=4180 bun run dev次のように表示されるはずです。
LocalLens is running at http://localhost:4180PORT を指定しないと、サーバーは 3000 で待ち受けます。
http://localhost:4180 をモダンブラウザで開いてください。
デモを試す
-
brain の名前を入力する。 たとえば
Sample brainのように。 -
「Choose folder」をクリックする。 ブラウザのファイル選択ダイアログが 開きます。リポジトリの
examples/sample-brainを選んでください。 -
「Create and index」をクリックする。 ファイル読み込み、チャンク化、 embedding 化の進捗が UI にストリーミングされます。
-
サイドバーで brain が
indexedと表示されたら、チャット入力欄に 質問を打ちます。たとえば:Why does LocalLens use QWEN3_1_7B_INST_Q4?
-
「Send」を押します。回答が
[1]、[2]の引用付きでストリーム表示され、 下部のソース一覧から元のファイルへ各引用がリンクされます。
UI の裏側
ブラウザアプリは src/ui/ 内のプレーンな HTML、JS、CSS です。
src/server.ts の Bun サーバーと、小さな JSON API で通信します。
| Method | Path | Body | Returns |
|---|---|---|---|
GET | /api/health | — | { ok: true, name: "LocalLens" } |
GET | /api/brains | — | { brains: Brain[] } |
POST | /api/brains/from-files | CreateBrainFromFilesInput | { brain: Brain } |
POST | /api/brains/:id/chat | { question: string } | ChatAnswer |
DELETE | /api/brains/:id | — | 204 No Content |
すべてのルートは src/locallens.ts の LocalLensApp に着地します。
ブラウザでのフォルダ選択
<input type="file" webkitdirectory> API は、フォルダの中身は渡しますが、
絶対パスは渡しません。LocalLens は brain を browser://my-folder のような
仮想パスで保存するので、どこから来たデータかは分かるようになっています。
サーバーの停止
Ctrl+C で src/server.ts の SIGINT ハンドラが発火します。これが
app.close() を呼んで QVAC を綺麗に片付けます。
process.on("SIGINT", async () => {
await app.close();
process.exit(0);
});