109k
新建

在 v0 中打开

上一页下一页

将你的注册表（Registry）与“在 v0 中打开”进行集成。

如果你的注册表已托管且可通过 URL 公开访问，你可以使用 https://v0.dev/chat/api/open?url=[URL] 端点在 v0 中打开注册表项。

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

按钮

请参阅 构建你的“在 v0 中打开”按钮，了解关于如何构建自己的 在 v0 中打开 按钮的更多信息。

这里有一个关于如何向你的网站添加 在 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" />

身份验证

“在 v0 中打开”功能仅支持查询参数身份验证。它不支持命名空间注册表，也不支持如 Bearer 令牌或请求头中的 API 密钥等高级身份验证方法。

使用查询参数身份验证

要为“在 v0 中打开”功能的注册表添加身份验证，请使用 token 查询参数。

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

当在你的注册表服务器上实现此功能时：

  1. 检查 token 查询参数。
  2. 根据你的身份验证系统验证该令牌。
  3. 如果令牌无效或缺失，则返回 401 Unauthorized 响应。
  4. shadcn CLI 和“在 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)
}