WebSim AI Assistant

Plugin Integration

// AI Assistant Plugin setup
const plugin = document.getElementById('ai-chatbot-plugin');
const toggle = document.getElementById('ai-chatbot-toggle');
const messages = document.getElementById('ai-chatbot-messages');
const input = document.querySelector('#ai-chatbot-input input');

// Initialize with system prompt
let systemPrompt = `You are the WebSim AI Assistant, 
an expert in web development and WebSim platform.
Your role is to assist users with creating, 
modifying, and understanding web content.`;

async function sendMessage() {
  const userMessage = input.value.trim();
  if (userMessage) {
    try {
      const response = await fetch('/api/chat', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ 
          message: userMessage,
          systemPrompt: systemPrompt
        }),
      });
      // Handle response...
    } catch (error) {
      console.error('Error:', error);
    }
  }
}
AI Chat Features

// Message display
function addMessage(content, isUser = false) {
  const messageElement = document.createElement('div');
  messageElement.classList.add(
    isUser ? 'user-message' : 'ai-message'
  );
  messageElement.textContent = content;
  messages.appendChild(messageElement);
}

WebSim Plugin Playground

You can manually add plugins to published WebSim sites by appending "?plugin=username/websimname" to the end of a URL in WebSim.

WebSim Terminal
Loading plugins...
Available plugins loaded successfully.
Welcome to WebSim Terminal v1.0.0

Available Plugins

Chat Plugin

To add the chat plugin, use: ?plugin=bokkbokk/chat

URL Tools

URL Builder

Make URL from Plugin

Make Plugin from URL

Add New Plugin

IndexedDB + Dexie.js Guide

Database Operations

// Example from Project model
static async create(data) {
  return dbWrapper(async () => {
    const id = await db.projects.add({
      title: data.title,
      description: data.description,
      status: 'active'
    });
    return this.getById(id);
  });
}
Caching Implementation

// Cache utility example
const Cache = {
  EXPIRE_TIME: 5 * 60 * 1000, // 5 minutes
  
  async get(key) {
    const entry = await db.cache.get(key);
    if (!entry) return null;
    
    if (Date.now() - entry.timestamp > 
        this.EXPIRE_TIME) {
      await this.delete(key);
      return null;
    }
    
    return entry.value;
  }
};
React Integration

// Custom hook for cached data
function useCachedData(key, fetcher) {
  const [data, setData] = React.useState(null);
  
  React.useEffect(() => {
    async function getData() {
      let cached = await Cache.get(key);
      if (cached) {
        setData(cached);
        return;
      }
      const fresh = await fetcher();
      await Cache.set(key, fresh);
      setData(fresh);
    }
    getData();
  }, [key]);
  
  return data;
}