Библиотека компонентов для вертикали SDDS PLATFORM AI

Реализация компонентов для создания веб-приложений.

Компоненты реализованы с помощью React и поставляются в двух вариантах:

• на предсобранном CSS,
• на styled-components.

Ссылки

• Документация — гайды, список компонентов с примерами и API
• Подключение в Next.js
• Changelog
• Задать вопрос или сообщить о проблеме

Установка

Требуются react и react-dom версии 16.13.1 или выше:

$ npm install --save react react-dom
$ npm install --save @salutejs/sdds-platform-ai @salutejs/sdds-themes

Дальнейшие шаги зависят от выбранного варианта поставки.

Для варианта на styled-components:

$ npm install --save [email protected]

CSS-вариант дополнительных зависимостей не требует.

Варианты поставки

Примечание: CSS-вариант является поставкой по умолчанию.

Один и тот же набор компонентов доступен из двух точек входа:

| Точка входа | Реализация | Дополнительные зависимости | | ---------------------------------------------- | ----------------- | -------------------------- | | @salutejs/sdds-platform-ai | предсобранный CSS | нет | | @salutejs/sdds-platform-ai/styled-components | styled-components | [email protected] |

import { Button } from '@salutejs/sdds-platform-ai';
// или
import { Button } from '@salutejs/sdds-platform-ai/styled-components';

Подключение шрифтов

Типографическая система основана на фирменных шрифтах, они поставляются с CDN.

Добавьте два css-файла внутрь тега <head>.

<link rel="stylesheet" href="https://cdn-app.sberdevices.ru/shared-static/0.0.0/styles/SBSansText.0.2.0.css" />
<link rel="stylesheet" href="https://cdn-app.sberdevices.ru/shared-static/0.0.0/styles/SBSansDisplay.0.2.0.css" />

Подключение темы

Тема подключается один раз в корне приложения.

Примечание: Для Next.js — в pages/_app.tsx.

Тема включает в себя цветовые и типографические токены.

Доступны светлая и тёмная темы — sdds_platform_ai__light и sdds_platform_ai__dark.

Через импорт css-файла

import '@salutejs/sdds-themes/css/sdds_platform_ai__light.css';

Через styled-components

import { createGlobalStyle } from 'styled-components';
import { sdds_platform_ai__light } from '@salutejs/sdds-themes';

const Theme = createGlobalStyle(sdds_platform_ai__light);

// вызовите <Theme /> в корне приложения

Переключение темы в рантайме и подключение через css-модули описаны в документации.

Использование компонентов

// App.tsx
import { Button, BodyL } from '@salutejs/sdds-platform-ai';
import '@salutejs/sdds-themes/css/sdds_platform_ai__light.css';

export const App = () => {
    return (
        <>
            <BodyL>Hello, SDDS PLATFORM AI!</BodyL>
            <Button>Кнопка</Button>
        </>
    );
};

Дизайн-токены доступны в виде js-переменных:

• базовый набор — из @salutejs/sdds-themes/tokens
• уникальные токены темы — из @salutejs/sdds-themes/tokens/sdds_platform_ai.

import { textAccent } from '@salutejs/sdds-themes/tokens';

<p style={{ color: textAccent }}>Пример использования токена</p>;

SSR и Next.js

• Библиотека поддерживает React Server Components (App Router) только при явном использовании директивы 'use client' в модулях, импортирующих компоненты.
• Для CSS-варианта поставки добавьте пакеты в transpilePackages в next.config.js:

const nextConfig = {
    transpilePackages: ['@salutejs/sdds-platform-ai', '@salutejs/plasma-new-hope', '@salutejs/plasma-icons'],
};

Подробности — в гайде по Next.js.

MCP-сервер для AI-агентов

Примечание: Поддерживаются версии библиотеки начиная с 0.343.0 — нужная указывается параметром --version.

Библиотека предоставляет MCP-сервер @salutejs/sdds-mcp — через него LLM-агент (Claude Code, Cursor и др.) получает актуальную документацию:

• список компонентов
• описание props
• примеры использования
• токены и гайды.

Сервер работает по stdio:

npx -y @salutejs/sdds-mcp@latest --lib sdds-platform-ai

Если агент настраивается через конфигурацию, используйте шаблон:

{
    "mcpServers": {
        "sdds-platform-ai": {
            "command": "npx",
            "args": ["-y", "@salutejs/sdds-mcp@latest", "--lib", "sdds-platform-ai"]
        }
    }
}

Подробности и список инструментов — в гайде по MCP.