sillytavern-web

name	sillytavern-web
description	Integrate SillyTavern ecosystem (lorebooks, presets, AI chat) into any web project. Activates when users want to add SillyTavern features, world info, character cards, lorebook management, or AI chat with persistent data to their website. Triggers on: sillytavern, world book, lorebook, character card, AI chat, preset, prompt engineering, add SillyTavern to my site, integrate lorebook.
license	MIT
metadata	{"author":"User","version":"1.0.0","source":"C:/binbin/sillytavern-web-skill"}
compatibility	Works with React, Vue, vanilla JS projects. Supports any OpenAI-compatible API (Kimi, DeepSeek, OpenAI, etc.). Data stored locally in IndexedDB.

/sillytavern-web — SillyTavern Web Integrator

Integrate SillyTavern's powerful lorebook system into any web project. Transform static character sites into interactive AI chat experiences, or add intelligent world-building to your applications.

Trigger

User invokes /sillytavern-web or mentions related concepts:

/sillytavern-web Add lorebook support to my React app
/sillytavern-web I want AI chat with world info on my site
Add SillyTavern features to this project
Integrate character cards and presets
Help me set up lorebook management

How It Works

Phase 1: Project Analysis

First, understand the user's project:

1. Detect framework — React, Vue, or vanilla JS?

   • Look for package.json dependencies
   • Check file extensions (.tsx, .vue, .js)
   • Identify existing UI patterns

2. Assess current state — What exists?

   • Is there an existing chat interface?
   • Is there a settings/preferences system?
   • What's the styling approach?

3. Determine integration mode — Two options:

   • Zero-code (drop-in): Single JS file, works immediately
   • Developer (modular): Full customization, deeper integration

Phase 2: Implementation

Option A: Zero-Code Integration

Copy the pre-built enhancer to their project:

Project/
├── index.html          ← Add one line
└── sillytavern-enhancer.js  ← Copy this file

Add to HTML:

<script type="module" src="./sillytavern-enhancer.js"></script>

Option B: Developer Integration

Install and integrate modular components:

npm install dexie

Copy core files:

src/
└── sillytavern/
    ├── types.ts
    ├── database.ts
    ├── lorebook-engine.ts
    ├── prompt-assembler.ts
    └── importer.ts

Create framework-specific hooks/composables.

Phase 3: Configuration UI

Add management interface:

• Creative Workshop — Import/manage lorebooks
• Presets — Configure AI personality/styles
• Settings — API keys, models, preferences

Phase 4: Chat Integration

Wire up the chat flow:

1. Capture user input
2. Scan for lorebook keyword matches
3. Assemble prompt with context
4. Call API with assembled prompt
5. Display response

Core Concepts

Lorebook Engine

import { createLorebookEngine } from './sillytavern/lorebook-engine';

const engine = createLorebookEngine(lorebook);
const matches = engine.scan(userInput);
// Returns entries where keywords match input

Prompt Assembly

import { assemblePrompt } from './sillytavern/prompt-assembler';

const prompt = assemblePrompt({
  userInput,
  lorebookEntries,
  preset,
  macros: { user: 'Alice', char: 'Elena' }
});

Database

All data stored locally in IndexedDB:

• Lorebooks (world info databases)
• Presets (personality configurations)
• Chat history
• Settings (API keys, preferences)

Implementation Patterns

React Pattern

// hooks/useSillytavern.ts
import { useState, useEffect } from 'react';
import { getLorebooks, saveLorebook } from '../sillytavern/database';

export function useLorebooks() {
  const [lorebooks, setLorebooks] = useState([]);
  const [activeIds, setActiveIds] = useState([]);

  useEffect(() => {
    loadLorebooks();
  }, []);

  const loadLorebooks = async () => {
    const data = await getLorebooks();
    setLorebooks(data);
  };

  return { lorebooks, activeIds, refresh: loadLorebooks };
}

Vue Pattern

// composables/useLorebooks.ts
import { ref, onMounted } from 'vue';
import { getLorebooks } from '../sillytavern/database';

export function useLorebooks() {
  const lorebooks = ref([]);
  
  onMounted(async () => {
    lorebooks.value = await getLorebooks();
  });

  return { lorebooks };
}

Vanilla JS Pattern

// app.js
import { initializeDatabase, getLorebooks } from './sillytavern/index.js';

async function init() {
  await initializeDatabase();
  const lorebooks = await getLorebooks();
  renderLorebookList(lorebooks);
}

init();

Data Import/Export

SillyTavern Format

Import existing SillyTavern lorebooks:

import { importLorebook } from './sillytavern/importer';

const file = await fetch('/lorebook.json').then(r => r.json());
const lorebook = importLorebook(file);
await saveLorebook(lorebook);

Export for Sharing

import { exportLorebook } from './sillytavern/importer';

const json = exportLorebook(lorebook);
// Download or share this JSON

API Configuration

Supports any OpenAI-compatible API:

• Kimi: https://api.moonshot.cn/v1
• OpenAI: https://api.openai.com/v1
• DeepSeek: https://api.deepseek.com/v1
• Local: http://localhost:1234/v1 (LM Studio)

Security Notes

• API keys stored only in browser (IndexedDB)
• No data sent to external servers
• All processing happens client-side
• User controls all their data

Verification Steps

After implementation, verify:

1. Lorebook import works (SillyTavern JSON format)
2. Keywords trigger correctly (AND/OR logic)
3. Macros replace properly ({{user}}, {{char}})
4. API calls succeed with assembled prompt
5. Data persists across page reloads
6. Settings save and load correctly

Output

A working SillyTavern integration with:

• Functional lorebook management
• Preset configuration
• Settings management
• Chat interface with context injection
• Import/export capabilities