Building Web & AI Software
mapyojojo's Lab
AI・画像認識×Web技術で日常や趣味を拡張する個人開発プロダクト集。
Core Technologies
Next.js
TypeScript
Tailwind CSS
Supabase
Gemini AI
Vision SDK
Featured Core Products
AI画像認識 × 自作SDKWebアプリケーション
マルチモーダルAIとエッジデータベースを融合させた、日常や趣味を自動化・効率化するフラグシッププロダクト。
Live
Gunpla Shelf
ガンプラ制作・積みプラ管理
Geminiによる画像認識を活用した積みプラ・制作記録・ギャラリー管理アプリ。キットパッケージから作品名や型番を判定し、制作状況や保管棚を一括トラッキング。
Gemini Vision AI によるパッケージ自動認識
制作ステータス・塗装ログ・棚管理
自作 @mapyojojo/vision-shelf-sdk 統合
Next.jsSupabaseGemini AI自作SDK
アプリを起動するLive
Kitchen Stock
調味料・食材管理
パッケージ写真から調味料情報や賞味期限をAI自動抽出。家族やチームでの共有棚機能も搭載し、食品ロスをゼロへ。
写真1枚で賞味期限・名称を高速スキャン
リアルタイム共有棚 ＆ 期限切れ通知
自作 @mapyojojo/vision-shelf-sdk 統合
Next.jsSupabaseGemini AI自作SDK
アプリを起動するDeveloper Package
Open Source SDK
画像認識による棚管理・アイテム解析機能をReact/Next.jsへ即座に統合する公式開発者SDK
@mapyojojo/vision-shelf-sdknpm package
パッケージ写真やラベルのAI解析、賞味期限・型番のメタデータ自動抽出、マルチ棚データのリアルタイム連動を簡易なコンポーネント群で提供します。
TypeScript 完全対応
React / Next.js Hook & Provider
Gemini Vision AI 自動連携
Install
$ npm i @mapyojojo/vision-shelf-sdkUsage
import { VisionShelfProvider, CameraScanner } from '@mapyojojo/vision-shelf-sdk';
export default function MyShelfApp() {
return (
<VisionShelfProvider apiKey={process.env.NEXT_PUBLIC_SHELF_KEY}>
<div className="p-6">
<CameraScanner
onItemDetected={(item) => {
console.log('検出アイテム:', item.title, item.expirationDate);
}}
/>
</div>
</VisionShelfProvider>
);
}Playground & Vibe Coding
Playground / Experiments
AIバイブコーディングや実験的アイディアから生まれたWebトイ・ミニゲームプロダクト