LM Studio STS Chat

A modern web-based frontend for LM Studio that integrates speech-to-text and text-to-speech capabilities, creating a complete voice chat interface.

Main UI

Setup Wizard

Features

• Voice Input: Vosk-based speech recognition with multiple language support
• Voice Output: Kokoro TTS integration for natural speech synthesis
• Fully Compatible with LMStudio chat prompts: The UI can load LM studio chat prompts found in C:\Users\user\.lmstudio\config-presets
• LLM Integration: Connects to LM Studio for AI responses
• Chat Interface: Modern, responsive chat UI with message history
• Advanced Settings: Configurable voice parameters, system prompts, and API endpoints
• Real-time Status: Health monitoring for all connected services
• Change Models from UI: Change your LM studio models directly from the UI
• Audio On/Off: Bypass completly the text-to-speech pipeline if wanted
• Shutdown and Cleanup: Shut everything down and clean temporary files with one click directly from the interface

Architecture

Frontend (Web) → LM Studio (LLM) → Kokoro TTS (Speech) ← Vosk (Speech Recognition)

Prerequisites

1. LM Studio: Installed and running locally
2. Kokoro TTS: Local installation with Gradio interface
3. Python 3.x: For running the frontend server
4. Modern Browser: Chrome, Firefox, Safari, or Edge

LM Studio STS — Installation Guid

Requirements

• Python 3.8+ (standard install — tkinter is included)
• LM Studio with CLI (lms.exe)
• Kokoro TTS Local with a Python venv set up

No extra pip packages needed for the wizard or the server.

---

1. Clone the repository

   git clone https://github.com/Darkvinx88/LM-Studio-STS.git
   cd LM-Studio-STS

2. Double-click setup_wizard.py (or run python setup_wizard.py).

3. Fill in the 4 paths using the Browse buttons:

   Field	What to select
   LMS CLI	lms.exe — usually %USERPROFILE%\.lmstudio\bin\lms.exe
   Model name	The model identifier as shown in LM Studio
   Kokoro TTS folder	Root folder of Kokoro-TTS-Local (contains gradio_interface.py)
   Frontend folder	This repository folder (where index.html lives)

4. Click Verify paths to check everything is in order.

5. Click Generate launcher.bat → a RunLMStudioTTS.bat is created in the same folder.

6. Run RunLMStudioTTS.bat (optionally as Administrator).

Your settings are saved in .sts_config.json — next time the wizard opens pre-filled.

---

What the launcher does (in order)

1. Starts LM Studio in headless server mode (lms server start --cors)
2. Loads the selected model via CLI
3. Starts Kokoro TTS (gradio_interface.py)
4. Starts the static frontend server (serve.py)
5. Opens the browser at http://localhost:8000
6. Vosk speech to text model shoul load automatically (make sure to place the models into their models folder in zip format)
7. You can now chat in text or with voice by pressinng Ctrl on your keyboard or the microphone button.

---

Folder structure expected

LM Studio STS/          ← frontend_path
├── index.html
├── script.js
├── style.css
├── ui-extras.js
├── serve.py
├── setup_wizard.py     ← run this first
└── RunLMStudioTTS.bat  ← generated by wizard

---

Troubleshooting

• lms.exe not found — install LM Studio and make sure the CLI is enabled in Settings → Developer.
• Kokoro venv not found — follow the Kokoro-TTS-Local setup guide to create the virtual environment.
• Port already in use — change the port in the wizard before generating.

API Endpoints

Configure the following in the settings panel:

• LLM Endpoint: http://127.0.0.1:1234/v1/chat/completions (default LM Studio)
• TTS Endpoint: http://127.0.0.1:7860/ (default Kokoro TTS)
• Vosk Model: Select from available language models

Voice Settings

• Voice Selection: Choose from 50+ available voices
• Audio Format: WAV or MP3 output
• Speed: 0.1x to 2.0x playback speed
• Volume: 0% to 100% volume control

Speech Recognition

• Languages: English (US), Italian,
• Continuous Listening: Toggle for always-on recognition
• Interim Results: Show partial recognition results

Usage

1. Text Chat: Type messages and press Enter or click Send
2. Voice Chat: Hold the microphone button or ctrl to record voice input
3. Settings: Configure endpoints, voice parameters, and system prompts
4. Themes: Switch between different visual themes
5. Clear Chat: Remove conversation history and start fresh

API Integration

LM Studio API

The frontend connects to LM Studio's OpenAI-compatible API:

// Example API call
const response = await fetch('http://127.0.0.1:1234/v1/chat/completions', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({
    model: 'local-model',
    messages: conversationHistory,
    stream: false
  })
});

Kokoro TTS API

Text-to-speech synthesis via Gradio client:

// Example TTS call
const client = await Client.connect('http://127.0.0.1:7860');
const result = await client.predict('/generate_tts_with_logs', {
  voice_name: 'af_alloy',
  text: 'Hello, world!',
  format: 'wav',
  speed: 1.0
});

Status Indicators

• Green Dot: Service is healthy and responding
• Red Dot: Service is unreachable or error occurred
• Yellow Dot: Service is checking or starting up

License

This project is licensed under the MIT License - see the LICENSE file for details.

Acknowledgments

• LM Studio: For the local LLM inference platform
• Kokoro TTS: For high-quality text-to-speech synthesis
• Vosk: For accurate speech recognition
• Gradio: For the machine learning interface framework

Support

If you encounter issues or have questions:

1. Check the troubleshooting section above
2. Verify all prerequisites are installed
3. Ensure all services are running on correct ports
4. Open an issue on GitHub with detailed error information

---