こんにちは！本日は前日に公開された最新のWeb開発関連の英語記事をピックアップし、それぞれの記事を分かりやすくまとめてご紹介します。各記事は英語が元記事となっていますので、技術的な詳細や用語も現場水準でカバーしています。
TL;DR
- RailsとOpenAIを組み合わせたリアルタイム音声AIドライブスルー注文アプリの実装例とコード
- AIコーディングエージェントにプロジェクト独自情報を提示し、既存コード規約への適応性を向上させる手法
- マルチLLM環境でプロンプト種別に応じた自動ルーティングを実現するオープンソース基盤（LLM Router）の設計方針と活用法
Developing a voice AI app in Rails for drive-through ordering
本記事では、Rails 8とOpenAI（GPT-4）・Action Cableを活用したドライブスルー注文体験をシミュレートする音声AIアシスタントアプリの開発手法が解説されています。
リアルタイムEndpointとWebSocketの連携で、注文内容を音声で取得・返答し、音声内容のテキスト転写も表示可能にカスタム。
主にOpenAiWebsocketクラスでOpenAIモデルとの通信状態を監視・制御し、Action Cableでクライアントへリアルタイムにイベントを送信。
UI側（JS）ではマイク入力をAudio API経由で取得し、WebSocketを通じて音声を送出、発話時の即応性の確保とトランスクリプト表示が特徴。
コード例も含め、セッション開始時に自動でアシスタントから挨拶させる機能などを追加し、音声自動再生時のAudioContext仕様対策も網羅的に説明されています。
Rails/Action CableとOpenAIの組み合わせによるリアルタイムAIアプリを構築したい開発者に必見の記事です。
主なコード例・ポイント
def handle_message(message) if message["type"] == "input_audio_buffer.speech_started" handle_input_audio_buffer_speech_started(message) elsif message["type"] == "response.audio.delta" broadcast_audio_delta(message["delta"]) elsif message["type"] == "response.function_call_arguments.done" handle_response_function_call_arguments_done(message) elsif message["type"] == "response.output_item.done" if message["item"]["type"] == "function_call" puts "Function call done: #{message}" else transcript = message["item"]["content"][0]["transcript"] ActionCable.server.broadcast("open_ai_#{@session_id}", { type: "new_message", message: transcript }) end else log_message(message) end end
- クライアント側（JS）で新しいメッセージをDOMに追加して表示：
else if (data.type === "new_message") { // Create a new DOM element to show the new message const messageContainer = document.getElementById("messages"); const messageElement = document.createElement("div"); messageElement.innerText = data.message; messageContainer.appendChild(messageElement); }
- セッション開始時にAIが最初の挨拶を行う機能追加例（サーバー側）：
def new_session(event_id:) enqueue_message( { "event_id": event_id, "type": "response.create", "response": { "modalities": ["audio", "text"], "instructions": "Please great the customer and ask them what they would like to order.", "voice": "sage", "tools": [] } } ) end alias_method :greet_customer, :new_session
- スタートボタン押下時に音声ストリームを開始し、startOrderメソッドを呼び出すフロントJS例：
startButton.onclick = async () => { audioContext = new (window.AudioContext || window.webkitAudioContext)({ sampleRate: 24000, }); const stream = await navigator.mediaDevices.getUserMedia({ audio: { channelCount: 1, sampleRate: 24000, sampleSize: 16, }, }); const source = audioContext.createMediaStreamSource(stream); const processor = audioContext.createScriptProcessor(1024, 1, 1); source.connect(processor); processor.connect(audioContext.destination); processor.onaudioprocess = (e) => { const inputData = e.inputBuffer.getChannelData(0); const encodedAudio = base64EncodeAudio(new Float32Array(inputData)); subscription.sendAudio(encodedAudio); // Send audio data via WebSocket }; // Here is the new code :) subscription.startOrder(); startButton.disabled = true; stopButton.disabled = false; };
- 音声の自動再生を許可するAudioContext復帰処理例：
window.initAudioContext = async function() { ... if (window.audioContext.state === 'suspended') { await window.audioContext.resume(); console.log("AudioContext resumed from suspended state"); } }
キーワード
Rails, OpenAI, Action Cable, WebSocket, 音声認識, GPT-4, リアルタイムAI, JavaScript, Web Audio API
Enhancing AI Coding Agents with Project-Specific Information
AIコーディングエージェントがプロジェクト特有のコード規約やディレクトリ構成を把握できないという実情を踏まえ、シンプルで効果的な「project-infoファイル」導入手法を紹介した記事です。
このファイルはAIに特化したReadmeとして機能し、テストファイルの命名規則やベストプラクティスの参照先を明示的に記載することで、AIエージェントがプロジェクトに即したコード生成・修正を実現。
特にTheia IDEと連携した場合に、AI統合がこのファイル情報を自動で取り込み、プロジェクト特性を瞬時に把握する仕組みから実践的な運用例まで解説されています。
RAGやファインチューニングなど大掛かりなソリューションではなく、開発者が現場で「ズレ」を感じた箇所だけを必要に応じてincrementalに記載・メンテナンスするという軽量運用が推奨されています。
AIエンジンを現場の開発サイクルへより高精度で統合したい場合は、コードベースへのドキュメント連動のアプローチとして非常に参考となる内容です。
キーワード
AIコーディング, コーディングエージェント, プロジェクト規約, Project Info File, Theia IDE, LLM, コード自動生成, OpenAI
Show HN: LLM Router – Open-source prompt router for multi-LLM deployments
NVIDIAがOSSとして公開した「LLM Router」は、複数の大規模言語モデル（LLM）間でプロンプト内容やタスク分類に応じて最適なモデルへ自動的にルーティングするフレームワークです。
高速・低コスト・高精度のバランスを考慮し、Rust製プロキシコントローラとTritonサーバで動作。プロンプトを事前に分類し、例えばコード生成系はDeepSeek、雑談系はLlama、創造性重視はCreativityモデル、などポリシーベースで分岐します。
OpenAI API互換のインターフェースを持ち、各種PythonクライアントやLangChainなどのアプリも簡単に適用可能。主要な設定はYAML形式で記述し、新しいLLMの追加やポリシーのカスタマイズも容易です。
マルチLLM・オンプレ/クラウド混在のエンタープライズやAIエージェントのバックエンドとして、柔軟な運用と最適化を行いたい現場向けの実践リファレンスとなっています。
主な構成例と利用例
- ポリシーベース設定例（YAML）：
policies: - name: "task_router" url: http://router-server:8000/v2/models/task_router_ensemble/infer llms: - name: Brainstorming api_base: https://integrate.api.nvidia.com api_key: model: meta/llama-3.1-70b-instruct - name: Chatbot api_base: https://integrate.api.nvidia.com api_key: model: mistralai/mixtral-8x22b-instruct-v0.1
curl -X 'POST' \
'http://0.0.0.0:8084/v1/chat/completions' \
-H 'accept: application/json' \
-H 'Content-Type: application/json' \
-d '{
"model": "",
"messages": [
{ "role": "user", "content": "Hello! How are you?" },
{ "role": "assistant", "content": "Hi! I am quite well, how can I help you today?" },
{ "role": "user", "content": "Can you write me a song? Use as many emojis as possible." }
],
"max_tokens": 64,
"stream": true,
"nim-llm-router": {"policy": "task_router", "routing_strategy": "triton", "model": ""}
}'
複数LLMを運用する場合のアーキテクチャや安定運用の設計イメージ、カスタマイズポイントなどがまとめられています。
キーワード
LLM Router, マルチLLM, OpenAI API, プロンプトルーティング, Python, Rust, NVIDIA, AIエージェント
まとめ
今回ご紹介した記事は、最新のWeb開発・AI連携領域で「いかに実践的にAIを取り入れるか」に焦点を当て、音声AIアプリ構築、AIエージェントの現場最適化、複数LLM活用のための自動プロンプト振り分けシステムなど、現場ですぐに使えるノウハウが中心です。AI×Web開発でユーザー体験や開発効率を高めたい方は必読です。
IOではエンジニアを積極採用中！
IOでは常にエンジニアを積極採用しています。
少しでも興味を持っていただけた方は、ぜひカジュアル面談からでもご応募ください！
