vercel-storage

bởi openai

Chuyên gia hướng dẫn lưu trữ Vercel — Blob, Edge Config và lưu trữ Marketplace (Neon Postgres, Upstash Redis). Sử dụng khi lựa chọn, cấu hình hoặc sử dụng dữ liệu…

npx skills add https://github.com/openai/plugins --skill vercel-storage

Vercel Storage

You are an expert in Vercel's storage options. Know which products are active, which are sunset, and when to use each.

Provider Choice for Bootstrap

Choose storage provisioning paths in this order:

  1. Preferred: Vercel-managed Neon/Upstash through the Vercel Marketplace (vercel integration add ... or dashboard). This path auto-provisions accounts/resources and injects environment variables into the linked Vercel project.
  2. Fallback: Provider CLI/manual provisioning only when Marketplace is unavailable or you must use an existing external account.

When using fallback/manual provisioning, you must add/sync environment variables yourself and then re-run vercel env pull .env.local --yes locally.

Active First-Party Storage

Vercel Blob — File Storage

Fast, scalable storage for unstructured data (images, videos, documents, any files).

npm install @vercel/blob
import { put, del, list, get } from '@vercel/blob'

// Upload from server (public)
const blob = await put('images/photo.jpg', file, {
  access: 'public',
})
// blob.url → public URL

// Upload private file
const privateBlob = await put('docs/secret.pdf', file, {
  access: 'private',
})
// Read private file back
const privateFile = await get(privateBlob.url) // returns ReadableStream + metadata

// Client upload (up to 5 TB)
import { upload } from '@vercel/blob/client'
const blob = await upload('video.mp4', file, {
  access: 'public',
  handleUploadUrl: '/api/upload', // Your token endpoint
})

// List blobs
const { blobs } = await list()

// Conditional get with ETags
const response = await get('images/photo.jpg', {
  ifNoneMatch: previousETag,
})
if (response.statusCode === 304) {
  // Not modified, use cached version
}

// Delete
await del('images/photo.jpg')

Private Storage (public beta): Use access: 'private' for files that should not be publicly accessible. Read them back with get(). Do NOT use private access for files that need to be served publicly — it leads to slow delivery and high egress costs.

Blob Data Transfer: Vercel Blob uses two delivery strategies — Fast Data Transfer (94 cities, latency-optimized) and Blob Data Transfer (18 hubs, volume-optimized for large assets). The system automatically routes via the optimal path.

Use when: Media files, user uploads, documents, any large unstructured data.

Vercel Edge Config — Global Configuration

Ultra-low-latency key-value store for application configuration. Not a database — designed for config data that must be read instantly at the edge.

npm install @vercel/edge-config
import { get, getAll, has } from '@vercel/edge-config'

// Read a single value (< 1ms at the edge)
const isFeatureEnabled = await get('feature-new-ui')

// Read multiple values
const config = await getAll(['feature-new-ui', 'ab-test-variant', 'redirect-rules'])

// Check existence
const exists = await has('maintenance-mode')

Use when: Feature flags, A/B testing config, dynamic routing rules, maintenance mode toggles. Anything that must be read at the edge with near-zero latency.

Do NOT use for: User data, session state, frequently written data. Edge Config is optimized for reads, not writes.

Next.js 16: @vercel/edge-config@^1.4.3 supports cacheComponents and the renamed proxy.ts (formerly middleware.ts).

Marketplace Storage (Partner-Provided)

IMPORTANT: @vercel/postgres and @vercel/kv are SUNSET

These packages no longer exist as first-party Vercel products. Use the marketplace replacements:

Neon Postgres (replaces @vercel/postgres)

Serverless Postgres with branching, auto-scaling, and connection pooling. The driver is GA at @neondatabase/serverless@^1.0.2 and requires Node.js 19+.

npm install @neondatabase/serverless
// Direct Neon usage
import { neon } from '@neondatabase/serverless'

const sql = neon(process.env.DATABASE_URL!)
const users = await sql`SELECT * FROM users WHERE id = ${userId}`

// With Drizzle ORM
import { drizzle } from 'drizzle-orm/neon-http'
import { neon } from '@neondatabase/serverless'

const sql = neon(process.env.DATABASE_URL!)
const db = drizzle(sql)

Build-time safety: The neon() call above throws if DATABASE_URL is not set. Since Next.js evaluates top-level module code at build time, this will crash next build when env vars aren't yet configured (e.g., first deploy before Marketplace provisioning). Use lazy initialization:

// src/db/index.ts — lazy initialization (safe for build time)
import { neon } from '@neondatabase/serverless'
import { drizzle } from 'drizzle-orm/neon-http'
import * as schema from './schema'

function createDb() {
  const sql = neon(process.env.DATABASE_URL!)
  return drizzle(sql, { schema })
}

