moelove/thinking-model-client

Thinking Model Client 🧠🤖

  

A modern React-based chat application that provides a unique interface for interacting with AI models. The application not only displays model responses but also visualizes the thinking process behind each response, giving users insight into how the AI arrives at its conclusions.

Table of Contents

• —Features
• —Getting Started
• —Prerequisites
• —Installation
• —Configuration

Features ✨

• —🧠 Thinking Process Visualization: See the step-by-step reasoning behind each AI response with interactive visualizations
• —🔗 Flexible API Integration: Easily connect to different AI models through configurable API endpoints
• —💾 Conversation Persistence: All chats are automatically saved in local storage for continuity
• —🐳 Docker Deployment: Ready for containerized deployment with included Docker configuration
• —⚙️ Customizable Settings: Adjust API parameters and model configurations through an intuitive settings panel
• —💬 Real-time Chat: Modern interface with smooth animations and multiple conversation tabs
• —🤖 Multiple Models: Support for various AI model integrations through a unified interface
• —🛠️ Modern Stack: Built with React and Vite for optimal performance and development experience
• —🧪 Quality Assured: Comprehensive unit tests ensure reliable functionality
• —🔒 Local Data Storage: All data is stored locally for enhanced privacy and security
• —⚡ xsai Integration: Powered by xsai (extra-small AI SDK) for efficient and lightweight AI model connections
• —🧩 Reasoning Extraction: Automatic extraction and visualization of AI reasoning processes using xsai utilities

Getting Started

Prerequisites

• —Node.js (v14 or higher)
• —npm or yarn

Installation

1. 1.Clone the repository:

git clone https://github.com/tao12345666333/thinking-model-client.git
cd thinking-model-client

1. 1.Install dependencies:

npm install

1. 1.Start the development server:

npm start

This will concurrently run both the frontend development server and the backend proxy server.

1. 1.Open your browser and navigate to http://localhost:5173 to use the application.

Configuration

The application can be configured through the settings panel, which supports multiple profiles:

Chat Profiles

Each chat profile includes:

• —Profile Name: Custom name for the profile
• —API Endpoint: The endpoint for the AI model
• —Ends with / → /chat/completions will be appended
• —Ends with # → # will be removed
• —Other cases → /v1/chat/completions will be appended
• —API Key: Your authentication key for the API
• —Model Name: The model to use (e.g., DeepSeek-R1)

Summarization Profile

A separate profile for conversation summarization:

• —API Endpoint: Endpoint for the summarization service
• —API Key: Authentication key for summarization
• —Model Name: The model to use for summarization

All settings are stored locally for privacy and security. You can manage multiple chat profiles and switch between them as needed.

xsai Integration 🤖

This application now uses xsai - an extra-small AI SDK for efficient LLM connections. The integration provides:

Key Benefits

• —Lightweight: Minimal dependencies and small bundle size
• —Runtime Agnostic: Works in Node.js, Deno, Bun, and browsers
• —Streaming Support: Built-in streaming capabilities for real-time responses
• —Reasoning Extraction: Automatic extraction of thinking processes from model responses

Technical Implementation

• —Chat Streaming: Uses @xsai/stream-text for real-time message streaming
• —Summarization: Uses @xsai/generate-text for conversation title generation
• —Reasoning Processing: Uses @xsai/utils-reasoning to extract and display thinking processes

Testing xsai Integration

To test the xsai integration independently:

1. 1.Edit the test-xsai.js file with your API credentials
2. 2.Run the test script:

node test-xsai.js

This will test both text generation and streaming with reasoning extraction.

Migration from node-fetch

The application has been migrated from using node-fetch directly to using xsai's abstraction layer. This provides:

• —Better error handling
• —Consistent API across different model providers
• —Built-in streaming utilities
• —Simplified reasoning extraction