Open3
AppSheet + Google スプレッドシート 書込み、MCP連携
knaka Tech-Blog概要
- AppSheet + Google スプレッドシート 書込み , MCP 表示的なメモになります、
- ノーコード例
- LLM gemini 構成
- 用途としては、データベース未使用で、データ保存
- プロト版など、短時間で CRUD的アプリを開発する。
[ 公開 2025/05/28 ]
音声概要
- AIで生成された 音声概要になります
関連
構成
- AppSheet ノーコード
- Google スプレッドシート
- MCP
- Gemini
- Next.js + Vercel AI SDK
操作概要
- AppSheet は、今回は無課金です (人数制限は、ありそうです)
- アプリ設定は、上記を参考にしました。
- AppSheet アカウント作成
- スプレッドシートで、列名を決める。
- メモアプリ的なシートです。
- ID , Content , Created の例です
- 拡張機能 > AppSheet > アプリ作成
- アプリ画面に移動
- 列の設定
- TYPE: DateTime 等選択可能
- Require : 必須指定
- INITIAL VALUE: NOW等の設定
- 追加画面
- ID , 作成日は 自動入力
- 一覧
knaka Tech-Blogスプレッドシート連携 + MCP
- AppSheet で登録した スプレッドシートのデータ取得
- MCP クライアントで、表形式で表示
構成
- AppSheet ノーコード
- Google スプレッドシート
- MCP
- Gemini
- Next.js + Vercel AI SDK
- スプレッドシート連携は、前回 API連携と同様です。
- https://zenn.dev/link/comments/35a958a75b16fe
書いたコード
- .env
- GOOGLE_GENERATIVE_AI_API_KEY: gemini の鍵
- GOOGLE_API_KEY: アプリ鍵
- SPREADSHEET_ID_3: スプレッドシート ID
GOOGLE_GENERATIVE_AI_API_KEY="api-key"
GOOGLE_API_KEY="api-key"
SPREADSHEET_ID_3=""
- プロンプト参考
getSheetTestで、リストを markdown記法の表形式で表示して欲しい
- MDの、テーブル表示
- AppSheetで、編集データを表示
- tool
- mcp-next-5/app/tools/getSheetTest.ts
- スプレッドシート APIから、データ取得 MD変換
knaka Tech-BlogMCP , スプレッドシート連携 CSVダウンロード
- 前のMCPで、スプレッドシートのデータ表示の続編になります。
- 今回は、React構成です。
構成
- AppSheet ノーコード
- Google スプレッドシート
- MCP
- LLM Gemini
- Vite + React
- Vercel AI SDK
書いたコード
- スプレッドシート連携は、前回 API連携と同様です。
- https://zenn.dev/link/comments/35a958a75b16fe
- .env
- GOOGLE_GENERATIVE_AI_API_KEY: gemini の鍵
- GOOGLE_API_KEY: アプリAPI鍵
- SPREADSHEET_ID_1: スプレッドシート ID
- CSV_PATH_BASE: CSVダウンロードパス ベースURL
GOOGLE_GENERATIVE_AI_API_KEY="api-key"
GOOGLE_API_KEY="api-key"
SPREADSHEET_ID_1=""
CSV_PATH_BASE="http://localhost:3000/data/"
- プロンプト参考
getSheetCsvで。一覧のCSVダウンロードのリンク表示して欲しい。
- CSVファイル作成
- 下記リンクをおすと、CSVダウンロードできます。 の下リンク押すと。ダウンロードできます
- 出力したCSV , Google Drive(手動アップロード)
- AppSheet アプリ一覧
- tool 部分
- mcp_react1/src/tools/getSheetCsv.ts
- スプレッドシート APIから、データ取得 CSVファイル作成