125k

v0 で開く

PreviousNext

レジストリを Open in v0 と連携します。

レジストリが URL でホストされ、公開アクセスできる場合、https://v0.dev/chat/api/open?url=[URL] エンドポイントを使ってレジストリアイテムを v0 で開けます。

例: https://v0.dev/chat/api/open?url=https://ui.shadcn.com/r/styles/new-york/login-01.json

ボタン

独自の Open in v0 ボタンの作り方はOpen in v0 ボタンを作るをご覧ください。

サイトに Open in v0 ボタンを追加するシンプルな例を紹介します。

import { Button } from "@/components/ui/button"
 
export function OpenInV0Button({ url }: { url: string }) {
  return (
    <Button
      aria-label="Open in v0"
      className="h-8 gap-1 rounded-[6px] bg-black px-3 text-xs text-white hover:bg-black hover:text-white dark:bg-white dark:text-black"
      asChild
    >
      <a
        href={`https://v0.dev/chat/api/open?url=${url}`}
        target="_blank"
        rel="noreferrer"
      >
        Open in{" "}
        <svg
          viewBox="0 0 40 20"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
          className="h-5 w-5 text-current"
        >
          <path
            d="M23.3919 0H32.9188C36.7819 0 39.9136 3.13165 39.9136 6.99475V16.0805H36.0006V6.99475C36.0006 6.90167 35.9969 6.80925 35.9898 6.71766L26.4628 16.079C26.4949 16.08 26.5272 16.0805 26.5595 16.0805H36.0006V19.7762H26.5595C22.6964 19.7762 19.4788 16.6139 19.4788 12.7508V3.68923H23.3919V12.7508C23.3919 12.9253 23.4054 13.0977 23.4316 13.2668L33.1682 3.6995C33.0861 3.6927 33.003 3.68923 32.9188 3.68923H23.3919V0Z"
            fill="currentColor"
          ></path>
          <path
            d="M13.7688 19.0956L0 3.68759H5.53933L13.6231 12.7337V3.68759H17.7535V17.5746C17.7535 19.6705 15.1654 20.6584 13.7688 19.0956Z"
            fill="currentColor"
          ></path>
        </svg>
      </a>
    </Button>
  )
}
<OpenInV0Button url="https://example.com/r/hello-world.json" />

認証

Open in v0 はクエリパラメーター認証のみに対応しています。名前空間付きレジストリや、Bearer トークン・ヘッダー内の API キーなどの高度な認証方式には対応していません。

クエリパラメーター認証を使う

Open in v0 向けにレジストリへ認証を追加するには、token クエリパラメーターを使用します:

https://registry.company.com/r/hello-world.json?token=your_secure_token_here

レジストリサーバーに実装する際は:

  1. token クエリパラメーターを確認します
  2. トークンを認証システムと照合して検証します
  3. トークンが無効または不足している場合は 401 Unauthorized レスポンスを返します
  4. shadcn CLI と Open in v0 はどちらも 401 レスポンスを処理し、ユーザーに適切なメッセージを表示します

実装例

// Next.js API route example
export async function GET(request: NextRequest) {
  const token = request.nextUrl.searchParams.get("token")
 
  if (!isValidToken(token)) {
    return NextResponse.json(
      {
        error: "Unauthorized",
        message: "Invalid or missing token",
      },
      { status: 401 }
    )
  }
 
  // Return the registry item
  return NextResponse.json(registryItem)
}