An open API service indexing awesome lists of open source software.

https://github.com/firdavsdev07/chat-ai

Современное AI чат-приложение с интеграцией Excel на Next.js 16 и Open AI
https://github.com/firdavsdev07/chat-ai

bun excel next16 openai-sdk sqlite tailwindcss

Last synced: 2 months ago
JSON representation

Современное AI чат-приложение с интеграцией Excel на Next.js 16 и Open AI

Awesome Lists containing this project

README

          

# AI Chat Application

Современное приложение для чата с AI, построенное на Next.js 16, Vercel AI SDK и Bun SQLite.
Интерфейс в стиле ChatGPT с управлением беседами, сохранением сообщений и интеграцией с Excel.

## Возможности

- AI чат с поддержкой потоковых ответов
- Управление несколькими беседами (threads)
- Сохранение всех сообщений в локальной базе данных SQLite
- Интеграция с Excel файлами: чтение, запись, обновление данных
- Система упоминаний ячеек через синтаксис @Sheet!A1
- Визуальный интерфейс для выбора диапазонов в таблицах
- Подтверждение опасных операций через UI диалоги
- Обработка ошибок и таймаутов

## Технологии

- Next.js 16 (App Router)
- TypeScript
- Bun 1.1+
- SQLite (bun:sqlite)
- Vercel AI SDK
- Tailwind CSS
- Lucide React (иконки)
- SheetJS (работа с Excel)

## Установка

### Требования

- Установленный Bun (https://bun.sh)
- API ключ Google AI

### Шаги установки

1. Клонируйте репозиторий:

```bash
git clone https://github.com/firdavsdev07/chat-ai
cd chat-ai
```

2. Установите зависимости:

```bash
bun install
```

3. Создайте файл `.env.local` и добавьте ваш API ключ:

```env
OPENAI_API_KEY=your_api_key_here
```

4. Убедитесь, что файл `data/example.xlsx` существует в корне проекта.

## Запуск

Запустите development сервер:

```bash
bun dev
```

Откройте http://localhost:3000 в браузере.

## Структура проекта

```
src/
├── app/
│ ├── api/ # API маршруты (Chat, Threads, Excel)
│ └── page.tsx # Главная страница
├── components/ # React компоненты
│ ├── ChatArea.tsx # Основной чат
│ ├── MentionInput.tsx # Ввод с поддержкой @mentions
│ ├── TableModal.tsx # Модальное окно с таблицей Excel
│ └── tools/ # Компоненты для инструментов AI
├── hooks/ # Пользовательские хуки
├── lib/
│ ├── db.ts # Подключение к SQLite
│ ├── excel.ts # Функции для работы с Excel
│ ├── actions.ts # Server Actions
│ └── tools.ts # Определения инструментов (Zod схемы)
```

## Инструменты AI

- confirmAction - запрос подтверждения перед критическими операциями
- listSheets / getRange - чтение данных из Excel
- updateExcelCell - изменение данных в Excel (с подтверждением)
- showTable - визуальное отображение данных в таблице

## Реализованные возможности

### Полностью реализовано

#### 1. Чат с тредами

- Список бесед в левой панели с возможностью переключения
- Создание, переименование и удаление бесед
- Сохранение всех сообщений в SQLite базе данных
- Загрузка истории сообщений при переключении беседы
- Интеграция с Vercel AI SDK (useChat) для потоковых ответов

#### 2. Generative UI (Client-side tools)

- **confirmAction** - диалог подтверждения опасных операций
- **listSheets** - получение списка листов Excel файла
- **getRange** - чтение диапазона ячеек из таблицы
- **updateExcelCell** - обновление ячейки (с подтверждением)
- **showTable** - визуальное отображение таблицы в UI

#### 3. Подтверждение опасных действий

- Перед update/delete операциями отображается UI диалог
- Кнопки "Подтвердить" / "Отмена"
- Операция выполняется только после явного подтверждения пользователем
- Все изменения в Excel требуют подтверждения

#### 4. Работа с Excel файлами

- Подготовлен файл `data/example.xlsx` с тремя листами:
- **Сотрудники** - данные о сотрудниках (5 записей)
- **Продажи** - данные о продажах с формулами (SUM, умножение)
- **Склад** - остатки товаров с IF формулами
- Чтение данных через tool getRange
- Запись данных через tool updateExcelCell
- Модальное окно для просмотра таблиц
- Выбор ячеек мышью (drag-select)
- Система упоминаний: @Сотрудники!A1:B5
- Вставка упоминаний в поле ввода через Ctrl+M

#### 5. Архитектура и код

- Четкое разделение слоев: API / UI / DB / Excel
- Строгая типизация TypeScript для всех компонентов
- Server Actions для выполнения операций
- Zod схемы для валидации параметров tools
- Обработка ошибок и таймаутов
- Русский язык интерфейса

### База данных

Автоматически создаются две таблицы:

- `threads` - хранение бесед (id, title, created_at, updated_at)
- `messages` - хранение сообщений (id, thread_id, role, content, created_at)

Инициализация происходит автоматически при первом запуске.

### Ограничения

- Используется локальная SQLite база данных (не подходит для serverless окружений типа Vercel)
- Excel файл захардкожен (`data/example.xlsx`)
- Для деплоя рекомендуется использовать платформы с поддержкой Bun (Railway, Fly.io)

## Примечания

- Используется встроенная в Bun база данных SQLite, внешняя установка БД не требуется
- Весь код строго типизирован с помощью TypeScript
- Реализована надежная обработка ошибок сети и таймаутов