Sillytavern Web

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