エージェントと対話するReddit風アプリ

AI/ML

概要

reddit-with-agentsは、Reddit風の投稿・スレッドUIの中で複数のLLM(大規模言語モデル)エージェントと対話できるシングルページアプリです。ユーザーは各投稿に対して複数のエージェントを割り当て、エージェント同士やユーザーとの会話を観察・操作できます。APIキーやエンドポイントは設定画面で指定可能で、全てのリクエストはブラウザから直接実行されるためサーバー実装は不要。学習用やプロトタイプ、UI検証に向いた軽量な実装例を提供しています(ライブデモあり)。

GitHub

リポジトリの統計情報

  • スター数: 3
  • フォーク数: 0
  • ウォッチャー数: 3
  • コミット数: 8
  • ファイル数: 12
  • メインの言語: TypeScript

主な特徴

  • ブラウザのみで動作するLLMクライアント:バックエンド不要でAPI呼び出しを直接実行
  • 複数エージェントによる投稿単位の会話管理:役割や性格を設定して応答を分割
  • 設定画面でOpenAI互換APIを指定可能:柔軟なプロバイダ切替え
  • シンプルなReddit風UIでスレッドを視覚化、プロトタイプとして使いやすい

技術的なポイント

このプロジェクトはTypeScriptで書かれたフロントエンド中心の実装で、設計上「クライアントサイド完結」を重視しています。OpenAI互換のAPI呼び出しをブラウザから直接行うため、APIキー管理はユーザー側で行われ、CORSやブラウザのセキュリティポリシーに依存します。UIは投稿とコメント(スレッド)の構造を模したコンポーネント群で構成され、各投稿に紐づく複数のエージェントが個別にリクエストを投げて応答を生成するフローが特徴です。

コードベースは比較的軽量で、依存関係を最小化することでデモ配布やローカル検証を容易にしています。エージェント設定や会話履歴の管理はクライアント側の状態管理(おそらくReactや類似フレームワークの状態機能想定)で行われ、ストリーミングや非同期レスポンスの扱いも考慮された作りになっています。実際の運用ではAPIキーの露出やレート制限、モデル費用など注意点がありますが、プロトタイプとしては「複数役割の会話エージェントを並列で動かす」実装例として学習価値が高いです。ライブデモが提供されており、ソースを改変してカスタムエージェントや新しいUIパターンの実験がしやすくなっています。

(注)ブラウザ直呼び出しは利便性が高い一方、セキュリティとコスト管理の観点から商用利用時はプロキシやバックエンドを挟む設計を検討する必要があります。

プロジェクトの構成

主要なファイルとディレクトリ:

  • .gitignore: file
  • LICENSE: file
  • README.md: file
  • eslint.config.js: file
  • index.html: file

…他 7 ファイル

まとめ

フロントエンドだけで複数LLMエージェントを試せる実践的なプロトタイプです。

リポジトリ情報:

READMEの抜粋:

Reddit With Agents

This web app is a Reddit-like experience where the user can interact with multiple LLM agents in a post.

The LLM agents are powered by OpenAI-like APIs, configurable in the “Settings” page, all of the LLM API calls are run directly in the browser, no backend is required.

Live Demo: https://redditwithagents.vercel.app/

redditwithagents

How to se…