Dialup (日本語)

WebSocket-first のライブ UI と 自動生成される HTTP MCP API を備えた、ファイルベースルーティングの Elixir フレームワーク。

概要

Dialup は Next.js のような開発体験でライブアプリを構築できる Elixir フレームワークです。中核は二つあります。人間向け UI は最初から WebSocket-first で動き、HTTP MCP API は同じページ宣言から自動生成されます。各ページは 1 つの監視されたサーバー側アクターです。UI を <.dialup_action> と <.dialup_region> で書くと、Dialup が tools/list、tools/call、read_scene を導出します。 REST API の二重実装は不要です。

人間ブラウザ  ──WebSocket──►  UserSessionProcess  ◄──HTTP JSON-RPC──  AI エージェント
                                      │
                               handle_event/3
                                      │
                          declare_action / dialup_action

特徴

WebSocket-first の人間 UI — /ws と idiomorph によるライブ DOM 更新
自動生成される HTTP MCP API — action / region 宣言がそのままエージェントツールになる
同じイベント経路 — ブラウザ操作とエージェントの tools/call が handle_event/3 を共有
HTTP MCP — POST /agent/:token で initialize / tools/list / tools/call
エージェント向け discovery — /.well-known/dialup-agent、ページ埋め込み、/llms.txt
スコープ付きセッショントークン — 有効期限・投影・ capability を細かく制御
ファイルベースルーティング — ファイル配置がそのまま URL になる
サーバーサイドステート — 1 タブ = 1 UserSessionProcess
コロケーション CSS — .ex の隣に .css、コンパイル時に自動スコープ化

クイックスタート

1. ジェネレータのインストール

mix archive.install hex dialup_new

2. 新規プロジェクト作成

mix dialup.new my_app
cd my_app
mix deps.get
mix run --no-halt

http://localhost:4000 にアクセス

エージェント対応ページの最小例

defmodule Dialup.App.Page do
  use Dialup.Page

  declare_action name: :increment, desc: "カウンタを増やす", params: %{}

  def mount(_params, assigns), do: {:ok, Map.put(assigns, :count, 0)}
  def agent_state(assigns), do: %{count: assigns.count}

  def handle_event(:increment, _, assigns) do
    {:update, Map.update!(assigns, :count, &(&1 + 1))}
  end

  def render(assigns) do
    ~H"""
    <p>Count: {@count}</p>
    <.dialup_action name={:increment}>+1</.dialup_action>
    """
  end
end

同じ <.dialup_action> が、ブラウザでは WebSocket 経由のボタンになり、エージェントには生成された MCP ツールとして見えます。ブラウザで操作することも、トークンを取得して API を呼び出すこともできます（詳細は HTTP MCP API）:

curl -X POST http://localhost:4000/agent/TOKEN \
  -H 'Content-Type: application/json' \
  -d '{"jsonrpc":"2.0","id":1,"method":"tools/call","params":{"name":"read_scene","arguments":{}}}'

ドキュメント

mix docs --open で全文を参照できます。

Events — WebSocket-first UI のイベントと更新
HTTP MCP API — ツール自動生成・discovery・バージョニング
Agent-native アプリ開発 — 実装ワークフロー
セッショントークン — ライブセッションへの接続
Getting Started — インストールと基本

その他は guides/ を参照（ルーティング、状態管理、デプロイなど）。

アーキテクチャ

Browser (人間)      AI agent (MCP client)
     |                      |
dialup.js ──WS──► UserSessionProcess ◄──POST /agent/:token──
     |                      |
 idiomorph              render/1 + handle_event/3
                             |
                    declare_action / dialup_region
                             │
                      tools/list (HTTP)

ライセンス

MIT

← Previous Page Dialup (English)

Next Page → Dialup Guides