v0 の SDK を試してみる

mkdir v0-sdk-example
cd v0-sdk-example
npm init -y
npm install v0-sdk
npm install typescript tsx @types/node --save-dev

export V0_API_KEY=your_api_key_here

import { v0 } from "v0-sdk";
 
const chat = await v0.chats.create({
  message:
    "ブログ記事の一覧を表示する Web アプリケーションを作成してください。記事はタイトルと作成日・サムネイル画像を含みます。",
  system: "あなたは React のエキスパートです。",
  // 追加の添付ファイルがあれば指定可能
  attachments: [{ url: "https://example.com/sample-image.png" }],
  // モデルの指定（省略可能）
  modelConfiguration: {
    modelId: "v0-1.5-sm",
    thinking: false,
    imageGeneration: false,
  },
});
 
console.log("Chat ID:", chat.id);
console.log("Response:", chat.text);
 
console.log("\n\n");
 
console.log("Chat URL:", chat.url);
console.log("Preview URL:", chat.demo);

npx tsx src/index.ts

Chat ID: jEMVcvEdTIB
Response: <Thinking>
ユーザーはブログ記事の一覧を表示するWebアプリケーションを作成したいと言っています。記事にはタイトル、作成日、サムネイル画像が含まれるとのことです。
 
Next.jsのApp Routerを使用して、レスポンシブなデザインでブログ記事一覧を作成します。shadcn/uiコンポーネントを使用してモダンなUIを構築し、サンプルデータを含めます。
 
# 省略...
 
Chat URL: https://v0.dev/chat/jEMVcvEdTIB
Preview URL: https://preview-kzmqeaoycx9y4tgr4sas.vusercontent.net

import { v0 } from "v0-sdk";
 
const chat = await v0.chats.create({
  message:
    "ブロック崩しゲームを作成してください。ゲームのルールは、ボールを操作してブロックを壊すことです。",
});
console.log("Generated Files:");
 
chat.files?.forEach((file) => {
  // ファイル名は file.meta.file で取得できる
  console.log("Meta:", file.meta);
  // ファイルの言語 typescriptreact, javascript, python など
  console.log("Language:", file.lang);
  // 生成されたコード
  console.log("Source Code:\n", file.source);
  console.log("\n\n");
});

Generated Files:
Meta: { file: 'breakout-game.tsx' }
Language: typescriptreact
Source Code:
 "use client"
 
import { useState, useEffect, useCallback } from "react"
import { Button } from "@/components/ui/button"
 
interface Ball {
  x: number
  y: number
  dx: number
  dy: number
}
 
# ...省略

import { v0 } from "v0-sdk";
 
const chatId = "jEMVcvEdTIB"; // 先ほどのチャット ID を使用
 
const chat = await v0.chats.createMessage({
  chatId,
  message: "ダークモードに切り替えできるようにしてください。",
});
 
console.log("Response:", chat.text);

import { v0 } from "v0-sdk";
 
// プロジェクトの一覧を取得
const projects = await v0.projects.find();
// プロジェクトを作成
const project = await v0.projects.create({
  name: "My New Project",
  description: "This is a new project created using v0 SDK.",
});
// chatID を指定してプロジェクトを取得
const projectById = await v0.projects.getByChatId({ chatId: "..." });
 
// rate limit の情報を取得
const rateLimits = await v0.rateLimits.find();
 
// ユーザーの情報を取得
const user = await v0.users.get();
// プランの情報を取得
const plan = await v0.users.getPlan();
// ユーザーのスコープ
const scopes = await v0.users.getScopes();
 
// deployments のログを取得
const deployments = await v0.deployments.findLogs({ deploymentId: "..." });
 
// Vercel のプロジェクトを取得
const projects = await v0.integrations.vercel.projects.find();
// Vercel のプロジェクトを作成
const vercelProject = await v0.integrations.vercel.projects.create({
  name: "My Vercel Project",
  projectId: "your-vercel-project-id",
});