Vibe Coding Apps

このリポジトリは、AIを活用して構築された様々なアプリケーションを収録したモノレポです。各アプリケーションは独立して開発・デプロイされており、GitHub Pagesでライブデモが公開されています。

🌐 ライブデモサイト

GitHub Pages: https://kazuph.github.io/vibe-coding-apps/

📁 モノレポ構造

このリポジトリは以下の構造で構成されています：

vibe-coding-apps/
├── docs/                    # GitHub Pages公開用ディレクトリ
│   ├── index.html          # メインランディングページ
│   ├── face-crop/          # Face Cropperのライブデモ
│   ├── fitness-bike/       # Fitness Bikeのライブデモ
│   └── kids-learning/      # Kids Learningのライブデモ
├── face-crop-app/          # AI Face Cropperソースコード
├── fitness-bike-webbluetooth/ # Fitness Bike Reactアプリソースコード
├── fitness-bike-node-ble-tui/ # Fitness Bike Node.jsアプリソースコード
├── techbook-preview-extension/ # Chrome Extension
└── techbook-swipe-extension/   # Chrome Extension

🔄 プロジェクト対応表

ソースコード	ライブデモ	説明
face-crop-app/	docs/face-crop/	MediaPipe Face Detector
fitness-bike-webbluetooth/	docs/fitness-bike/	Web Bluetooth API版
fitness-bike-node-ble-tui/	なし	Node.js TUI版（Bluetooth制御）
techbook-*-extension/	なし	Chrome Extensions
なし	docs/kids-learning/	学習アプリ（スタンドアロン）

プロジェクト一覧

🎯 AI Face Cropper

MediaPipe Face Detectorを使用した高精度な顔検出・画像切り抜きアプリケーション

• ライブデモ: https://face-cropper.kazuph.workers.dev/
• ソースコード: face-crop-app/
• 技術スタック: MediaPipe, JavaScript, Cloudflare Workers
• 機能:
  • 高精度な顔検出
  • カスタマイズ可能な切り抜きサイズ
  • 明るさ・彩度の正規化
  • バッチ処理対応

🚴‍♂️ Fitness Bike Controller

Web Bluetooth APIを使用したフィットネスバイク制御アプリケーション

• ライブデモ: https://kazuph.github.io/vibe-coding-apps/fitness-bike/
• ソースコード: fitness-bike-webbluetooth/
• 技術スタック: React, Web Bluetooth API, TypeScript, Vite
• 機能:
  • BLE経由でのフィットネスバイク接続・制御
  • リアルタイム運動データ表示（速度、パワー、カロリー）
  • 負荷レベル調整（80段階）
  • ワークアウト統計とグラフ表示
  • 運動記録の保存・管理

📚 技術書典プレビュー Chrome Extension

技術書典の本一覧ページで、本のリンクにマウスオーバーすると詳細情報をプレビュー表示するChrome Extension

• ソースコード: techbook-preview-extension/
• 技術スタック: Chrome Extension Manifest V3, JavaScript, CSS
• 機能:
  • マウスホバーで詳細情報を即座に表示
  • マークダウン記法の解釈
  • スマートな位置調整
  • 高速キャッシュ機能

💕 技術書典Tinderスワイプ Chrome Extension

技術書典の書籍一覧をTinder風のスワイプUIで効率的に閲覧できるChrome Extension

• ソースコード: techbook-swipe-extension/
• 技術スタック: Chrome Extension Manifest V3, JavaScript, CSS
• 機能:
  • 📚 書籍一覧をカード形式で表示
  • 👈 左スワイプ（バツ）：書籍をスキップして非表示に
  • 👉 右スワイプ（ハート）：書籍を新しいタブで開く（現在のタブの右隣に配置）
  • ❤️ ハートした書籍にはマークを表示
  • 🔄 スワイプ履歴を保存し、次回訪問時も反映
  • 📖 詳細ページから書籍の概要・価格・タグを自動取得
  • ⌨️ キーボード操作対応（左右矢印キー、ESCキー）
  • 🎯 ドラッグ＆スワイプ、ボタンクリック、キーボード操作に対応

🚀 デプロイメント

GitHub Pages

• ライブデモ: docs/ディレクトリから自動デプロイ
• URL: https://kazuph.github.io/vibe-coding-apps/
• 更新方法: docs/内のファイルを更新してプッシュ

Cloudflare Workers/Pages

• 本格運用版: 各アプリケーションは個別にCloudflare WorkersまたはPagesにデプロイ
• デプロイコマンド: 各プロジェクトディレクトリ内でnpm run deployまたはpnpm run deploy

🧠 agentOS Hybrid Dev Runtime

このリポジトリには、開発オーケストレーション専用の agentOS + sandbox-agent ランタイムを tools/agentos-dev/ に追加しています。root は pnpm-workspace 対応済みです。

• root の package.json と pnpm-workspace.yaml は monorepo 管理とこの開発ランタイムの導線です
• 既存アプリの install / build / deploy を root に集約する意図はありません
• 既存プロジェクトの作業手順は、引き続き各ディレクトリ直下の package.json / lockfile を正として扱ってください

よく使うコマンド:

pnpm doctor:agentos
pnpm sync:pi
pnpm dev:agentos
pnpm smoke:agentos
pnpm agentos:list-projects
pnpm agentos:open -- --project lesson-booking
pnpm verify:pi -- --project ai-wakuwaku-zukan

agentos:open は既定で workspaceVm + pi を使うので、そのままで各 project を agentOS 上に開けます。sandbox-agent 側を使いたいときだけ --surface sandbox --agent <name> を足してください。

詳しくは tools/agentos-dev/README.md を参照してください。

🐍 vibe-local Pyodide Browser Core

vibe-local-pyodide/ は、ochyai/vibe-local の思想をブラウザ向けに切り出した app です。CLI/TUI や subprocess は持ち込まず、Pyodide + React の browser core を agentOS actor + SQLite に接続して session と transcript を持続しつつ、OpenAI 互換 API に接続します。agentOS が見つからないときだけ browser-local の Pyodide 保存へフォールバックします。

よく使うコマンド:

pnpm dev:vibe-local-agentos
pnpm dev:vibe-local-pyodide
pnpm vibe-local:cli health
pnpm vibe-local:cli projects
pnpm vibe-local:cli run-script vibe-local-pyodide check
pnpm vibe-local:cli agent-run vibe-local-pyodide "git status を見て要約して"
pnpm check:vibe-local-pyodide
pnpm build:vibe-local-pyodide
pnpm --filter @kazuph/vibe-local-pyodide run test:e2e

pnpm dev:vibe-local-agentos を使うと、agentOS manager と vibe-local-pyodide を一緒に起動できます。画面左の Status が agentOS actor なら、会話と transcript は agentOS 側の actor-local SQLite に保存されています。

browser UI では、

• session / transcript chat
• project 一覧
• repo search
• file open / save
• git status / diff stat
• project-local script 実行
• selected project を優先した tool-calling agent run

が使えます。CLI は pnpm vibe-local:cli ... で同じ actor-backed service を叩きます。

vibe-local parity の優先順位

この repo では、vibe-local 互換を広げるときの優先順位を固定しています。

1. ツール実行の強化
2. Plan / Act / approve フロー
3. サブエージェント / 並列エージェント

次は進めない方針です。

• checkpoint / rollback

後回しにする項目は次です。

• file watcher
• auto-test loop

ライセンス

このプロジェクトはMITライセンスの下で公開されています。