webui/components/settings/external/external-settings.html

<html>
  <head>
    <title>External Services</title>
  </head>

  <body>
    <div x-data>
      <template x-if="$store.settings">
        <div>
          <nav>
            <ul>
              <li>
                <a href="#section-api-keys">
                  <img src="/public/api_keys.svg" alt="API Keys" />
                  <span>API Keys</span>
                </a>
              </li>
              <li>
                <a href="#section-litellm">
                  <img src="/public/litellm.svg" alt="LiteLLM Global Settings" />
                  <span>LiteLLM Global Settings</span>
                </a>
              </li>
              <li>
                <a href="#section-secrets">
                  <img src="/public/secrets.svg" alt="Secrets Management" />
                  <span>Secrets Management</span>
                </a>
              </li>
              <li>
                <a href="#section-auth">
                  <img src="/public/auth.svg" alt="Authentication" />
                  <span>Authentication</span>
                </a>
              </li>
              <li>
                <a href="#section-external-api">
                  <img src="/public/external_api.svg" alt="External API" />
                  <span>External API</span>
                </a>
              </li>
              <li>
                <a href="#section-tunnel">
                  <img src="/public/tunnel.svg" alt="Remote Control" />
                  <span>Remote Control</span>
                </a>
              </li>
              <li>
                <a href="#section-external-plugins">
                  <x-icon aria-hidden="true" name="extension"></x-icon>
                  <span>Plugins</span>
                </a>
              </li>
            </ul>
          </nav>

          <div id="section-api-keys" class="section">
            <x-component path="settings/external/api_keys.html"></x-component>
          </div>
          <div id="section-litellm" class="section">
            <x-component path="settings/external/litellm.html"></x-component>
          </div>
          <div id="section-secrets" class="section">
            <x-component path="settings/external/secrets.html"></x-component>
          </div>
          <div id="section-auth" class="section">
            <x-component path="settings/external/auth.html"></x-component>
          </div>
          <div id="section-external-api" class="section">
            <x-component path="settings/external/external_api.html"></x-component>
          </div>
          <!-- Tunnel section content -->
          <div id="section-tunnel" class="section">
            <x-component path="settings/tunnel/tunnel-section.html"></x-component>
          </div>
          <div id="section-external-plugins" class="section">
            <x-component path="settings/plugins/plugins-subsection.html" data-tab="external"></x-component>
          </div>
        </div>
      </template>
    </div>
  </body>
</html>