English | 中文
A frontend application built with Vue 3 + Vite + TypeScript + Tailwind CSS.
Role-Play is an LLM-based role-play chat application that supports:
- 🎭 Create and manage custom characters
- 💬 Have smooth conversations with AI characters
- 🌍 World Info and regex scripts to enhance character settings
- 📱 Responsive design, supporting PC and mobile
- 🔄 Chat history synchronization (after login)
- 👥 Group chat with multi-character interaction
- 📤 Character import/export with multiple formats
- 🎨 Theme switching and personalized settings
- 📦 Offline PWA support
- Framework: Vue 3 + TypeScript
- Build: Vite 5
- Styling: Tailwind CSS
- State Management: Pinia
- Routing: Vue Router
- PWA: vite-plugin-pwa
- Database: IndexedDB (Dexie)
- Markdown: marked + dompurify
- Drag & Drop: sortablejs + vuedraggable
- Compression: pako
| Feature | Guest | Logged In |
|---|---|---|
| Friend list | ✅ Local storage | ✅ Local storage |
| Chat history | ✅ Local storage | ✅ Local storage |
| LLM API configuration | ✅ Local storage | ✅ Local storage |
| Character import/export | ✅ | ✅ |
| Chat history import/export | ✅ | ✅ |
| Use built-in LLM | ❌ | ✅ |
| View character comments | ❌ | ✅ |
| Like characters | ❌ | ✅ |
| Add online characters | ❌ | ✅ |
| Share characters to online list | ❌ | ✅ |
| Sync and share chat history | ❌ | ✅ (manual trigger) |
# Install dependencies
npm install
# Start development server (port 3000)
npm run dev
# Build for production
npm run build
# Preview production build
npm run previewCreate a .env file:
# Backend API URL (optional)
# Development mode: Leave empty to use Vite proxy
# Production mode: Set full backend URL
# Example: VITE_API_BASE_URL=http://192.168.1.100:3001/api
VITE_API_BASE_URL=
# Show login and admin entry (default false)
# Set to true to show login button and admin entry
VITE_SHOW_AUTH_ENTRY=falseThe project supports PC and mobile:
- Uses Tailwind CSS responsive breakpoints
- Mobile-first design
- Touch-friendly interactions
- Minimum button size 48px
Production builds automatically include PWA support:
- Offline access
- Add to home screen
- Automatic updates
- Google Fonts caching
iOS users can add the app to the home screen via Safari's "Add to Home Screen" feature. When launched from the home screen, the app runs in full-screen mode, hiding the Safari address bar and toolbar, providing a native app-like immersive experience.
vue- Vue 3 frameworkvue-router- Routing managementpinia- State managementdexie- IndexedDB wrappermarked- Markdown parserdompurify- HTML sanitizationsortablejs- Drag and drop sortingvuedraggable- Vue drag and drop componentpako- Gzip compression/decompression
vite- Build toolvite-plugin-pwa- PWA plugintypescript- TypeScript supporttailwindcss- CSS frameworkpostcss- CSS processingautoprefixer- CSS auto-prefixingsharp- Image processing
- Dev server port: 3000
- API proxy:
/api->http://localhost:3001 - Build output:
../dist - Path alias:
@->src/
- App name: Role-Play
- Theme color: #1f2937
- Background color: #f3f4f6
- Display mode: standalone
- Cache strategy: CacheFirst (Google Fonts)
Database name: SillyTavernDB
Main storage:
- Chat history:
silly_tavern_chat_{characterID} - Character sprites
- Local character data
- User settings
- File names: kebab-case (e.g.,
chat-view.ts) - Component names: PascalCase (e.g.,
ChatView.vue) - Variables/functions: camelCase
- CSS class names: kebab-case (Tailwind CSS)
- Use TypeScript
- Use Vue 3 Composition API
- Use Pinia for state management
- Use Tailwind CSS for styling
MIT License
Copyright (c) 2026 Role-Play Lab
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.