AI-Generated Content

Within your Pixi’VN project, you can use the AI integration to generate narrative dialogue and images (backgrounds, characters, ...) on the fly, using any AI SDK compatible model (OpenAI, Anthropic, Google, Ollama, ...), a self-hosted ComfyUI server, or a small local WebLLM model that requires no API key and no server at all.

Installation

To install the AI package in an existing JavaScript project, use one of the following commands:

npm install @drincs/pixi-vn-ai

Call ai.init(...) once, at startup. Wrap it in its own function, exported from a dedicated file, so it can be awaited alongside your other startup tasks and later swapped for a different provider without touching where it's called from:

import { ai } from "@drincs/pixi-vn-ai";

export async function initAi() {
    await ai.init();
}

If you're using the router-based template, run it from the root route's loader, alongside the other startup tasks, instead of from main.ts:

import { initAi } from "@/lib/utils/ai-utility"; 

export const Route = createRootRouteWithContext<RouterContext>()({
    // ...
    loader: async ({ context, location }) => {
        await Promise.all([
            import("@/content"),
            initAi(), 
            // ...
        ]);
        await setupPixivnViteData();
        // ...
    },
    // ...
});

With no arguments, ai.init() downloads and runs a small local WebLLM model (SmolLM2-360M-Instruct) directly in the browser. This covers ai.text.generateDialog out of the box.

To use a specific model instead, pass it through the AI SDK. From here on, only the body of initAi changes — how and where you call it stays the same:

import { ai } from "@drincs/pixi-vn-ai";
import { openai } from "@ai-sdk/openai";

export async function initAi() {
    await ai.init({
        textProvider: openai("gpt-5"),
        imageProvider: openai.image("gpt-image-1"),
    });
}

• textProvider is a LanguageModel from any AI SDK provider. It drives ai.text.generateDialog, and is also used as a fallback for image generation on multimodal models (e.g. Gemini's image generation).
• imageProvider is an ImageModel from any AI SDK provider. It drives ai.image.generateBackground/ai.image.generateElement.

You don't need both: set only textProvider for dialogue, only imageProvider for images, or both.

Usage

@drincs/pixi-vn-ai never asks you to write a prompt yourself. As a developer, you just describe in plain language what you want to generate and, optionally, pass a few structured options (scene, style, context, the narrative history, a speaker, an alignment, ...); the library is the only one responsible for turning that into the actual message sent to the model, filling in whatever extra information it needs (canvas size, reference images, narrative history, ...) along the way.

Other features