Open in v0

Open in v0

나만의 레지스트리를 v0와 통합하는 방법을 알려드릴게요. 레지스트리가 호스팅되어 공개 URL로 접근 가능하다면, 레지스트리 아이템을 v0에서 열 수 있는 기능을 사이트에 추가할 수 있어요.

출처: 문서

본문

레지스트리가 호스팅되어 URL로 공개적으로 접근 가능하다면 https://v0.dev/chat/api/open?url=[URL] 엔드포인트를 사용해 레지스트리 아이템을 v0에서 열 수 있어요.

예: https://v0.dev/chat/api/open?url=https://example.com/r/hello-world.json

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 버튼은 cssVars와 tailwind 속성을 지원하지 않아요.

더 알아보기 (Learn more)

• 레지스트리 개요
• 레지스트리 시작하기