let _db: ReturnType<typeof createDb> | null = null

export function getDb() {
  if (!_db) _db = createDb()
  return _db
}

WARNING: Do NOT use JavaScript Proxy wrappers around the DB client. A common pattern is wrapping db in a Proxy for lazy initialization. This breaks libraries like NextAuth/Auth.js that inspect the DB adapter object (e.g., checking method existence, iterating properties). The Proxy intercepts those checks and breaks the auth request chain, causing hangs with no error. Use a plain getDb() function or a simple module-level lazy let instead.

Drizzle Kit migrations: drizzle-kit and tsx do NOT auto-load .env.local. Source env vars manually or use dotenv:

# Option 1: Source env vars before running
source <(grep -v '^#' .env.local | sed 's/^/export /') && npx drizzle-kit push

# Option 2: Use dotenv-cli (recommended for scripts)
npm install -D dotenv-cli
npx dotenv -e .env.local -- npx drizzle-kit push
npx dotenv -e .env.local -- npx tsx scripts/seed.ts

This applies to any Node script that needs Vercel-provisioned env vars — only Next.js auto-loads .env.local.

Install via Vercel Marketplace for automatic environment variable provisioning.

Neon CLI Fallback Notes

If you use Neon CLI as the fallback path, account/project setup is managed on Neon directly instead of through Vercel Marketplace automation.

For Vercel-managed Neon projects, CLI operations require a Neon API key; do not rely on normal browser-auth login flow alone.

Upstash Redis (replaces @vercel/kv)

Serverless Redis with same Vercel billing integration.

npm install @upstash/redis
import { Redis } from '@upstash/redis'

const redis = Redis.fromEnv() // Uses UPSTASH_REDIS_REST_URL & TOKEN

// Basic operations
await redis.set('session:abc', { userId: '123' }, { ex: 3600 })
const session = await redis.get('session:abc')

// Rate limiting
import { Ratelimit } from '@upstash/ratelimit'
const ratelimit = new Ratelimit({
  redis,
  limiter: Ratelimit.slidingWindow(10, '10s'),
})
const { success } = await ratelimit.limit('user:123')

Install via Vercel Marketplace for automatic environment variable provisioning.

Supabase (Marketplace Native)

Full Postgres database with built-in auth, realtime subscriptions, and storage. Native Vercel Marketplace integration.

npm install @supabase/supabase-js @supabase/ssr
import { createClient } from '@supabase/supabase-js'

const supabase = createClient(
  process.env.NEXT_PUBLIC_SUPABASE_URL!,
  process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
)

const { data, error } = await supabase.from('users').select('*')

Install via Vercel Marketplace: vercel integration add supabase

Prisma ORM (Marketplace Native)

Type-safe ORM with auto-generated client, migrations, and Prisma Accelerate for connection pooling.

npm install prisma @prisma/client
npx prisma init
import { PrismaClient } from '@prisma/client'

const prisma = new PrismaClient()
const users = await prisma.user.findMany()

Install via Vercel Marketplace: vercel integration add prisma

MongoDB Atlas

Document database with flexible schemas. Available via Vercel Marketplace.

npm install mongodb
import { MongoClient } from 'mongodb'

const client = new MongoClient(process.env.MONGODB_URI!)
const db = client.db('myapp')
const users = await db.collection('users').find({}).toArray()

Install via Vercel Marketplace: vercel integration add mongodb-atlas

Convex

Reactive backend-as-a-service with real-time sync, serverless functions, and file storage.

npm install convex
npx convex dev
import { query } from './_generated/server'
import { v } from 'convex/values'

export const getUsers = query({
  args: {},
  handler: async (ctx) => {
    return await ctx.db.query('users').collect()
  },
})

Turso (libSQL)

Edge-native SQLite database with embedded replicas for ultra-low latency reads.

npm install @libsql/client
import { createClient } from '@libsql/client'

const turso = createClient({
  url: process.env.TURSO_DATABASE_URL!,
  authToken: process.env.TURSO_AUTH_TOKEN!,
})

const result = await turso.execute('SELECT * FROM users')

Install via Vercel Marketplace: vercel integration add turso

Storage Decision Matrix

NeedUsePackage
File uploads, media, documentsVercel Blob@vercel/blob
Feature flags, A/B configEdge Config@vercel/edge-config
Relational data, SQL queriesNeon Postgres@neondatabase/serverless
Key-value cache, sessions, rate limitingUpstash Redis@upstash/redis
Postgres + auth + realtime + storageSupabase@supabase/supabase-js
Type-safe ORM with migrationsPrisma@prisma/client
Document database, flexible schemasMongoDB Atlasmongodb
Reactive backend with real-time syncConvexconvex
Edge-native SQLite with replicasTurso@libsql/client
Full-text searchNeon Postgres (pg_trgm) or Elasticsearch (Marketplace)varies
Vector embeddingsNeon Postgres (pgvector) or Pinecone (Marketplace)varies

