{"repo": "artiz/kate-chat", "files": {"examples/openai-client/README.md": {"53adf1315d1fc04e7c00dbcd8968b9255b9df97f": {"t": 1786067721.7739377, "n": 4222, "h": "ebef96004e73acdb", "c": "# OpenAI Client Demo\n\nA standalone demo application showcasing the `@katechat/ui` package with direct OpenAI-compatible API integration.\n\n## Features\n\n- 🎨 Uses `@katechat/ui` components (`ChatMessagesContainer`, `ChatMessagesList`, `ChatInput`)\n- 🔌 Direct browser connection to OpenAI-compatible APIs (OpenAI, DeepSeek)\n- 💾 **IndexedDB storage** for persistent chat history (chats and messages stored locally)\n- 📋 **Multiple chat management** with organized chat list using `sortItemsBySections`\n- 🏷️ **Automatic chat titles** generated by LLM after first message exchange\n- 📌 Pin important chats for quick access\n- 📅 Chats organized by time sections (Today, Yesterday, Last 7 days, etc.)\n- 🔐 User-provided API key and endpoint configuration\n- 🔄 Supports both Chat Completions and Responses APIs\n- 📡 Built-in CORS proxy for development\n- ⚡ Fast development with esbuild and HMR\n\n## Getting Started\n\n### Installation\n\n```bash\nnpm install\n```\n\n### Development\n\n```bash\nnpm run dev\n```\n\nThe app will be available at http://localhost:3001\n\n### Production Build\n\n```bash\nnpm run build\n```\n\nThe build output will be in the `dist/` folder.\n\n## Configuration\n\n1. Click the **Settings** button in the top right corner\n2. Enter your API key\n3. Select an API endpoint (OpenAI, Yandex AI, DeepSeek, or custom)\n4. Choose API mode:\n   - **Chat Completions**: Uses `/chat/completions` endpoint (recommended)\n   - **Text Completions**: Uses `/completions` endpoint\n5. Select or enter a model name\n6. Click **Save Settings**\n\nYour configuration is stored in localStorage.\n\n## Supported API Providers\n\n### OpenAI\n- Endpoint: `https://api.openai.com/v1`\n- Models: `gpt-4o`, `gpt-4.1-mini`, `gpt-4-turbo`, `gpt-3.5-turbo`\n\n### DeepSeek\n- Endpoint: `https://api.deepseek.com/v1`\n- Models: `deepseek-chat`, `deepseek-reasoner`\n\n### Custom\n- Any OpenAI-compatible API endpoint\n\n## Architecture\n\n- **Frontend**: React 19 + TypeScript + @katechat/ui\n- **Styling**: Mantine UI + SCSS modules\n- **Build**: esbuild for fast bundling\n- **Storage**: IndexedDB (via `idb` library) for persistent local data\n- **API Client**: Custom streaming client with SSE support\n- **CORS Proxy**: Node.js HTTP proxy for development (avoids CORS issues)\n\n## Project Structure\n\n```\nsrc/\n├── index.tsx              # App entry point\n├── App.tsx                # Main app component\n├── App.scss               # App styles\n├── styles.scss            # Global styles\n├── components/\n│   ├── ChatList.tsx       # Chat list with sections\n│   └── SettingsForm.tsx   # API configuration form\n├── hooks/\n│   ├── useChats.ts        # Chat management hook\n│   └── useMessages.ts     # Message management hook\n└── lib/\n    ├── db.ts              # IndexedDB wrapper\n    └── openai-client.ts   # OpenAI API client with streaming & title generation\n```\n\n## How It Works\n\n### Chat Management\n\n1. Click the **Chats** button to open the sidebar\n2. View all your chats organized by time sections (using `sortItemsBySections` from `@katechat/ui`)\n3. Click **New** to create a new chat\n4. Pin important chats for quick access\n5. Delete chats you no longer need\n6. All chats are stored in IndexedDB and persist across sessions\n\n### Chat Flow\n\n1. User selects a chat or creates a new one\n2. User types a message in `ChatInput`\n3. Message is added to IndexedDB and the `messages` state\n4. `OpenAIClient` sends request to the configured API endpoint\n5. Response is streamed back chunk by chunk\n6. Messages are updated in real-time in `ChatMessagesContainer`\n7. **After the first exchange**, the LLM automatically generates a concise chat title\n8. Chat's `updatedAt` timestamp is updated for proper sorting\n\n### IndexedDB Schema\n\n- **chats** store: `{ id, title, createdAt, updatedAt, isPinned, modelName }`\n- **messages** store: `{ id, chatId, content, role, modelName, createdAt, updatedAt, ... }`\n- Indexed by `chatId` for efficient queries\n\n### CORS Proxy\n\nIn development mode, the app uses a proxy server to avoid CORS issues:\n- Client makes request to `/proxy/{encoded-url}`\n- Proxy forwards request to the actual API\n- Response is streamed back with proper CORS headers\n\nIn production, you would deploy this behind a proper backend or use the API's CORS configuration.\n\n## License\n\nMIT\n"}}}}