diff --git a/package-lock.json b/package-lock.json
index 76a3896393ae..3e66af816790 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -55,6 +55,7 @@
         "overlayscrollbars": "^2.16.0",
         "overlayscrollbars-react": "^0.5.6",
         "prismjs": "^1.29.0",
+        "rate-limiter-flexible": "^11.2.0",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
         "react-i18next": "^14.0.5",
@@ -18886,6 +18887,12 @@
         "safe-buffer": "^5.1.0"
       }
     },
+    "node_modules/rate-limiter-flexible": {
+      "version": "11.2.0",
+      "resolved": "https://registry.npmjs.org/rate-limiter-flexible/-/rate-limiter-flexible-11.2.0.tgz",
+      "integrity": "sha512-L0eIK+BmFMi6NcvmtEg7RSswOFKi9MMD5RhBIypFfOve+G6Jl1Xbb8qEHgK3uRzNtkOFYF0L9f7P4rSf2PnUVw==",
+      "license": "ISC"
+    },
     "node_modules/raw-body": {
       "version": "2.5.2",
       "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.5.2.tgz",
diff --git a/package.json b/package.json
index 1013eb11600b..e9ff83d55c2a 100644
--- a/package.json
+++ b/package.json
@@ -55,6 +55,7 @@
     "overlayscrollbars": "^2.16.0",
     "overlayscrollbars-react": "^0.5.6",
     "prismjs": "^1.29.0",
+    "rate-limiter-flexible": "^11.2.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-i18next": "^14.0.5",
diff --git a/src/blocks/CustomHeader/CustomHeader.tsx b/src/blocks/CustomHeader/CustomHeader.tsx
index aba6766a5347..4d82e79df24a 100644
--- a/src/blocks/CustomHeader/CustomHeader.tsx
+++ b/src/blocks/CustomHeader/CustomHeader.tsx
@@ -1,9 +1,10 @@
-import {ChevronRight} from '@gravity-ui/icons';
+import {ChevronRight, SparklesFill} from '@gravity-ui/icons';
 import {Animatable, AnimateBlock, Col, Grid, Row, YFMWrapper} from '@gravity-ui/page-constructor';
 import {Button, ButtonProps, Flex, Icon, IconData, Text} from '@gravity-ui/uikit';
 import React from 'react';
 import ReactTimeAgo from 'react-time-ago';
 
+import {GeneratePlaygroundModal} from '../../components/GeneratePlaygroundModal';
 import {Link} from '../../components/Link';
 import {useLocale} from '../../hooks/useLocale';
 import {block} from '../../utils';
@@ -62,6 +63,7 @@ export const CustomHeader: React.FC<CustomHeaderProps> = ({
     banner,
 }) => {
     const locale = useLocale();
+    const [isGenerateModalOpen, setGenerateModalOpen] = React.useState(false);
 
     const showNewsBlock = news && news.items && news.items.length > 0;
     const showBannerBlock = banner?.content;
@@ -127,8 +129,25 @@ export const CustomHeader: React.FC<CustomHeaderProps> = ({
                                                 </Button>
                                             );
                                         })}
+                                        <Button
+                                            className={b('button')}
+                                            size="xl"
+                                            view="outlined"
+                                            onClick={() => setGenerateModalOpen(true)}
+                                        >
+                                            <Icon
+                                                className={b('button-icon')}
+                                                data={SparklesFill}
+                                                size={16}
+                                            />
+                                            AI-генерация playground
+                                        </Button>
                                     </div>
                                 ) : null}
+                                <GeneratePlaygroundModal
+                                    open={isGenerateModalOpen}
+                                    onClose={() => setGenerateModalOpen(false)}
+                                />
                             </div>
                         </Flex>
                     </Col>
