テーマ生成

Ginga UIの最大の特徴は、LLMを活用した自動テーマ生成機能です。プロンプトを入力するだけで、AIがCSS変数を生成してサイト全体のデザインを変更できます。

ライブデモ

下のフォームでAPIキーとプロンプトを入力して、リアルタイムでテーマ生成を試すことができます。プロバイダーに「Gemini Nano」を選んだ場合はAPIキーが不要で、生成はすべてブラウザ内で完結します。

⚠️セキュリティ上の注意:このデモで入力したAPIキーはサーバーサイドのRoute Handlerへ送信され、テーマ生成にのみ使用されます。保存はされません。本番環境ではAPIキーをクライアントから受け取らず、サーバーサイドの環境変数から読み込んでください。

LLMプロバイダー
モデル

サーバーサイドでの使用（推奨）

本番環境では、サーバーサイドでテーマを生成することを強く推奨します。これによりAPIキーが露出せず、SEOやパフォーマンスも向上します。

環境変数の設定

まず、使用するLLMプロバイダーのAPIキーを環境変数に設定します。

# .env.local
OPENAI_API_KEY=sk-...
# または
GOOGLE_GENERATIVE_AI_API_KEY=...
# または
ANTHROPIC_API_KEY=...

Next.js App Routerでの実装例

import { ThemeClient } from "@ginga-ui/utils";

export default async function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  const themeClient = new ThemeClient({
    provider: "openai",
  });

  const { CSSCode } = await themeClient.generateTheme(
    "宇宙の神秘"
  );

  return (
    <html lang="ja">
      <body>
        <style>{CSSCode}</style>
        {children}
      </body>
    </html>
  );
}

ブラウザ内での使用（Gemini Nano）

provider: "browser"を指定すると、ChromeやEdgeが搭載するGemini Nanoでテーマを生成します。APIキーもサーバーへの通信も不要で、生成はすべて端末上で完結します。この指定のときだけはServer ComponentではなくClient Componentから呼び出してください。ブラウザ内でしか動作しないためです。

利用できるかどうかはgetBrowserAIAvailability()で判定できます。戻り値は"unavailable" / "downloadable" / "downloading" / "available"で、未対応環境ではクラウドのプロバイダーにフォールバックしてください。初回利用時はモデルのダウンロードに数GBの通信が発生するため、onDownloadProgressで進捗を表示することを推奨します。

"use client";

import { getBrowserAIAvailability, ThemeClient } from "@ginga-ui/utils";
import { useState } from "react";

export function BrowserThemeButton() {
  const [css, setCss] = useState("");

  const generate = async () => {
    const availability = await getBrowserAIAvailability();

    if (availability === "unavailable") {
      return;
    }

    const themeClient = new ThemeClient({ provider: "browser" });

    const { CSSCode } = await themeClient.generateTheme("深海の静けさ", {
      onDownloadProgress: (progress) => {
        console.log(`ダウンロード中: ${Math.round(progress * 100)}%`);
      },
    });

    setCss(CSSCode);
  };

  return (
    <>
      <button onClick={generate}>テーマを生成</button>
      <style>{css}</style>
    </>
  );
}

サポートされているLLMプロバイダー

ThemeClientは3つのクラウドLLMプロバイダーと、ブラウザ内蔵のGemini Nanoをサポートしています。providerで使用するプロバイダーを指定し、modelで任意のモデルを指定できます。model を省略した場合は各プロバイダーのデフォルトモデルが使われます。

OpenAI — provider: "openai"

  • gpt-5.6-luna — デフォルト、高速・低コスト
  • gpt-5.6-terra — バランス型
  • gpt-5.6-sol — 最高品質

Google Gemini — provider: "google"

  • gemini-3.7-flash — デフォルト、高速・低コスト
  • gemini-3.5-flash-lite — 最軽量
  • gemini-2.5-pro — 高品質

Anthropic Claude — provider: "anthropic"

  • claude-haiku-4-5 — デフォルト、高速・低コスト
  • claude-sonnet-5 — バランス型
  • claude-opus-5 — 最高品質

Gemini Nano — provider: "browser"

  • gemini-nano — APIキー不要、ブラウザ内で実行。modelの指定は不要です

生成されるCSS変数

ThemeClientは以下のCSS変数を生成します。これらは自動的にコントラスト比が検証され、アクセシビリティ基準（WCAG AA）を満たすように調整されます。

変数名説明
--color-primaryアクセントカラー
--color-secondaryテキストカラー
--color-background背景色
--width-borderボーダー幅
--size-radiusボーダー半径
--font-familyフォントファミリー

さらに、プライマリカラーとセカンダリカラーには、背景色との中間色を含む0-9のカラースケールが自動生成されます。