mcpField
B
blink-storage

blink-storage

github.com/blink-newクラウド・DevOps440 回インストール2 週間前に更新
リポジトリ

blink-storage について

blink-storage は、アプリのファイルをアップロード、一覧表示、ダウンロード、削除する開発者向けの Blink ストレージ資料です。パス、認証要件、アップロード進捗の扱いを説明します。

主な機能

  1. 01ファイルをアップロードして公開 URL を取得
  2. 02パスの接頭辞でファイルを一覧表示
  3. 03名前を指定してダウンロードリンクを作成
  4. 04ファイルを単数または複数削除
  5. 05アップロード進捗を追跡

活用シーン

  1. 01アバターをアップロードして URL を保存
  2. 02画像をビジョン AI に渡す
  3. 03ディレクトリ単位でプロジェクトのファイルを確認
  4. 04不要になったファイルを削除

MCP 対応

ファイル一覧、公開 CDN URL の取得、削除に使う MCP ツール blink_storage_list、blink_storage_url、blink_storage_delete を説明します。

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/blink-new/blink-plugin --skill blink-storage

インストール後、Claude Code で/blink-storageを入力して読み込まれたか確認します。

詳細

MCP ツール

ツール説明
blink_storage_list任意のパスプレフィックスを指定して、プロジェクトストレージ内のファイルを一覧表示します
blink_storage_url保存済みファイルの公開 CDN URL を取得します
blink_storage_deleteストレージからファイルを削除します

はじめに

# Upload a file
blink storage upload ./photo.jpg --path uploads/photo.jpg

# List files
blink storage list

# List files in a path
blink storage list uploads/

認証要件

操作認証必須備考
upload()❌ いいえ追加専用(上書き不可)
download()✅ はい署名付き URL
remove()✅ はいJWT が必要

アップロード

const { publicUrl } = await blink.storage.upload(
  file,
  `uploads/${Date.now()}.${file.name.split('.').pop()}`,
  { onProgress: (percent) => console.log(`${percent}%`) }
)

SDK はコンテンツからファイルタイプを自動検出し、拡張子を修正します。アップロードは追加専用です。同じパスが重複した場合は 409 が返されます。一意性を保つため、タイムスタンプまたはランダム ID を使用してください。

ダウンロード

const { downloadUrl, filename } = await blink.storage.download('images/photo.jpg')
window.open(downloadUrl, '_blank')

// Custom filename
const { downloadUrl } = await blink.storage.download('images/photo.jpg', {
  filename: 'my-photo.jpg',
})

削除

await blink.storage.remove('uploads/file1.jpg')
await blink.storage.remove('file1.jpg', 'file2.jpg', 'file3.png')  // multiple

よくあるパターン

アバターのアップロード
const handleAvatarUpload = async (file: File) => {
  const { publicUrl } = await blink.storage.upload(
    file,
    `avatars/${user.id}-${Date.now()}.${file.name.split('.').pop()}`
  )
  await blink.auth.updateMe({ avatar: publicUrl })
  return publicUrl
}
進行状況を表示したアップロード
const [progress, setProgress] = useState(0)

const handleUpload = async (file: File) => {
  const { publicUrl } = await blink.storage.upload(
    file,
    `documents/${Date.now()}.${file.name.split('.').pop()}`,
    { onProgress: (percent) => setProgress(percent) }
  )
  return publicUrl
}
AI 画像入力の場合

最初にアップロードして、拡張子付きの HTTPS URL を取得します。これは AI ビジョンに必要です。

const { publicUrl } = await blink.storage.upload(photo, `photos/${Date.now()}.jpg`)
const { text } = await blink.ai.generateText({
  messages: [{ role: "user", content: [
    { type: "text", text: "What's in this image?" },
    { type: "image", image: publicUrl },
  ]}],
})

URL 形式

アップロードしたファイルは、直接アクセスできる HTTPS URL を返します:https://storage.googleapis.com/{project}/uploads/{filename}.{ext} — 公開アクセス可能で、HTTPS を使用し、ファイル拡張子が付いています。

よくあるエラー

エラー原因解決方法
409 conflictパスがすでに存在するタイムスタンプまたはランダム ID を追加します
Invalid path特殊文字サニタイズします:path.replace(/[^a-zA-Z0-9_\-\/\.]/g, '_')
File too large上限超過ファイルを圧縮するか分割します

コメント