diff --git a/src/blocks/GeneratePlaygroundBlock/GeneratePlaygroundBlock.scss b/src/blocks/GeneratePlaygroundBlock/GeneratePlaygroundBlock.scss
new file mode 100644
index 000000000000..306c191bdc7a
--- /dev/null
+++ b/src/blocks/GeneratePlaygroundBlock/GeneratePlaygroundBlock.scss
@@ -0,0 +1,109 @@
+@use '~@gravity-ui/page-constructor/styles/variables.scss' as pcVariables;
+@use '../../variables.scss';
+
+$block: '.#{variables.$ns}generate-playground-block';
+
+#{$block} {
+    padding: 80px 0;
+
+    &__inner {
+        max-width: 720px;
+        margin: 0 auto;
+        padding: 0 24px;
+        display: flex;
+        flex-direction: column;
+        gap: 24px;
+    }
+
+    &__title {
+        text-align: center;
+    }
+
+    &__input-area {
+        position: relative;
+        padding: 8px;
+    }
+
+    &__overlay {
+        position: absolute;
+        inset: 0;
+        z-index: 10;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        gap: 12px;
+        border-radius: 8px;
+        background: var(--g-color-base-background);
+        opacity: 0.92;
+    }
+
+    &__actions {
+        display: flex;
+        gap: 12px;
+        justify-content: center;
+
+        @media (max-width: map-get(pcVariables.$gridBreakpoints, 'sm') - 1) {
+            flex-direction: column;
+        }
+    }
+
+    &__input-wrap {
+        display: flex;
+        gap: 12px;
+        align-items: flex-start;
+        margin-bottom: 20px;
+
+        @media (max-width: map-get(pcVariables.$gridBreakpoints, 'sm') - 1) {
+            flex-direction: column;
+        }
+    }
+
+    &__textarea-wrap {
+        position: relative;
+        flex: 1;
+    }
+
+    &__textarea {
+        width: 100%;
+    }
+
+    &__counter {
+        position: absolute;
+        right: 8px;
+        bottom: 8px;
+        pointer-events: none;
+    }
+
+    &__button {
+        flex-shrink: 0;
+
+        @media (max-width: map-get(pcVariables.$gridBreakpoints, 'sm') - 1) {
+            width: 100%;
+        }
+    }
+
+    &__examples {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 8px;
+        justify-content: center;
+    }
+
+    &__example-chip {
+        padding: 6px 12px;
+        border-radius: 100px;
+        border: 1px solid var(--g-color-line-generic);
+        background: transparent;
+        color: var(--g-color-text-secondary);
+        font-size: 13px;
+        line-height: 18px;
+        cursor: pointer;
+        transition: border-color 0.15s ease, color 0.15s ease;
+
+        &:hover {
+            border-color: var(--g-color-line-brand);
+            color: var(--g-color-text-primary);
+        }
+    }
+}
diff --git a/src/blocks/GeneratePlaygroundBlock/GeneratePlaygroundBlock.tsx b/src/blocks/GeneratePlaygroundBlock/GeneratePlaygroundBlock.tsx
new file mode 100644
index 000000000000..cd342d95caa4
--- /dev/null
+++ b/src/blocks/GeneratePlaygroundBlock/GeneratePlaygroundBlock.tsx
@@ -0,0 +1,120 @@
+import {Play, SparklesFill} from '@gravity-ui/icons';
+import {AnimateBlock} from '@gravity-ui/page-constructor';
+import {Button, Icon, Spin, Text, TextArea} from '@gravity-ui/uikit';
+import React from 'react';
+
+import {AiDisclaimer} from '../../components/GeneratePlaygroundModal/AiDisclaimer';
+import {LoadingText} from '../../components/GeneratePlaygroundModal/LoadingText';
+import {
+    EXAMPLES,
+    LOADING_TEXTS,
+    MAX_LENGTH,
+} from '../../components/GeneratePlaygroundModal/constants';
+import {useGeneratePlayground} from '../../components/GeneratePlaygroundModal/hooks/useGeneratePlayground';
+import {openStackblitzFromGenerated} from '../../components/MDXRenderer/Sandbox/stackblitz';
+import {block} from '../../utils';
+import {CustomBlock} from '../constants';
+
+import './GeneratePlaygroundBlock.scss';
+
+const b = block('generate-playground-block');
+
+export type GeneratePlaygroundBlockModel = {
+    type: CustomBlock.GeneratePlayground;
+    animated?: boolean;
+};
+
+export const GeneratePlaygroundBlock: React.FC<GeneratePlaygroundBlockModel> = ({animated}) => {
+    const {input, setInput, loading, result, error, isOverLimit, handleGenerate, reset} =
+        useGeneratePlayground();
+
+    return (
+        <AnimateBlock className={b()} animate={animated}>
+            <div className={b('inner')}>
+                <Text variant="display-2" className={b('title')}>
+                    Попробуйте прямо сейчас
+                </Text>
+                {result ? (
+                    <>
+                        <div className={b('actions')}>
+                            <Button
+                                view="action"
+                                size="xl"
+                                onClick={() => openStackblitzFromGenerated(result)}
+                            >
+                                <Icon data={Play} size={16} />
+                                Открыть Playground
+                            </Button>
+                            <Button view="outlined" size="xl" onClick={reset}>
+                                Начать заново
+                            </Button>
+                        </div>
+                        <AiDisclaimer />
+                    </>
+                ) : (
+                    <div className={b('input-area')}>
+                        <div className={b('input-wrap')}>
+                            <div className={b('textarea-wrap')}>
+                                <TextArea
+                                    className={b('textarea')}
+                                    value={input}
+                                    onUpdate={setInput}
+                                    placeholder={`Например: "${EXAMPLES[0]}"`}
+                                    minRows={2}
+                                    maxRows={4}
+                                    disabled={loading}
+                                    validationState={isOverLimit ? 'invalid' : undefined}
+                                    onKeyDown={(e) => {
+                                        if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) {
+                                            handleGenerate();
+                                        }
+                                    }}
+                                />
+                                <Text
+                                    className={b('counter', {over: isOverLimit})}
+                                    variant="caption-2"
+                                    color={isOverLimit ? 'danger' : 'secondary'}
+                                >
+                                    {input.length}/{MAX_LENGTH}
+                                </Text>
+                            </div>
+                            <Button
+                                className={b('button')}
+                                view="action"
+                                size="xl"
+                                loading={loading}
+                                disabled={!input.trim() || isOverLimit}
+                                onClick={handleGenerate}
+                            >
+                                <Icon data={SparklesFill} size={16} />
+                                Сгенерировать Playground
+                            </Button>
+                        </div>
+                        <div className={b('examples')}>
+                            {EXAMPLES.map((example) => (
+                                <button
+                                    key={example}
+                                    className={b('example-chip')}
+                                    onClick={() => setInput(example)}
+                                >
+                                    {example}
+                                </button>
+                            ))}
+                        </div>
+                        {loading && (
+                            <div className={b('overlay')}>
+                                <Spin size="m" />
+                                <LoadingText active={loading} texts={LOADING_TEXTS} />
+                            </div>
+                        )}
+                    </div>
+                )}
+                {error && (
+                    <Text color="danger" variant="body-2">
+                        {error}
+                    </Text>
+                )}
+            </div>
+        </AnimateBlock>
+    );
+};
diff --git a/src/blocks/constants.ts b/src/blocks/constants.ts
index f182ef642de4..9afb649f3636 100644
--- a/src/blocks/constants.ts
+++ b/src/blocks/constants.ts
@@ -9,4 +9,5 @@ export enum CustomBlock {
     GithubStars = 'github-stars-promotion',
     Contributors = 'contributors',
     Iframe = 'iframe',
+    GeneratePlayground = 'generate-playground',
 }
