99.1k

Open in v0

上一页下一页

将你的注册表集成到 Open in v0。

如果注册表可通过公开 URL 访问，可使用 https://v0.dev/chat/api/open?url=[URL] 接口在 v0 中打开对应条目。

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

按钮

关于如何构建 Open in v0 按钮，可参考 Build your Open in v0 button。

以下示例演示如何在站点中添加一个 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 Token、API Key 等高级认证方式。

使用查询参数认证

若要在 Open in v0 中启用认证，可使用 token 查询参数：

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

在服务端实现时可遵循以下步骤：

  1. 检查请求中的 token 参数
  2. 与认证系统校验 Token
  3. 若无效或缺失，返回 401 Unauthorized
  4. shadcn CLI 与 Open in v0 会处理 401 并向用户展示提示

Example Implementation

// 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)
}