AI Navigate

4日間でフレームワークなしのAIワークスペースを構築 — LLMがUI全体を制御

Dev.to / 2026/3/17

📰 ニュースDeveloper Stack & InfrastructureTools & Practical UsageModels & Research

要点

  • Sloth Spaceは、自然言語入力からコンテンツを生成する3つのモード(スライド、ドキュメント、シート)を備えたAIネイティブのワークスペースです。
  • 3つのモードは、単一の状態オブジェクト、1つのインテント・ルーター、1つのコンテキストメモリ、統一された対話モデルを共有するため、AIはアプリを1つのシステムとして扱います。
  • AIは、27個のホワイトリストに登録されたJavaScript関数を介してUIを制御し、プロジェクト作成、モード切替、文書リンク、チャットによるナビゲーションなどを可能にします。
  • フレームワークは使われず、純粋な Vanilla JavaScript(ESモジュール)で構築されており、すべてのデータに対して単一のグローバル状態オブジェクトを使用します。
  • アーキテクチャは、インテント・ルーター(Groqの無料プランで動作するLlama 8B)を用い、安全性チェックとクロスファイル・コンテキスト注入を組み合わせて、リンクされたファイルを読み取りコンテンツ生成とクロス参照に活用します。

私が作ったもの

Sloth Space は AIネイティブなワークスペースで、3つのモード — スライド、ドキュメント、そしてスプレッドシート。自然言語で必要なものを説明すると、AI が数秒で草案を作成します。

出典: github.com/enigmaticsloth/sloth-space

興味深い部分:統一アーキテクチャ

3つのモードは3つの別々のアプリをただくっつけたものではありません。1つの状態オブジェクト、1つのインテントルーター、1つのコンテキストメニューシステム、1つの保存パイプライン、そして1つのインタラクションモデル(クリック1回で選択、ダブルクリックで編集)を共有しています。AIはアプリ全体を3つではなく1つのシステムとして認識します。

約30個のESモジュールファイル、純粋なバニラJS、ビルドステップなし、フレームワークなし。

AIがUIを制御する

これが私が最も楽しみにしている部分です。LLMは単にテキストを生成するだけでなく、アプリケーションのインターフェースを直接操作します。

27個のホワイトリストに登録されたJS関数がモデルに公開されています。それはモードを切替え、プロジェクトを作成し、ファイルを整理し、ドキュメントを結びつけ、そしてナビゲートする — すべて1つのチャット入力から実行できます。

入力してみてください: 「Q2 という名前のプロジェクトを作成し、予算報告書を作成してそれをそこに置いてください」

システムはこれを多段階のシーケンスとして実行します:

  1. プロジェクト「Q2」を作成
  2. ドキュメントモードに切り替え
  3. 予算報告書を生成
  4. ドキュメントをプロジェクトに自動リンク

各ステップをリアルタイムで表示するモネ・オレンジのオーバーレイ付き。

仕組みの裏側

  • インテントルーター(Groqの無料ティア上のLlama 8B)が、すべてのユーザー入力を11個のインテントのいずれかに分類します
  • ルーターは関数名と引数を含むJSONを返します
  • executeUIActions() はホワイトリストチェック → スキーマ検証 → 実行を行います
  • resolveActionRefs() はあいまいな名称からIDへの解決を処理します — 「そのファイルを開く」で正しいファイルを見つけます
  • 破壊的なアクションは実行前にユーザーの確認を必要とします
  • コンテキストメモリにより、AIは最近の操作から「そのファイルを開く」などを解決します

ファイル間のコンテキスト注入

ファイルをプロジェクトにリンクすると、AIは新しいコンテンツを生成する際にそれら全てを読み取ります。

  • 「このプロジェクトを要約する」 → 接続されているすべてのドキュメントとスプレッドシートを読み取ります
  • 「研究からスライドを作成する」 → すべてのプロジェクトファイルを横断参照します
  • チャットで任意のファイル名を言及すると、AIが自動的にそれをプロンプトに取り込みます

ファイル間のコピーペーストは不要。手動でのコンテキスト設定も不要。

技術スタック

  • ReactもVueもバンドラもなし — 純粋な vanilla JS ESモジュール
  • すべての状態を1つの S オブジェクトに(状態管理ライブラリなし)
  • すべてのモジュールエクスポートが window に自動的にバインドされます — Object.entries ループ経由
  • CSSを14のモジュールファイルに分割
  • クラウド同期のオプションとしてSupabase + GitHub OAuth
  • BYO APIキー — Groq、OpenAI、Grok、Ollama、Claudeで動作
  • PPTXエクスポート、5つのスライドテーマ、18のスプレッドシート数式

4日間で1人で構築

ご意見を伺いたいです — 特に「LLMをUIコントローラとして」パターンについて。モデルに直接(ホワイトリストに登録された)インターフェイス制御を与えるのは正しい方向でしょうか、それともサンドボックス化する別の方法があるのでしょうか?