diff --git a/src/blocks/types.ts b/src/blocks/types.ts
index b8cb9b2213fe..9bd05f896ff1 100644
--- a/src/blocks/types.ts
+++ b/src/blocks/types.ts
@@ -1,6 +1,7 @@
 import {ContributorsModel} from './Contributors/types';
 import {CustomHeaderModel} from './CustomHeader/CustomHeader';
 import {ExamplesModel} from './Examples/Examples';
+import {GeneratePlaygroundBlockModel} from './GeneratePlaygroundBlock/GeneratePlaygroundBlock';
 import {GithubStarsModel} from './GithubStarsBlock/GithubStarsBlock';
 import {IframeModel} from './IFrameBlock/IFrameBlock';
 import {LibrariesModel} from './Libraries/Libraries';
@@ -17,4 +18,5 @@ export type CustomBlockModel =
     | TemplatesModel
     | GithubStarsModel
     | ContributorsModel
-    | IframeModel;
+    | IframeModel
+    | GeneratePlaygroundBlockModel;
diff --git a/src/components/GeneratePlaygroundModal/AiDisclaimer/AiDisclaimer.tsx b/src/components/GeneratePlaygroundModal/AiDisclaimer/AiDisclaimer.tsx
new file mode 100644
index 000000000000..4f86013ba12c
--- /dev/null
+++ b/src/components/GeneratePlaygroundModal/AiDisclaimer/AiDisclaimer.tsx
@@ -0,0 +1,9 @@
+import {Text} from '@gravity-ui/uikit';
+import React from 'react';
+
+export const AiDisclaimer: React.FC = () => (
+    <Text variant="caption-2" color="secondary">
+        ⚠️ Результат создаётся с помощью AI и может содержать ошибки — рекомендуем проверить
+        сгенерированный код
+    </Text>
+);
diff --git a/src/components/GeneratePlaygroundModal/AiDisclaimer/index.ts b/src/components/GeneratePlaygroundModal/AiDisclaimer/index.ts
new file mode 100644
index 000000000000..4483f5d76eef
--- /dev/null
+++ b/src/components/GeneratePlaygroundModal/AiDisclaimer/index.ts
@@ -0,0 +1 @@
+export {AiDisclaimer} from './AiDisclaimer';
diff --git a/src/components/GeneratePlaygroundModal/GeneratePlaygroundModal.scss b/src/components/GeneratePlaygroundModal/GeneratePlaygroundModal.scss
new file mode 100644
index 000000000000..66a58d7d8f02
--- /dev/null
+++ b/src/components/GeneratePlaygroundModal/GeneratePlaygroundModal.scss
@@ -0,0 +1,43 @@
+@use '../../variables.scss';
+
+$block: '.#{variables.$ns}generate-playground-modal';
+
+#{$block} {
+    .g-dialog-content {
+        position: relative;
+    }
+
+    &__overlay {
+        position: absolute;
+        inset: 0;
+        z-index: 10;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        gap: 12px;
+        border-radius: inherit;
+        opacity: 0.92;
+        background: var(--g-color-base-background);
+    }
+
+    &__result {
+        min-height: 100px;
+    }
+
+    &__textarea-wrap {
+        position: relative;
+    }
+
+    &__textarea {
+        font-size: 16px;
+        width: 100%;
+    }
+
+    &__counter {
+        position: absolute;
+        right: 8px;
+        bottom: 8px;
+        pointer-events: none;
+    }
+}
diff --git a/src/components/GeneratePlaygroundModal/GeneratePlaygroundModal.tsx b/src/components/GeneratePlaygroundModal/GeneratePlaygroundModal.tsx
new file mode 100644
index 000000000000..6ebfb4cd9edf
--- /dev/null
+++ b/src/components/GeneratePlaygroundModal/GeneratePlaygroundModal.tsx
@@ -0,0 +1,107 @@
+import {Play} from '@gravity-ui/icons';
+import {Button, Dialog, Flex, Icon, Spin, Text, TextArea} from '@gravity-ui/uikit';
+import React from 'react';
+
+import {block} from '../../utils';
+import {openStackblitzFromGenerated} from '../MDXRenderer/Sandbox/stackblitz';
+
+import {AiDisclaimer} from './AiDisclaimer';
+import './GeneratePlaygroundModal.scss';
+import {LoadingText} from './LoadingText';
+import {EXAMPLES, LOADING_TEXTS, MAX_LENGTH} from './constants';
+import {useGeneratePlayground} from './hooks/useGeneratePlayground';
+
+const b = block('generate-playground-modal');
+
+interface GeneratePlaygroundModalProps {
+    open: boolean;
+    onClose: () => void;
+}
+
+export const GeneratePlaygroundModal: React.FC<GeneratePlaygroundModalProps> = ({
+    open,
+    onClose,
+}) => {
+    const {input, setInput, loading, result, error, isOverLimit, handleGenerate, reset} =
+        useGeneratePlayground();
+
+    const handleClose = () => {
+        reset();
+        onClose();
+    };
+
+    return (
+        <Dialog className={b()} maxWidth="s" open={open} onClose={handleClose}>
+            <Dialog.Header caption="AI-генерация playground" />
+            <Dialog.Body>
+                {result ? (
+                    <Flex direction="column" alignItems="center" justifyContent="center" gap={4}>
+                        <Button
+                            view="outlined-action"
+                            size="xl"
+                            onClick={() => openStackblitzFromGenerated(result)}
+                        >
+                            <Icon data={Play} size={18} />
+                            Открыть Playground
+                        </Button>
+                        <AiDisclaimer />
+                    </Flex>
+                ) : (
+                    <Flex direction="column" gap={4}>
+                        <Text variant="body-2" color="secondary">
+                            Опишите, какой интерфейс нужен — AI сгенерирует playground с кодом на
+                            основе Gravity UI
+                        </Text>
+                        <div className={b('textarea-wrap')}>
+                            <TextArea
+                                className={b('textarea')}
+                                value={input}
+                                onUpdate={setInput}
+                                placeholder={`Например: «${EXAMPLES[0]}»`}
+                                minRows={4}
+                                maxRows={10}
+                                disabled={loading}
+                                validationState={isOverLimit ? 'invalid' : undefined}
+                                onKeyDown={(e) => {
+                                    if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) {
+                                        handleGenerate();
+                                    }
+                                }}
+                            />
+                            <Text
+                                className={b('counter')}
+                                variant="caption-2"
+                                color={isOverLimit ? 'danger' : 'secondary'}
+                            >
+                                {input.length}/{MAX_LENGTH}
+                            </Text>
+                        </div>
+                        {error && (
+                            <Text color="danger" variant="body-2">
+                                {error}
+                            </Text>
+                        )}
+                        <AiDisclaimer />
+                    </Flex>
+                )}
+            </Dialog.Body>
+            {result ? (
+                <Dialog.Footer onClickButtonCancel={handleClose} textButtonCancel="Закрыть" />
+            ) : (
+                <Dialog.Footer
+                    onClickButtonCancel={handleClose}
+                    onClickButtonApply={handleGenerate}
+                    textButtonApply="Сгенерировать"
+                    textButtonCancel="Отмена"
+                    propsButtonApply={{loading, disabled: !input.trim() || isOverLimit}}
+                />
+            )}
+            {loading && (
+                <div className={b('overlay')}>
+                    <Spin size="l" />
+                    <LoadingText active={loading} texts={LOADING_TEXTS} />
+                </div>
+            )}
+        </Dialog>
+    );
+};
diff --git a/src/components/GeneratePlaygroundModal/LoadingText/LoadingText.scss b/src/components/GeneratePlaygroundModal/LoadingText/LoadingText.scss
new file mode 100644
index 000000000000..286c6a120089
--- /dev/null
+++ b/src/components/GeneratePlaygroundModal/LoadingText/LoadingText.scss
@@ -0,0 +1,38 @@
+@use '../../../variables';
+
+$block: '.#{variables.$ns}loading-text';
+
+#{$block} {
+    opacity: 0;
+    transition: opacity 0.3s ease;
+
+    &_visible {
+        opacity: 1;
+    }
+
+    &__dots {
+        display: inline-block;
+        width: 1em;
+        text-align: left;
+
+        &::after {
+            content: '.';
+            animation: loading-text-dots 1.2s infinite;
+        }
+    }
+}
+
+@keyframes loading-text-dots {
+    0% {
+        content: '.';
+    }
+    33% {
+        content: '..';
+    }
+    66% {
+        content: '...';
+    }
+    100% {
+        content: '.';
+    }
+}
diff --git a/src/components/GeneratePlaygroundModal/LoadingText/LoadingText.tsx b/src/components/GeneratePlaygroundModal/LoadingText/LoadingText.tsx
new file mode 100644
index 000000000000..cacb3b9d2d9b
--- /dev/null
+++ b/src/components/GeneratePlaygroundModal/LoadingText/LoadingText.tsx
@@ -0,0 +1,48 @@
+import {Text} from '@gravity-ui/uikit';
+import React from 'react';
+
+import {block} from '../../../utils';
+
+import './LoadingText.scss';
+
+const b = block('loading-text');
+
+function useLoadingText(active: boolean, texts: string[]) {
+    const [index, setIndex] = React.useState(0);
+    const [visible, setVisible] = React.useState(true);
+
+    React.useEffect(() => {
+        if (!active) return;
+
+        setIndex(Math.floor(Math.random() * texts.length));
+        setVisible(true);
+
+        const interval = setInterval(() => {
+            setVisible(false);
+            setTimeout(() => {
+                setIndex(Math.floor(Math.random() * texts.length));
+                setVisible(true);
+            }, 300);
+        }, 2000);
+
+        return () => clearInterval(interval);
+    }, [active, texts]);
+
+    return {text: texts[index] ?? '', visible};
+}
+
+interface LoadingTextProps {
+    active: boolean;
+    texts: string[];
+}
+
+export const LoadingText: React.FC<LoadingTextProps> = ({active, texts}) => {
+    const {text, visible} = useLoadingText(active, texts);
+
+    return (
+        <Text className={b({visible})} variant="body-2" color="secondary">
+            {text}
+            <span className={b('dots')} />
+        </Text>
+    );
+};
diff --git a/src/components/GeneratePlaygroundModal/LoadingText/index.ts b/src/components/GeneratePlaygroundModal/LoadingText/index.ts
new file mode 100644
index 000000000000..82bd76d87ac2
--- /dev/null
+++ b/src/components/GeneratePlaygroundModal/LoadingText/index.ts
@@ -0,0 +1 @@
+export {LoadingText} from './LoadingText';
diff --git a/src/components/GeneratePlaygroundModal/constants.ts b/src/components/GeneratePlaygroundModal/constants.ts
new file mode 100644
index 000000000000..f46aa146b832
--- /dev/null
+++ b/src/components/GeneratePlaygroundModal/constants.ts
@@ -0,0 +1,19 @@
+export const MAX_LENGTH = 200;
+
+export const EXAMPLES = [
+    'Форма авторизации с email и паролем',
+    'Кнопка c модалкой подтверждения действия',
+    'Тултип с расширенной информацией при наведении',
+    'Карточка с аватаром и кнопками',
+    'Селект с поиском и группировкой опций',
+];
+
+export const LOADING_TEXTS = [
+    'Пишем компонент',
+    'Создаем playground',
+    'Реализуем стили',
+    'Собираем структуру',
+    'Подключаем зависимости',
+    'Настраиваем окружение',
+    'Генерируем разметку',
+];
diff --git a/src/components/GeneratePlaygroundModal/hooks/useGeneratePlayground.ts b/src/components/GeneratePlaygroundModal/hooks/useGeneratePlayground.ts
new file mode 100644
index 000000000000..07c27c0f365b
--- /dev/null
+++ b/src/components/GeneratePlaygroundModal/hooks/useGeneratePlayground.ts
@@ -0,0 +1,49 @@
+import React from 'react';
+
+import {openStackblitzFromGenerated} from '../../MDXRenderer/Sandbox/stackblitz';
+import {MAX_LENGTH} from '../constants';
+
+export function useGeneratePlayground() {
+    const [input, setInput] = React.useState('');
+    const [loading, setLoading] = React.useState(false);
+    const [result, setResult] = React.useState('');
+    const [error, setError] = React.useState('');
+
+    const isOverLimit = input.length > MAX_LENGTH;
+
+    const handleGenerate = async () => {
+        if (!input.trim() || isOverLimit || loading) return;
+
+        setLoading(true);
+        setError('');
+        setResult('');
+
+        try {
+            const response = await fetch('/api/generate-playground', {
+                method: 'POST',
+                headers: {'Content-Type': 'application/json'},
+                body: JSON.stringify({input}),
+            });
+
+            const data = await response.json();
+            if (data.code) {
+                setResult(data.code);
+                openStackblitzFromGenerated(data.code);
+            } else {
+                setError(data.error ?? 'Что-то пошло не так');
+            }
+        } catch {
+            setError('Произошла ошибка. Попробуйте ещё раз.');
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const reset = () => {
+        setInput('');
+        setResult('');
+        setError('');
+    };
+
+    return {input, setInput, loading, result, error, isOverLimit, handleGenerate, reset};
+}
diff --git a/src/components/GeneratePlaygroundModal/index.ts b/src/components/GeneratePlaygroundModal/index.ts
new file mode 100644
index 000000000000..fad43b7a5e2f
--- /dev/null
+++ b/src/components/GeneratePlaygroundModal/index.ts
@@ -0,0 +1 @@
+export {GeneratePlaygroundModal} from './GeneratePlaygroundModal';
diff --git a/src/components/Landing/Landing.tsx b/src/components/Landing/Landing.tsx
index ddb3085ca63a..986c22d496dd 100644
--- a/src/components/Landing/Landing.tsx
+++ b/src/components/Landing/Landing.tsx
@@ -9,6 +9,7 @@ import {CustomPageContent} from 'src/content/types';
 
 import type {LibWithMetadata} from '../../api';
 import {CustomHeader} from '../../blocks/CustomHeader/CustomHeader';
+import {GeneratePlaygroundBlock} from '../../blocks/GeneratePlaygroundBlock/GeneratePlaygroundBlock';
 import {GithubStarsBlock} from '../../blocks/GithubStarsBlock/GithubStarsBlock';
 import {IFrameBlock} from '../../blocks/IFrameBlock/IFrameBlock';
 import {Libraries} from '../../blocks/Libraries/Libraries';
@@ -70,6 +71,7 @@ export const Landing: React.FC<Props> = ({libs, backgroundImageSrc}) => {
                         [CustomBlock.Libraries]: Libraries,
                         [CustomBlock.Roadmap]: RoadmapBlock,
                         [CustomBlock.Templates]: TemplatesBlock,
+                        [CustomBlock.GeneratePlayground]: GeneratePlaygroundBlock,
                         [CustomBlock.Contributors]: ContributorsBlock,
                         [CustomBlock.Iframe]: IFrameBlock,
                     },
diff --git a/src/components/MDXRenderer/Sandbox/stackblitz.ts b/src/components/MDXRenderer/Sandbox/stackblitz.ts
index 2eb288331ebe..c8b92f2f33cd 100644
--- a/src/components/MDXRenderer/Sandbox/stackblitz.ts
+++ b/src/components/MDXRenderer/Sandbox/stackblitz.ts
@@ -220,4 +220,35 @@ function isProjectDependency(name: string): name is keyof typeof dependencies {
     return name in dependencies;
 }
 
-export {openStackblitz};
+function openStackblitzFromGenerated(source: string) {
+    const packageJson = {
+        ...packageJsonBase,
+        dependencies: {
+            ...packageJsonBase.dependencies,
+            ...getExtraDependencies(source),
+        },
+    };
+
+    sdk.openProject(
+        {
+            title: 'Gravity UI live editor',
+            description: 'Generated from landing live editor',
+            template: 'node',
+            files: {
+                'package.json': JSON.stringify(packageJson, null, 4),
+                'tsconfig.json': JSON.stringify(tsconfig, null, 4),
+                '.prettierrc': JSON.stringify(prettierrc, null, 4),
+                'index.html': indexHtml.trim(),
+                'src/main.tsx': source.trim(),
+                'src/styles.css': styles.trim(),
+                'vite.config.ts': viteConfig.trim(),
+            },
+        },
+        {
+            openFile: 'src/main.tsx',
+            newWindow: true,
+        },
+    );
+}
+
+export {openStackblitz, openStackblitzFromGenerated};
diff --git a/src/components/Menu/Menu.tsx b/src/components/Menu/Menu.tsx
index f2f683657db2..a5b26770eb10 100644
--- a/src/components/Menu/Menu.tsx
+++ b/src/components/Menu/Menu.tsx
@@ -1,5 +1,6 @@
+import {SparklesFill} from '@gravity-ui/icons';
 import {Col, Grid, Row} from '@gravity-ui/page-constructor';
-import {Icon} from '@gravity-ui/uikit';
+import {Button, Icon} from '@gravity-ui/uikit';
 import {useTranslation} from 'next-i18next';
 import {useRouter} from 'next/router';
 import React from 'react';
@@ -16,6 +17,7 @@ import {EnvironmentContext} from '../../contexts';
 import {useLocale} from '../../hooks/useLocale';
 import {block} from '../../utils';
 import {CustomScrollbar} from '../CustomScrollbar';
+import {GeneratePlaygroundModal} from '../GeneratePlaygroundModal';
 import {Link} from '../Link';
 
 import {LocalePicker} from './LocalePicker';
@@ -32,6 +34,7 @@ export const Menu: React.FC = () => {
     const router = useRouter();
 
     const [mobileMenuOpen, setMobileMenuOpen] = React.useState(false);
+    const [isGenerateModalOpen, setGenerateModalOpen] = React.useState(false);
 
     const {hideLocalePicker} = React.useContext(EnvironmentContext);
 
@@ -85,6 +88,16 @@ export const Menu: React.FC = () => {
                                         {renderItem(item)}
                                     </div>
                                 ))}
+                                <div className={b('desktop-menu-item')}>
+                                    <Button
+                                        view="outlined"
+                                        size="m"
+                                        onClick={() => setGenerateModalOpen(true)}
+                                    >
+                                        <Icon data={SparklesFill} size={16} />
+                                        Сгенерировать
+                                    </Button>
+                                </div>
                             </div>
                             {!hideLocalePicker && (
                                 <div className={b('desktop-menu-locale-picker')}>
@@ -159,6 +172,10 @@ export const Menu: React.FC = () => {
                     </Row>
                 </Grid>
             </div>
+            <GeneratePlaygroundModal
+                open={isGenerateModalOpen}
+                onClose={() => setGenerateModalOpen(false)}
+            />
         </div>
     );
 };
diff --git a/src/content/landing.ts b/src/content/landing.ts
index 9d5ea7cee33d..5d69a7b69379 100644
--- a/src/content/landing.ts
+++ b/src/content/landing.ts
@@ -113,6 +113,9 @@ export const getLanding = ({
         //     title: t('home:roadmap_title'),
         //     tasks: getRoadmapTasks(t),
         // },
+        {
+            type: CustomBlock.GeneratePlayground,
+        },
         {
             type: CustomBlock.Templates,
             title: t('home:templates_title'),
diff --git a/src/pages/api/generate-playground.ts b/src/pages/api/generate-playground.ts
new file mode 100644
index 000000000000..17165cc8522f
--- /dev/null
+++ b/src/pages/api/generate-playground.ts
@@ -0,0 +1,82 @@
+import type {NextApiRequest, NextApiResponse} from 'next';
+import OpenAI from 'openai';
+import {RateLimiterMemory} from 'rate-limiter-flexible';
+
+type GenerateCodeRequestBody = {
+    input: string;
+};
+
+const DEFAULT_BASE_URL = 'https://ai.api.cloud.yandex.net/v1';
+const API_KEY = process.env.OPENAI_API_KEY;
+const BASE_URL = process.env.BASE_URL || DEFAULT_BASE_URL;
+const PROJECT_ID = process.env.YANDEX_PROJECT_ID;
+const PROMPT_ID = process.env.GENERATE_CODE_PROMPT_ID;
+
+const rateLimiter = new RateLimiterMemory({
+    points: 5,
+    duration: 30,
+});
+
+export default async function handler(req: NextApiRequest, res: NextApiResponse) {
+    if (req.method !== 'POST') {
+        return res.status(405).json({error: 'Method not allowed'});
+    }
+
+    const ip = (req.headers['x-forwarded-for'] ?? req.socket.remoteAddress ?? 'unknown') as string;
+    const key = Array.isArray(ip) ? ip[0] : ip.split(',')[0].trim();
+
+    try {
+        await rateLimiter.consume(key);
+    } catch {
+        return res.status(429).json({error: 'Too many requests. Please wait and try again.'});
+    }
+
+    try {
+        const {input} = req.body as GenerateCodeRequestBody;
+
+        if (!input || typeof input !== 'string' || input.trim().length === 0) {
+            return res.status(400).json({error: 'Input is required'});
+        }
+
+        if (input.length > 200) {
+            return res.status(400).json({error: 'Input must not exceed 200 characters'});
+        }
+
+        const openai = new OpenAI({
+            apiKey: API_KEY,
+            baseURL: BASE_URL,
+            defaultHeaders: PROJECT_ID ? {'OpenAI-Project': PROJECT_ID} : undefined,
+        });
+
+        const response = await openai.responses.create({
+            prompt: PROMPT_ID ? {id: PROMPT_ID} : undefined,
+            input,
+            tools: [
+                {
+                    type: 'web_search',
+                    filters: {
+                        allowed_domains: [
+                            'https://gravity-ui.com/ru/components/',
+                            'https://github.com/gravity-ui/uikit/',
+                        ],
+                    },
+                    search_context_size: 'medium',
+                    user_location: {
+                        type: 'approximate',
+                        region: '225',
+                    },
+                },
+            ],
+        });
+
+        const parsed = JSON.parse(response.output_text ?? '{}');
+        return res.status(200).json({code: parsed.code ?? ''});
+    } catch (error) {
+        // eslint-disable-next-line no-console
+        console.error('Error in generate-playground API:', error);
+
+        return res.status(500).json({
+            error: error instanceof Error ? error.message : 'Unknown error',
+        });
+    }
+}