Onlook: Electron×React×AI を統合した次世代フロントエンド開発ツール


# はじめに

今回紹介する **Onlook** は、Electron+React+Tailwind に AI アシスタント機能や CLI、SWC/Babel プラグインなどを組み合わせ、**ビジュアル編集 × コード編集 × AI支援** を一体化して行うための新しい開発プラットフォームです。

https://github.com/onlook-dev/onlook

SNSでも話題です。

https://x.com/kawai_design/status/1884908670343086376

この記事では、Onlook リポジトリの構造や目的・主要機能、さらにセットアップ・導入方法をまとめていきます。
「何ができるのか」「どうやって使うのか」をざっくりイメージしていただければ幸いです。

---

## Onlookとは？

**Onlook** は、主にフロントエンド領域（React/Next.js/Vite など）での開発を**視覚的かつインタラクティブ**に行うためのトータルソリューションです。
以下のような特徴を備えています。

- **デスクトップアプリ (Onlook Studio)**  
  - Electron + React + Tailwind で作られており、GUI でコンポーネントの編集やレイアウト変更が可能。
  - ドラック＆ドロップで要素を配置し、必要に応じてコード差分を自動生成・適用できます。

- **AI アシスタント連携**  
  - チャット形式で要望を伝えると、コード差分を提案してくれる。
  - Tailwind のクラス追加やコンポーネント作成などを自動化し、プロトタイピングを加速します。

- **CLI ツール (onlook)**  
  - 新規プロジェクトの作成（テンプレート生成）や、既存プロジェクトへの設定適用を自動化。
  - `onlook create <project>` などのコマンドで手早く始められます。

- **SWC/Babel プラグイン**  
  - コード変換や属性の自動注入、解析などをビルド時に行うことで、Studio からのビジュアル編集と実際のソースコードを同期させられます。

- **Supabase 連携・Stripe など**  
  - ユーザー認証やアナリティクス、課金などの機能も含む。
  - 将来的には**ホスティングからデプロイ、分析、チームコラボ**まで一貫サポートする構想です。

「ノーコード」のアプローチに近いようでいて、本質的には**コード編集と AIサポートの両方**を柔軟に行える点が特徴。
たとえば、「このコンポーネントを React 18 の Suspense に対応させて」と指示し、AI がコード修正案を提示→ワンクリックで適用できる…といった使い方を狙っています。

---

## モノレポ構成の概要

Onlook は**複数のパッケージを一元管理したモノレポ**となっており、リポジトリの直下に `apps/`, `packages/`, `plugins/`, `tooling/` などのディレクトリが並んでいます。各ディレクトリの役割は以下の通りです。

- **`apps/studio/`**  
  Electron + React で作られたデスクトップアプリ（Studio）の実装が集約されています。メインプロセス(`electron/main/`)・プリロードスクリプト(`electron/preload/`)と、フロントエンド(`src/`)が混在し、Vite でビルドする仕組みです。

- **`packages/ai`**  
  AI によるコード生成・差分提案などを行うロジック。OpenAIなどの LLM とやり取りをしながら、コードブロックの比較や search-replace 形式の差分構築が可能。

- **`packages/cli`**  
  `onlook` という CLI コマンドを提供し、新規プロジェクトの雛形生成や既存プロジェクトへのセットアップをサポート。

- **`packages/foundation`**  
  CLIで使うフレームワーク操作など、Onlook の基盤的ロジックをまとめたライブラリ（テンプレートのクローン処理、フレームワークごとの設定など）。

- **`packages/models`**  
  チャットメッセージやコードアクション、プロジェクト設定など、Onlook 全体で共有する型定義・インターフェース群。

- **`packages/ui`**  
  Button, Dialog, Tooltip, Toast といった**React + Tailwind**ベースの UI コンポーネント集。Studio や他モジュールで使われる。

- **`plugins/`**  
  Babel プラグインおよび Next.js (SWC) プラグインを配置。ビルド時に JSX 等を解析・変換し、Onlook のビジュアル編集が可能になるよう仕込む。

- **`tooling/typescript`**  
  Vite React 用 / React Library 用など、TypeScript 設定プリセットを定義している。

レイヤーごとに切り分けられたこれらのパッケージを**npm/bun Workspaces** でまとめて管理するため、依存関係を一括インストールしたり横断的にビルドする仕組みが整えられています。

---

## Onlook Studio の機能

### 1. ビジュアルエディタ

Electron で起動する**Studio** は、プロジェクト内のコンポーネントを**キャンバス表示**し、要素をクリックするとプロパティやスタイル（Tailwindクラス）をGUIで編集できます。  
- **ドラック＆ドロップで要素の追加・並び替え**  
- **Tailwind クラスのリアルタイム更新**（AI補完も可能）  
- **複数デバイスプレビュー (例: iPhone, iPad, Desktop)**  
- **プロジェクト保存**で実際のソースファイルに差分を反映

この際に**plugins/babel** や **plugins/next** が間に入ることで、`data-onlook-id` などが注入された JSX を正しく解析し、編集結果を**構文木に落とし込んだ上で自動でコードを書き換える**仕組みになっています。

### 2. 要素毎のチャット連携

特定のコンポーネントを選択した状態で**AIチャット**を開き、「この部分をカード風デザインにして」「写真を挿入して」などの要望を送ると、Onlook は**差分（Search-Replace形式）** を生成しエディタに反映します。  
これにより、**コーディングする手間を省略**しながら、ツールにデザインを任せることが可能です。

