> ## Documentation Index
> Fetch the complete documentation index at: https://docs.valyu.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Powered by Valyu Badge

> Show off your Valyu-powered application with our official badge

Building something with Valyu? We'd love to see our badge on your site.

<Frame>
  <img className="block dark:hidden" src="https://mintcdn.com/valyu/r6g_3R90VWiSr_sL/images/poweredby-light.png?fit=max&auto=format&n=r6g_3R90VWiSr_sL&q=85&s=3ba0c3ab66b4f79fae0184593b7d2ac7" alt="Powered by Valyu" width="200" data-path="images/poweredby-light.png" />

  <img className="hidden dark:block" src="https://mintcdn.com/valyu/zjgvZRBC0rk8tiw3/images/poweredby-dark.png?fit=max&auto=format&n=zjgvZRBC0rk8tiw3&q=85&s=ebc346f6ad47ec1575eb95381408ffd5" alt="Powered by Valyu" width="200" data-path="images/poweredby-dark.png" />
</Frame>

## Installation

Add the badge to your website by pasting this code snippet into your HTML. We provide both light and dark variants to match your site's theme.

<CodeGroup>
  ```html HTML (with theme support) theme={null}
  <a href="https://valyu.ai/?ref=powered-by" rel="follow">
    <picture>
      <source
        media="(prefers-color-scheme: dark)"
      />
      <img
        src="https://docs.valyu.ai/images/poweredby-light.png"
        alt="Powered by Valyu"
        width="150"
      />
    </picture>
  </a>
  ```

  ```jsx React / Next.js theme={null}
  <a href="https://valyu.ai/?ref=powered-by" rel="follow">
    <picture>
      <source
        media="(prefers-color-scheme: dark)"
      />
      <img
        src="https://docs.valyu.ai/images/poweredby-light.png"
        alt="Powered by Valyu"
        width={150}
      />
    </picture>
  </a>
  ```

  ```svelte Svelte theme={null}
  <a href="https://valyu.ai/?ref=powered-by" rel="follow">
    <picture>
      <source
        media="(prefers-color-scheme: dark)"
      />
      <img
        src="https://docs.valyu.ai/images/poweredby-light.png"
        alt="Powered by Valyu"
        width="150"
      />
    </picture>
  </a>
  ```

  ```vue Vue theme={null}
  <template>
    <a href="https://valyu.ai/?ref=powered-by" rel="follow">
      <picture>
        <source
          media="(prefers-color-scheme: dark)"
        />
        <img
          src="https://docs.valyu.ai/images/poweredby-light.png"
          alt="Powered by Valyu"
          width="150"
        />
      </picture>
    </a>
  </template>
  ```
</CodeGroup>

## Guidelines

* The badge should be placed in a visible location (footer, about page, or near your AI-powered features)
* Minimum width: **150px**
* You're free to adjust the size to fit your design, as long as it remains legible

## Why add the badge?

* **Support the ecosystem** — Help other developers discover Valyu
* **Build trust** — Show your users that your AI features are powered by reliable infrastructure
* **Get featured** — We occasionally showcase apps using the badge on our website and social channels

<Note>
  Using Valyu in production? [Let us know](mailto:contact@valyu.ai) and we might feature your app in our [example apps gallery](/example-apps).
</Note>