GenCN UI

Prerequisites

Bringing intelligence to pre-existing Shadcn UI components with Chrome built in LLM APIs and Generative AI for hybrid LLM support.

Introduction

GenCN-UI isn't about reinventing beautiful interfaces—others already do that well. Instead, it brings AI intelligence into your UI components, built on top of Shadcn UI.

Prerequisites

To explore the features in this library, you need to have one of the following:

  1. Google Chrome Browser - The library uses Chrome AI APIs which are available in Google Chrome browser. To use Chrome AI APIs, your system must meet the following requirements:

    Operating System:

    • Windows 10 or 11
    • macOS 13+ (Ventura and onwards)
    • Linux
    • ChromeOS (from Platform 16389.0.0 and onwards) on Chromebook Plus devices

    Note: Chrome for Android, iOS, and ChromeOS on non-Chromebook Plus devices are not yet supported by the APIs which use Gemini Nano.

    Storage:

    • At least 22 GB of free space on the volume that contains your Chrome profile
    • Built-in models should be significantly smaller. The exact size may vary slightly with updates.

    GPU or CPU:

    • GPU: Strictly more than 4 GB of VRAM
    • CPU: 16 GB of RAM or more and 4 CPU cores or more

    Origin Trial Registration:

    • For local LLM support with experimental APIs (Writer API, Rewriter API, Prompt API, Proofreader API), you need to register your domain for Chrome Origin Trials
    • Visit Chrome Origin Trials to register your domain
    • After registration, add the origin trial token to your site's HTML or HTTP headers
    • Stable APIs (Translator API, Language Detector API, Summarizer API) do not require origin trial registration

    For more details, see the Chrome AI documentation. For browser compatibility information, see the Browser Compatibility page.

  2. Gemini API Key - Alternatively, you can use a Gemini API key with server-side LLM features enabled

If you don't have Chrome or your system doesn't meet these requirements, you can enable Server LLM from the Chrome AI Status component in the side menu. This allows you to use the features with a Gemini API key instead of Chrome AI APIs.

Setting up Chrome AI or Server LLM:

The side menu contains a Chrome AI Status component where you can manage your AI setup:

  1. For Chrome Users: If you're using Chrome and meet the system requirements, you can download local LLM models directly from the Chrome AI Status component in the side menu. The component will show download buttons for available models.

  2. For Server LLM (Alternative): If you don't have Chrome or prefer to use server-side LLM:

    • Open the Chrome AI Status component in the side menu
    • Locate the "Server LLM" toggle switch
    • Enable it by toggling it to the "On" position
    • Enter your Gemini API key in the provided field

Once Server LLM is enabled, the library will use server-side LLM features instead of Chrome AI APIs, allowing you to explore all features even without Chrome browser or if your system doesn't meet the Chrome requirements. In realworld application, you can enable Server key and LLM provider on the server side with Server side Environment Variables.

Example Server side Environment Variables:

GOOGLE_GENERATIVE_AI_API_KEY = your - gemini - api - key;