### 3. プロジェクト管理・デプロイ

- **プロジェクト切替 / 新規作成**: Studio内で「Import Existing Project」「Create New」などのタブがあり、容易に切り替えられます（まだベータかもしれませんが）。
- **SupabaseやStripe連携**: ユーザー認証を活用してサインイン・サインアウトしたり、クラウドへのホスティングを部分的に自動化できる可能性があります。

---

## AI アシスタントとの連携

リポジトリ内の `packages/ai` には、**AI とのやりとりを行うためのプロンプト生成・コードブロック差分解析ロジック**がまとめられています。
特に以下のような仕組みがあるようです。

- **Prompt テンプレート**  
  コード編集用のプロンプトやシェルコマンドの提案など、いくつかのパターンが定義されている (`file.ts`, `edit.ts`, `shell.ts` など)。
- **差分生成 (diff-match-patch)**  
  “検索ブロック” と “置換ブロック” を仕切り文字で区切るフォーマットで差分を管理し、AI が部分的な変更を出力した時に Onlook が再構築して適用する。
- **コンテキスト送信**  
  選択しているファイルやハイライト範囲を AI に渡すことで、ピンポイントな編集提案を受け取れる。

これにより、チャットUIの「修正依頼」→「差分提案」→「エディタ適用」という一連の流れを円滑にしています。

---

## CLI やプラグインがもたらす拡張性

### 1. onlook CLI

`packages/cli` にある `onlook` コマンドは以下のような機能を担当します。

- **プロジェクト作成**:  
  `onlook create <project-name>` でReact/Next.js等のテンプレがダウンロードされ、セットアップ完了まで自動化します。
- **セットアップ**:  
  既存のプロジェクトに対し、Babelプラグインや SWC のインストール設定、Onlook 用のconfig ファイルなどを追加してくれます。

Onlook Studio を使う前に**最低限の準備**を手早く行える点が便利です。
ソースコードを見ると、`foundation` パッケージでフレームワーク別に雛形を切り替えたりもしている模様。

### 2. Babel / SWC プラグイン

- **`plugins/babel`**  
  JSX要素に `data-onlook-id` を付与・除去するなど、Onlook のビジュアル編集に必要な仕込みを行うための Babel プラグイン。
- **`plugins/next`**  
  Next.js 用のプラグイン（SWC 版）。`swc_plugin_onlook.wasm` という形でコンパイルされ、Next.js の `next.config.mjs` の `experimental.swcPlugins` で読み込む方式です。

いずれも**ビルド過程**でコードを解析・変換するため、Onlook Studio が正しくコンポーネントを認識・編集するのに欠かせないコンポーネントです。

---

## セットアップ手順

オンプレやローカルで Onlook を動かしてみる場合、ざっくり以下のフローです。

1. **Bun or Node.js + npm 等を用意**  
   リポジトリは Bun での運用を想定しているため、`bun install` が推奨。  
2. **リポジトリをクローン → 依存インストール**  
   ```bash
   git clone https://github.com/onlook-dev/onlook.git
   cd onlook
   bun install
   ```
3. **Onlook Studio (Electronアプリ) を起動**  
   ```bash
   cd apps/studio
   bun dev
   ```
   これで Vite と Electron が立ち上がり、エディタ画面が起動。  
4. **環境変数を設定 (必要なら)**  
   `apps/studio/.env.example` をコピーし、Supabase などのキーが必要なら入力しておきます。  
5. **プロジェクトを作成 or 読み込み**  
   - CLI: `onlook create myapp`  
   - Studio GUI上で「Create Project」or「Load Project」を選び、手元のアプリを取り込む。  
6. **ビジュアル編集 & AI連携**  
   コンポーネントをクリックして Tailwind クラスを編集、AI チャットから差分コードを反映などを試します。

より詳細なステップやトラブルシュートは [GitHubリポジトリ](https://github.com/onlook-dev/onlook) の README / Wiki をご参照ください。

---

## まとめ

**Onlook** は、フロントエンド開発を中心に「ノーコード的なビジュアル編集」「AI支援チャット」「CLI ツール」「コード変換プラグイン」など、**必要な要素を一つのプラットフォームで統合**しようとする意欲的なプロジェクトです。

- **コアアプリ (Studio)** を通して、React/Next.js の画面を直感的に編集しつつ、AI が提案した差分を簡単に適用できる。
- **CLI** により、新規プロジェクト作成やセットアップが数コマンドで完結。
- **Supabase/Stripe など外部サービス** との連携機能もあり、将来的にはデプロイ・チーム開発・課金も一貫管理できるかもしれません。

試しに**ローカルで Onlook Studio を起動してみる**と、Tailwind やコンポーネントをビジュアル編集しながらすぐに実行確認できるため、プロトタイプ制作が非常に捗るはず。
ぜひ興味のある方はリポジトリをクローンし、一度触ってみてください。


### 参考

[GitHub リポジトリ](https://github.com/onlook-dev/onlook)

---
### 会社紹介

**株式会社 Mosaica**  
最先端テクノロジーで社会課題を解決し、持続可能な未来を創造する IT カンパニー。
AI ソリューション、クラウド統合、DX 推進、経営コンサルティングなど包括的なサービスでビジネス変革を支援しています。  

詳しくは [公式サイト](https://mosaica.co.jp/) までお気軽にご相談ください。
公式サイト： https://mosaica.co.jp/