Function HelpDialog

packages/web/src/render.tsx:1458–1558

()

}

function HelpDialog() {
  return (
    <dialog id="modal">
      <div class="header">
        <h2>How to use</h2>
        <button id="close" aria-label="Close">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
            <line
              x1="18"
              y1="6"
              x2="6"
              y2="18"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
            />
            <line
              x1="6"
              y1="6"
              x2="18"
              y2="18"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
            />
          </svg>
        </button>
      </div>
      <div class="body">
        <p>
          <a href="/">Models.dev</a> is a comprehensive open-source database of
          AI model specifications, pricing, and features.
        </p>
        <p>
          The homepage starts with provider-agnostic model metadata. Model pages
          list the providers serving that model; provider pages list every model
          available from that provider; lab pages group canonical models by
          author.
        </p>
        <h2>API</h2>
        <p>
          You can access provider data, provider-agnostic model metadata, or the
          combined catalog through JSON endpoints.
        </p>
        <div class="code-block">
          <code>
            curl <a href="/api.json">https://models.dev/api.json</a>
          </code>
        </div>
        <div class="code-block">
          <code>
            curl <a href="/models.json">https://models.dev/models.json</a>
          </code>
        </div>
        <div class="code-block">
          <code>
            curl <a href="/catalog.json">https://models.dev/catalog.json</a>
          </code>