Migration Guide

From @vercel/postgres → Neon

- import { sql } from '@vercel/postgres'
+ import { neon } from '@neondatabase/serverless'
+ const sql = neon(process.env.DATABASE_URL!)

Drop-in replacement: For minimal migration effort, use @neondatabase/vercel-postgres-compat which provides API-compatible wrappers for @vercel/postgres imports.

From @vercel/kv → Upstash Redis

- import { kv } from '@vercel/kv'
- await kv.set('key', 'value')
- const value = await kv.get('key')
+ import { Redis } from '@upstash/redis'
+ const redis = Redis.fromEnv()
+ await redis.set('key', 'value')
+ const value = await redis.get('key')

Installing Marketplace Storage

Use the Vercel CLI or the Marketplace dashboard at https://vercel.com/dashboard/{team}/stores:

# Install a storage integration (auto-provisions env vars)
vercel integration add neon
vercel integration add upstash

# List installed integrations
vercel integration list

Browse additional storage options at the Vercel Marketplace. Installing via the CLI or dashboard (https://vercel.com/dashboard/{team}/integrations) automatically provisions accounts, creates databases, and sets environment variables.

Official Documentation

Thêm skills từ openai

user-context
openai
Tải hoặc quản lý các tùy chọn định tuyến nguồn bền vững, logic giới thiệu, tiến trình thiết lập và sổ đăng ký lớp ngữ nghĩa của plugin Phân tích Dữ liệu.
official
notion-research-documentation
openai
Nghiên cứu nội dung Notion và tổng hợp thành các bản tóm tắt có cấu trúc, báo cáo hoặc so sánh kèm trích dẫn. Tìm kiếm và truy xuất các trang Notion bằng truy vấn mục tiêu, sau đó sắp xếp kết quả theo chủ đề với trích dẫn nguồn trong văn bản và phần tài liệu tham khảo. Chọn từ bốn định dạng đầu ra (tóm tắt nhanh, tổng hợp nghiên cứu, so sánh, báo cáo toàn diện) dựa trên phạm vi và mục tiêu của người dùng. Tạo và cập nhật các trang Notion bằng mẫu có sẵn; liên kết trực tiếp nguồn và theo dõi thay đổi khi
official
rcsb-pdb-skill
openai
Gửi yêu cầu RCSB PDB nhỏ gọn để lấy siêu dữ liệu cốt lõi, truy vấn API Tìm kiếm và tải xuống FASTA. Sử dụng khi người dùng muốn tóm tắt RCSB ngắn gọn; lưu JSON thô hoặc…
official
pdf
openai
Đọc, tạo và xác thực PDF với kết xuất trực quan và tạo theo chương trình. Kết xuất các trang PDF sang PNG để kiểm tra trực quan bố cục, khoảng cách và kiểu chữ trước khi bàn giao bằng Poppler (pdftoppm). Tạo PDF theo chương trình với reportlab để định dạng đáng tin cậy; trích xuất văn bản và siêu dữ liệu bằng pdfplumber hoặc pypdf. Thực thi các tiêu chuẩn chất lượng: không có văn bản bị cắt, phần tử chồng lấn, bảng bị hỏng hoặc hiện vật kết xuất; chỉ sử dụng dấu gạch nối ASCII, trích dẫn dễ đọc cho con người. Sử dụng...
official
test-coverage-improver
openai
Improve test coverage in the OpenAI Agents JS monorepo: run `pnpm test:coverage`, inspect coverage artifacts, identify low-coverage files and branches, propose…
official
playwright
openai
Tự động hóa trình duyệt qua terminal với ảnh chụp nhanh phần tử và quy trình UI tương tác. Hoạt động thông qua script wrapper playwright-cli (yêu cầu npx); hỗ trợ chế độ headless và headed để gỡ lỗi trực quan. Quy trình cốt lõi: mở trang, chụp nhanh để tham chiếu phần tử ổn định, tương tác bằng refs, chụp lại sau khi điều hướng hoặc thay đổi DOM. Bao gồm điền biểu mẫu, nhấp chuột, gõ văn bản, quản lý nhiều tab, chụp ảnh màn hình/PDF và ghi lại trace để gỡ lỗi luồng. Tham chiếu phần tử (ví dụ: e3, e15)...
official
ukb-topmed-phewas-skill
openai
Lấy các bản tóm tắt PheWAS UKB-TOPMed nhỏ gọn cho các biến thể đơn lẻ bằng cách chấp nhận đầu vào rsID, GRCh37 hoặc GRCh38 và phân giải thành truy vấn GRCh38 cần thiết. Sử dụng khi một…
official
code-review-context
openai
Ngữ cảnh hiển thị của mô hình
official