JsonUI

AI エージェント駆動の UI 開発プラットフォーム。

JsonUI は、AI エージェントが UI コードを書くことを前提に設計された開発プラットフォームです。仕様書ファーストのワークフローと、UI 生成・検証を担う専門エージェント群、CLI を組み合わせて、1 つの仕様から iOS (SwiftUI / UIKit)・Android (Jetpack Compose / XML)・Web (React + Tailwind) のネイティブ UI、UI テスト、ドキュメントを一括生成します。

GitHub で見る ドキュメント (準備中)

01 / What is JsonUI

JsonUI とは

多くのクロスプラットフォームフレームワークが「共通の抽象レイヤ」を提供するのに対し、JsonUI は仕様 (JSON) をソースオブトゥルースとし、プラットフォームごとにネイティブコードを生成します。実行時のブリッジや独自ランタイムを持たないため、各プラットフォームのネイティブ性能と表現力をそのまま活かせます。

生成対象は UI コードだけではありません。同じ JSON 定義から、UI テストコード、ドキュメント、型付きのプレビューやスニペットまでが一括生成されます。仕様と実装の乖離が構造的に起きにくい設計です。

02 / Philosophy

設計思想: AI にルールを破らせない

AI にコードを書かせるアプローチには、同じ仕様から出力するコードに揺れが出る、という根本的な問題があります。プロンプトを工夫しても、LLM の出力は確率的に変動します。

JsonUI のアプローチは、AI にルールを守らせるのではなく、ルールを破れない構造にすることです。JSON スキーマで UI を定義し、CLI がコード・テスト・ドキュメントを決定論的に生成します。AI は「スキーマをどう書くか」の領域だけを担当し、コード生成そのものには触れません。

さらに、専門化された AI エージェント群がスキーマ設計・レビュー・リファクタリングを分業します。各エージェントはツールレベルで操作範囲が制限されており、担当外の領域を書き換えることができません。これにより、同じ要件から何度生成しても出力が一貫します。

AI にルールを守らせるのではなく、ルールを破れない構造にする。

03 / Ecosystem

エコシステム

JsonUI は複数のリポジトリで構成されています。すべて TaiKim の GitHub で公開されています (TANOSYS リードエンジニアが個人で開発・保守)。

カテゴリ リポジトリ 用途
コアライブラリ SwiftJsonUI iOS (SwiftUI + UIKit)
コアライブラリ KotlinJsonUI Android (Jetpack Compose + XML)
コアライブラリ ReactJsonUI Web (React + Tailwind CSS)
CLI jsonui-cli sjui / kjui / rjui / jsonui-test / jsonui-doc を束ねる統合 CLI
AI エージェント JsonUI-Agents-for-claude Claude Code 用のエージェント
AI エージェント JsonUI-Agents-for-Codex OpenAI Codex CLI 用のエージェント
テストドライバ jsonui-test-runner-ios iOS (XCUITest)
テストドライバ jsonui-test-runner-android Android (UIAutomator)
テストドライバ jsonui-test-runner-web Web (Playwright)
開発補助 swiftjsonui-helper VS Code 拡張 (補完・ホバー)

04 / Demo

デモ: 最小の UI 定義

最小の JSON 定義から、3 プラットフォームで出力されるコードを並べました。実際のテンプレートやマッピングは各リポジトリの README で詳しく説明されています。

Source: view.jsonui
json 
{
  "type": "view",
  "children": [
    { "type": "text", "text": "Hello" },
    { "type": "button", "label": "Tap" }
  ]
}
iOS (SwiftUI)
swift 
VStack {
  Text("Hello")
  Button("Tap") { /* action */ }
}
Android (Jetpack Compose)
kotlin 
Column {
  Text("Hello")
  Button(onClick = { /* action */ }) {
    Text("Tap")
  }
}
Web (React)
tsx 
<div className="flex flex-col">
  <span>Hello</span>
  <button type="button">Tap</button>
</div>

上記コードは説明のための象徴的な出力例で、実際の CLI 出力と完全一致するとは限りません。各プラットフォームの現行バージョンでの出力は各リポジトリの README / サンプルをご参照ください。

05 / Get involved

もっと知る・関わる

  • ドキュメント

    ドキュメントサイトは準備中です。公開次第、こちらからリンクします。

    ドキュメント (準備中)

  • フィードバック

    機能要望・不具合は GitHub Issues で受け付けています。商用利用のご相談は TANOSYS へ。

    お問い合わせ

商用利用・導入のご相談はこちらから。

JsonUI の商用利用、導入支援、カスタマイズに関するご相談を歓迎します。

お問い合わせはこちら