Launched
VibeWithGraph〜GUIで軽量でシンプルなGitクライアントアプリ〜のアイコン

VibeWithGraph〜GUIで軽量でシンプルなGitクライアントアプリ〜

Vibe Coding向けの軽量Git GUIクライアント。Tauri+Rustで高速起動、シンプルなUIでコミット・プッシュ・ブランチ操作、視覚的なコンフリクト解消機能を搭載。AIとのプロダクト開発を邪魔しない、必要最低限の機能に特化したツールです。

Visit Product
プロダクトの感想・意見はこのエリアに表示されます

軽量Git GUIがなかったのでTauriで作った話

はじめに

AIとペアプロする時代がやってきました。
いや、もはやAIにほぼほぼ任せてしまう時代になっているのかもしれません。

Claude CodeやGitHub Copilot、Cursorなど、AIと一緒にコードを書く「Vibe Coding」が当たり前になりつつあります。AIが出力したコードをレビューして承認、または違ったら再度出力してもらって、そして短期間で開発を行う。そんな開発体験になってきました。

でも、そんな快適な開発フローの中で、ひとつだけ引っかかるものがありました。

Git操作です。

SourceTreeを開く?
UIがちょっと複雑でバイブコーディングではそこまで使いません。

VSCodeのGit logを使用する?
Gitを見たいだけなのにエディタを開きますかね。

じゃあCLI?
いや、初心者にはハードルが高いし、コンフリクト解消は視覚的に確認したいんですよね。私自身CUIに苦手意識あります。Vim怖い。

「軽くて、シンプルで、今すぐ使えるGit GUIが欲しい」

そう思って、開発しました。それが「VibeWithGraph」です。

メイン画面
VibeWithGraphのメイン画面

VibeWithGraphとは

VibeWithGraphは、Vibe Codingのために作られた軽量Git GUIクライアントです。

コンセプトは「simple git log for vibe coding」。
名前の通り、コミットグラフを見やすく表示しながら、必要最低限のGit操作ができます。

  • コミット履歴の可視化
  • ブランチの切り替え・作成・削除
  • Push / Pull / Fetch
  • ファイルのステージング
  • コンフリクト解消

やれることはシンプルです。でも、Vibe Codingに必要な機能はちゃんと揃ってます。


なぜ作ったのか

既存ツールへの不満

世の中にはたくさんのGit GUIがありますよね。どれも高機能で、多くの人に使われています。

でも、私が欲しかったものとはちょっと違いました。

重い。

アプリを起動するのに数秒かかります。
動作は軽ければ軽い方がいいです。

機能が多すぎる。

Gitを使いこなすときっと色々便利なのでしょうが、私はまだそこまで至っていません。
なら、それなりの機能がわかりやすく配置してあったら便利ではないでしょうか?

軽いものはCLIばかり。

lazygitは軽くていいんですけど、キーボード操作に慣れていない人には敷居が高いですよね。押し間違えも怖いです。
コンフリクト解消も、視覚的に「どっちを採用するか」選びたい場面があります。

Vibe Codingとの相性

Vibe Codingの本質はスピードだと思っています。

AIが提案したコードを取り込む。動かす。うまくいかなければ戻す。この繰り返しを高速に回すことで、開発が進んでいくものだと思います。

そのフローの中で、Git操作は「意識しないくらい軽く」あってほしい。
だから、起動は一瞬。操作は直感的。余計な機能はいらない。

そんなツールが欲しかったんです。
なかったから、作りました。


特徴

1. 軽量・高速

VibeWithGraphはTauriで作られています。

TauriはElectronの代替として注目されているフレームワークで、バックエンドがRustで書かれています。Chromiumを丸ごとバンドルするElectronと違い、OSのWebViewを使うので、アプリサイズが圧倒的に小さいです。

実際、ビルド後のアプリサイズはおよそ21MB(MacOSでの場合)。
起動も一瞬です。

Git操作にはgit2-rsというRustのライブラリを使っています。
これはlibgit2のRustバインディングで、CLIのgitコマンドを叩くのではなく、直接Gitリポジトリを操作します。

つまり速いんです。

2. シンプルなUI

コミットグラフの様子
VibeWithGraphのメイン画面

画面は3ペイン構成です。

  • 左: ファイルリスト(ステージング操作)
  • 中央: コミットグラフ
  • 右: コミット詳細・差分表示

コミットグラフはブランチごとに色分けされていて、マージやブランチの分岐が一目でわかります。
HEADの位置もハイライトされるので、「今どこにいるか」が迷わないです。

3. コンフリクト解消がしやすい

コンフリクト解消の様子
コンフリクト解消の様子

マージでコンフリクトが発生すると、専用のダイアログが表示されます。

  • 一括解決: 全ファイルを「自分側」または「相手側」で一気に解決
  • ファイルごとに解決: 各ファイルを個別に確認しながら解決

Vibe Coding中、AIが生成したコードと自分の変更がぶつかることって珍しくないですよね。そんなとき、サクッと「AI側を採用」「自分側を採用」と選べるのは、便利です。


技術スタック

レイヤー技術
フロントエンドReact 19 + TypeScript
スタイリングTailwind CSS 4
状態管理Zustand
バックエンドRust + Tauri 2.9
Git操作git2-rs(libgit2バインディング)
ビルドVite + Cargo

今後の展望

AIコミットメッセージ生成

変更内容からコミットメッセージを自動生成する機能を予定しています。

CursorとかAntigravityとかにあるような機能です。
あれがないとコミットするのが結構面倒だったりしますし、自分が考えて書くよりわかりやすかったりします。

なので、自前のAPIキーがあればそれを使ってコミットメッセージを作成する機能を入れたいです。

コミュニティからのフィードバック

現在、VibeWithGraphはMITライセンスで公開しています。

「こんな機能が欲しい」「ここが使いづらい」といったフィードバックは大歓迎です!GitHubのIssueで気軽に教えてください。


おわりに

VibeWithGraphは、自分が欲しかったツールを形にしたものです。

軽い。シンプル。すぐ使える。

Vibe Codingのお供として、ぜひ試してみてください!


リンク

Explore More
関連記事はありません。