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

Posted at 2025-01-30

はじめに

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

SNSでも話題です。

この記事では、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 を動かしてみる場合、ざっくり以下のフローです。

Bun or Node.js + npm 等を用意
リポジトリは Bun での運用を想定しているため、bun install が推奨。

リポジトリをクローン → 依存インストール

git clone https://github.com/onlook-dev/onlook.git
cd onlook
bun install

Onlook Studio (Electronアプリ) を起動
```
cd apps/studio
bun dev
```
これで Vite と Electron が立ち上がり、エディタ画面が起動。
環境変数を設定 (必要なら)
apps/studio/.env.example をコピーし、Supabase などのキーが必要なら入力しておきます。
プロジェクトを作成 or 読み込み
- CLI: onlook create myapp
- Studio GUI上で「Create Project」or「Load Project」を選び、手元のアプリを取り込む。
ビジュアル編集 & AI連携
コンポーネントをクリックして Tailwind クラスを編集、AI チャットから差分コードを反映などを試します。

より詳細なステップやトラブルシュートは GitHubリポジトリの README / Wiki をご参照ください。

まとめ

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

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

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

参考

GitHub リポジトリ

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up