{"id":33647999,"url":"https://github.com/gravity-ui/aikit","last_synced_at":"2026-03-10T11:12:07.439Z","repository":{"id":325048250,"uuid":"1082457379","full_name":"gravity-ui/aikit","owner":"gravity-ui","description":"A comprehensive, SDK-agnostic UI library built on Atomic Design principles. Create beautiful, accessible AI chat experiences with full TypeScript support, theming, and extensive customization options.","archived":false,"fork":false,"pushed_at":"2026-03-03T11:25:33.000Z","size":14422,"stargazers_count":145,"open_issues_count":1,"forks_count":11,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-03-03T13:52:08.779Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/gravity-ui.png","metadata":{"files":{"readme":"README-ru.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":"CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-10-24T09:13:54.000Z","updated_at":"2026-03-03T11:24:40.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/gravity-ui/aikit","commit_stats":null,"previous_names":["gravity-ui/aikit"],"tags_count":39,"template":false,"template_full_name":"gravity-ui/package-example","purl":"pkg:github/gravity-ui/aikit","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gravity-ui%2Faikit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gravity-ui%2Faikit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gravity-ui%2Faikit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gravity-ui%2Faikit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gravity-ui","download_url":"https://codeload.github.com/gravity-ui/aikit/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gravity-ui%2Faikit/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30178284,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-06T12:39:21.703Z","status":"ssl_error","status_checked_at":"2026-03-06T12:36:09.819Z","response_time":250,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-12-02T15:04:40.568Z","updated_at":"2026-03-10T11:12:07.424Z","avatar_url":"https://github.com/gravity-ui.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# AIKit \u0026middot; [![npm package](https://img.shields.io/npm/v/@gravity-ui/aikit?logo=npm)](https://www.npmjs.com/package/@gravity-ui/aikit) [![CI](https://img.shields.io/github/actions/workflow/status/gravity-ui/aikit/.github/workflows/ci.yml?branch=main\u0026label=CI\u0026logo=github)](https://github.com/gravity-ui/aikit/actions/workflows/ci.yml?query=branch:main) [![storybook](https://img.shields.io/badge/Storybook-deployed-ff4685?logo=storybook)](https://preview.gravity-ui.com/aikit/?path=/docs/pages-chatcontainer--docs)\n\nБиблиотека UI-компонентов для AI-чатов, построенная на принципах атомарного дизайна.\n\n\u003c!--GITHUB_BLOCK--\u003e\n\n![Cover image](https://raw.githubusercontent.com/gravity-ui/aikit/main/docs/assets/aikit_cover.png)\n\n## Ресурсы\n\n### ![Globe Logo Light](https://raw.githubusercontent.com/gravity-ui/aikit/main/docs/assets/globe_light.svg#gh-light-mode-only) ![Globe Logo Dark](https://raw.githubusercontent.com/gravity-ui/aikit/main/docs/assets/globe_dark.svg#gh-dark-mode-only) [Сайт](https://gravity-ui.com/libraries/aikit)\n\n### ![Storybook Logo Light](https://raw.githubusercontent.com/gravity-ui/aikit/main/docs/assets/storybook_light.svg#gh-light-mode-only) ![Storybook Logo Dark](https://raw.githubusercontent.com/gravity-ui/aikit/main/docs/assets/storybook_dark.svg#gh-dark-mode-only) [Storybook](https://preview.gravity-ui.com/aikit/)\n\n### ![Community Logo Light](https://raw.githubusercontent.com/gravity-ui/aikit/main/docs/assets/telegram_light.svg#gh-light-mode-only) ![Community Logo Dark](https://raw.githubusercontent.com/gravity-ui/aikit/main/docs/assets/telegram_dark.svg#gh-dark-mode-only) [Сообщество](https://t.me/gravity_ui)\n\n\u003c!--/GITHUB_BLOCK--\u003e\n\n## Описание\n\n**@gravity-ui/aikit** — это гибкая и расширяемая библиотека React-компонентов для создания AI-чатов любой сложности. Библиотека предоставляет набор готовых компонентов, которые можно использовать как есть или кастомизировать под ваши нужды.\n\n### Ключевые особенности\n\n- 🎨 **Атомарный дизайн** — чёткая иерархия компонентов от атомов до страниц\n- 🔧 **Независимость от SDK** — не привязана к конкретным AI SDK\n- 🎭 **Двухуровневый подход** — готовые компоненты + хуки для кастомизации\n- 🎨 **CSS-переменные** — простая кастомизация темы без переопределения компонентов\n- 📦 **TypeScript** — полная типобезопасность из коробки\n- 🔌 **Расширяемость** — система регистрации пользовательских типов сообщений\n\n## Структура проекта\n\n```\nsrc/\n├── components/\n│   ├── atoms/          # Базовые неделимые UI-элементы\n│   ├── molecules/      # Простые группы атомов\n│   ├── organisms/      # Сложные компоненты с логикой\n│   ├── templates/      # Готовые макеты\n│   └── pages/          # Полные интеграции с данными\n├── hooks/              # Хуки общего назначения\n├── types/              # TypeScript-типы\n├── utils/              # Утилиты\n└── themes/             # CSS-темы и переменные\n```\n\n## Установка\n\n```bash\nnpm install @gravity-ui/aikit\n```\n\n## Быстрый старт\n\n```typescript\nimport { ChatContainer } from '@gravity-ui/aikit';\nimport type { ChatType, TChatMessage } from '@gravity-ui/aikit';\n\nfunction App() {\n    const [messages, setMessages] = useState\u003cTChatMessage[]\u003e([]);\n    const [chats, setChats] = useState\u003cChatType[]\u003e([]);\n    const [activeChat, setActiveChat] = useState\u003cChatType | null\u003e(null);\n\n    return (\n        \u003cChatContainer\n            chats={chats}\n            activeChat={activeChat}\n            messages={messages}\n            onSendMessage={async (data) =\u003e {\n                // Ваша логика отправки\n                console.log('Сообщение:', data.content);\n            }}\n            onSelectChat={setActiveChat}\n            onCreateChat={() =\u003e {\n                // Создание нового чата\n            }}\n            onDeleteChat={(chat) =\u003e {\n                // Удаление чата\n            }}\n        /\u003e\n    );\n}\n```\n\n## Архитектура\n\nБиблиотека построена на принципах **атомарного дизайна**:\n\n### 🔹 Атомы\n\nБазовые неделимые UI-элементы без бизнес-логики:\n\n- `ActionButton` — кнопка со встроенным тултипом\n- `Alert` — сообщения с различными вариантами оформления\n- `ChatDate` — форматирование даты с относительными датами\n- `ContextIndicator` — индикатор использования контекста токенов\n- `ContextItem` — метка контекста с возможностью удаления\n- `DiffStat` — отображение статистики изменений кода\n- `Disclaimer` — компонент текста-дисклеймера\n- `InlineCitation` — текстовые цитаты\n- `Loader` — индикатор загрузки\n- `MarkdownRenderer` — рендерер Yandex Flavored Markdown\n- `MessageBalloon` — обёртка сообщения\n- `Shimmer` — эффект анимации загрузки\n- `SubmitButton` — кнопка отправки с состояниями\n- `ToolIndicator` — индикатор статуса выполнения инструмента\n\n### 🔸 Молекулы\n\nПростые комбинации атомов:\n\n- `BaseMessage` — базовая обёртка для всех типов сообщений\n- `ButtonGroup` — группа кнопок с поддержкой ориентации\n- `InputContext` — управление контекстом\n- `PromptInputBody` — текстовое поле с авторастягиванием\n- `PromptInputFooter` — футер с иконками действий и кнопкой отправки\n- `PromptInputHeader` — хедер с элементами контекста и индикатором\n- `PromptInputPanel` — панель-контейнер для пользовательского контента\n- `Suggestions` — кликабельные кнопки предложений\n- `Tabs` — навигационные вкладки с функцией удаления\n- `ToolFooter` — футер сообщения инструмента с действиями\n- `ToolHeader` — хедер сообщения инструмента с иконкой и действиями\n\n### 🔶 Организмы\n\nСложные компоненты с внутренней логикой:\n\n- `AssistantMessage` — сообщение AI-ассистента\n- `Header` — хедер чата\n- `MessageList` — список сообщений\n- `PromptInput` — поле ввода сообщения\n- `ThinkingMessage` — процесс размышления AI\n- `ToolMessage` — выполнение инструмента\n- `UserMessage` — сообщение пользователя\n\n### 📄 Шаблоны\n\nГотовые макеты:\n\n- `ChatContent` — основной контент чата\n- `EmptyContainer` — пустое состояние\n- `History` — история чатов\n\n### 📱 Страницы\n\nПолные интеграции:\n\n- `ChatContainer` — полностью собранный чат\n\n## Документация\n\n- [Руководство по быстрому старту](./docs/GETTING_STARTED.md)\n- [Архитектура](./docs/ARCHITECTURE.md)\n- [Структура проекта](./docs/PROJECT_STRUCTURE.md)\n- [Руководство по тестированию](./docs/TESTING.md)\n- [Руководство по Playwright](./playwright/README.md)\n\n## Тестирование\n\nПроект использует Playwright Component Testing для визуального регрессионного тестирования.\n\n### Запуск тестов\n\n**Важно**: Все тесты должны запускаться через Docker для обеспечения консистентности скриншотов в различных окружениях.\n\n```bash\n# Запуск всех компонентных тестов в Docker (рекомендуется)\nnpm run playwright:docker\n\n# Обновление эталонных скриншотов в Docker\nnpm run playwright:docker:update\n\n# Запуск конкретного теста по grep-паттерну в Docker\nnpm run playwright:docker -- --grep \"@ComponentName\"\n\n# Очистка кэша Docker при необходимости\nnpm run playwright:docker:clear-cache\n```\n\n### Локальное тестирование (только Linux)\n\nЕсли вы работаете на Linux, вы можете запускать тесты локально:\n\n```bash\n# Установка браузеров Playwright (выполняется один раз)\nnpm run playwright:install\n\n# Запуск всех компонентных тестов\nnpm run playwright\n\n# Обновление эталонных скриншотов\nnpm run playwright:update\n```\n\nПодробная документация по тестированию доступна в [Руководстве по Playwright](./playwright/README.md).\n\n## Разработка\n\nИнструкции по разработке и контрибьютингу доступны в [CONTRIBUTING.md](./CONTRIBUTING.md).\n\n## Лицензия\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgravity-ui%2Faikit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgravity-ui%2Faikit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgravity-ui%2Faikit/lists"}