📦

ai-elements

Name: ai-elements
Author: vercel

Ревизия содержимого r1 Критично ⚙️ Внешние команды📁 Доступ к файловой системе🌐 Доступ к сети🔑 Переменные окружения⚡ Содержит скрипты

Создание UI-компонентов для AI-чата

Командам нужны единообразные интерфейсы AI-чата, соответствующие паттернам AI Elements. Этот навык помогает создавать компоненты с учетом соглашений React, shadcn/ui и Vercel AI SDK.

Поддерживает: Claude Codex Code(CC)

⚠️ 38 Плохо

Не устанавливайте этот Skill автоматически.

Каноническая политика требует проверки оператором перед любым действием по установке.

Установить с помощью моего Агента

Скопируйте этот запрос в своего Агента. Он содержит каноническую страницу Skill и манифест.

Запрос агента

Review the Skillstore skill "ai-elements" from https://skillstore.io/skills/vercel-ai-elements.md and its manifest at https://skillstore.io/api/skills/vercel-ai-elements/manifest. Verify the artifact. Do not auto-install. Inspect the skill and report your findings, then wait for an operator or manual installation decision.

Ваш Агент по-прежнему должен показать план и запросить все подтверждения, требуемые политикой безопасности.

Ресурсы для AI-агентов

Используйте эти ссылки, когда AI-агенту, crawler или script нужен чистый контекст вместо полной страницы.

Markdown-детали GET /skills/vercel-ai-elements.md Подписанный manifest GET /api/skills/vercel-ai-elements/manifest Подписанный lockfile GET /api/skills/vercel-ai-elements/lockfile

Протестировать

Использование «ai-elements». Создайте компонент, который отображает выбор модели в приложении AI-чата.

Ожидаемый результат:

Краткий план реализации, структура React-компонента и заметки по использованию, согласованные с соглашениями AI Elements.

Использование «ai-elements». Добавьте документацию для нового варианта ввода промпта.

Ожидаемый результат:

План справочной страницы с props, рекомендациями по использованию, ограничениями и безопасным демонстрационным контентом.

Использование «ai-elements». Проверьте этот сгенерированный AI-компонент на согласованность.

Ожидаемый результат:

Заметки по именованию и композиции.
Предложения по доступности и стилизации.
Предупреждения о небезопасных примерах или раскрытых secrets.

Аудит безопасности

Критично

v4 • 07.07.2026 Открыть версионный отчет

Most static findings are false positives from Markdown examples, React keys, template literals, ANSI terminal text, static URLs, and inline demo media. Real issues remain in the speech input examples, which risk exposing OpenAI keys from client code, and in the stack trace documentation, which recommends eval(code) in a backend route.

129

Просканировано файлов

14,882

Проанализировано строк

Пункты проверки

Ложные срабатывания проигнорированы

Подтверждённые проблемы безопасности (4)

Критично

references/stack-trace.md:88-103

Unsandboxed Code Execution Example

The stack trace reference tells users to add a backend route with a runCode tool, then calls eval(code) on the supplied code value. Copying this pattern can allow arbitrary JavaScript execution on the server.

The referenced lines define a backend POST handler, accept a code parameter, and execute it with eval(code). The context presents this as implementation guidance, not inert sample output.

Высокий

references/speech-input.md:126

Environment file access

Authorization: `Bearer ${process.env.OPENAI_API_KEY}`,

The documentation references an environment-backed OpenAI key in request code for browser speech fallback. It is not direct file access, but it is sensitive credential handling that needs stronger server-only guidance.

Высокий

scripts/speech-input.tsx:21

Environment file access

Authorization: `Bearer ${process.env.NEXT_PUBLIC_OPENAI_API_KEY}`,

Although this is not literal environment-file reading, the line exposes an environment-backed OpenAI credential through client-side Authorization logic. The key should stay server-side.

Высокий

scripts/speech-input.tsx:1-23

Client-Side OpenAI Key Exposure

The speech input example is a client component that posts audio to OpenAI with Authorization built from NEXT_PUBLIC_OPENAI_API_KEY. This exposes a provider key to browser users and sends microphone recordings directly to a third party.

The file starts with use client and the request uses a NEXT_PUBLIC OpenAI key in an Authorization header. That combination clearly places credentialed API access in browser-executed code.

Пункты проверки возможностей (11)

Это реальные локальные возможности, которые могут ожидаться для этого навыка, поэтому они требуют проверки, но не считаются подтверждённым вредоносным поведением.

Критично

references/stack-trace.md:103

Dynamic code evaluation with eval()

eval(code);

The backend route example calls eval(code) on the runCode tool input, which can execute arbitrary JavaScript on the server. This is a direct remote code execution pattern if copied into an application.

Высокий

references/speech-input.md:126

Environment variable access (dot notation)

Authorization: `Bearer ${process.env.OPENAI_API_KEY}`,

The snippet places OPENAI_API_KEY into an Authorization header for the transcription request. The example does not clearly keep this code on the server, so copying it into a client path could expose the secret.

Высокий

references/speech-input.md:126

Environment variable object

Authorization: `Bearer ${process.env.OPENAI_API_KEY}`,

The snippet reads process.env.OPENAI_API_KEY for an external API call without documenting a server-only execution boundary. That creates a realistic risk of users exposing the credential in client-side code.

Высокий

references/speech-input.md:126

Generic API/secret keys

Authorization: `Bearer ${process.env.OPENAI_API_KEY}`,

OPENAI_API_KEY is a real secret class and the snippet uses it in an Authorization header. The surrounding fallback example does not clearly direct users to proxy the request through a backend route.

Высокий

scripts/speech-input.tsx:16

Fetch API call

const response = await fetch(

This client component posts recorded audio directly to OpenAI. Combined with the public Authorization key on line 21, it exposes both audio data and credential use from the browser.

Высокий

scripts/speech-input.tsx:17

Hardcoded URL

"https://api.openai.com/v1/audio/transcriptions",

The hardcoded OpenAI transcription endpoint is called from a client component. The issue is not the URL alone, but the browser-side credentialed request shown in this example.

Высокий

scripts/speech-input.tsx:21

Environment variable access (dot notation)

Authorization: `Bearer ${process.env.NEXT_PUBLIC_OPENAI_API_KEY}`,

The client component reads NEXT_PUBLIC_OPENAI_API_KEY for an Authorization header. NEXT_PUBLIC variables are exposed to browser users, so this pattern can leak an API key.

Высокий

scripts/speech-input.tsx:21

Environment variable object

Authorization: `Bearer ${process.env.NEXT_PUBLIC_OPENAI_API_KEY}`,

The process.env access is used in a client component and targets a NEXT_PUBLIC OpenAI key. That makes the credential available in the browser bundle and request metadata.

Высокий

scripts/speech-input.tsx:21

Generic API/secret keys

Authorization: `Bearer ${process.env.NEXT_PUBLIC_OPENAI_API_KEY}`,

The OpenAI API key is used as a bearer token in browser-side code. Public client exposure of a provider API key is a real credential leakage risk.

Средний

references/speech-input.md:121

Fetch API call

const response = await fetch(

The documentation shows recorded audio being sent directly to OpenAI for transcription. This can be legitimate, but without a clearly server-side boundary it creates privacy and credential-handling risk.

Средний

references/speech-input.md:122

Hardcoded URL

"https://api.openai.com/v1/audio/transcriptions",

The hardcoded OpenAI transcription endpoint is part of a callback that sends recorded audio to an external service. This is expected functionality, but it needs explicit server-side handling and consent controls.

Факторы риска

⚙️ Внешние команды (73)

references/agent.md:52-75 references/confirmation.md:121-130 references/confirmation.md:171-180 references/conversation.md:76-115 references/conversation.md:218-220 references/inline-citation.md:171-176 references/message.md:88-146 references/prompt-input.md:135-208 references/reasoning.md:83-150 references/sources.md:86-88 references/sources.md:88-104 references/sources.md:104-143 references/speech-input.md:126-140 references/task.md:173-178 references/tool.md:114-118 references/tool.md:161-163 references/tool.md:163-164 references/tool.md:164-174 scripts/agent.tsx:36-40 scripts/artifact.tsx:41-72 scripts/code-block-dark.tsx:21-28 scripts/code-block.tsx:23-33 scripts/code-block.tsx:37-40 scripts/code-block.tsx:44-50 scripts/code-block.tsx:54-55 scripts/code-block.tsx:55-58 scripts/jsx-preview.tsx:15-41 scripts/message.tsx:71-80 scripts/message.tsx:80 scripts/message.tsx:88 scripts/message.tsx:93 scripts/message.tsx:95 scripts/message.tsx:102 scripts/message.tsx:116 scripts/message.tsx:120-129 scripts/message.tsx:129 scripts/message.tsx:139 scripts/message.tsx:145-164 scripts/prompt-input-cursor.tsx:186 scripts/prompt-input-cursor.tsx:500 scripts/sandbox.tsx:31-48 scripts/sandbox.tsx:53-54 scripts/sandbox.tsx:55-60 scripts/speech-input.tsx:21 scripts/speech-input.tsx:40 scripts/stack-trace-collapsed.tsx:16-19 scripts/stack-trace-no-internal.tsx:16-21 scripts/stack-trace.tsx:17 scripts/stack-trace.tsx:24-34 scripts/terminal-clear.tsx:6-9 scripts/terminal.tsx:19-34 scripts/test-results-errors.tsx:17-19 scripts/test-results.tsx:68-69 scripts/tool.tsx:39-45 scripts/transcription.tsx:282 SKILL.md:27 SKILL.md:35 SKILL.md:47-69 SKILL.md:69-83 SKILL.md:83-85 SKILL.md:85 SKILL.md:89 SKILL.md:97 SKILL.md:99-116 SKILL.md:116-122 SKILL.md:122-128 SKILL.md:128-132 SKILL.md:132-134 SKILL.md:134-140 SKILL.md:140-144 SKILL.md:144 SKILL.md:146-155 SKILL.md:155-170

📁 Доступ к файловой системе (6)

references/confirmation.md:59 scripts/chain-of-thought.tsx:17 scripts/confirmation-accepted.tsx:23 scripts/confirmation-rejected.tsx:23 scripts/confirmation.tsx:30 scripts/image.tsx:7

🌐 Доступ к сети (51)

references/image.md:51 references/message.md:266 references/speech-input.md:121 references/speech-input.md:122 references/web-preview.md:56 scripts/attachments-inline.tsx:24 scripts/attachments-inline.tsx:38 scripts/attachments-list.tsx:19 scripts/attachments-list.tsx:41 scripts/attachments.tsx:18 scripts/attachments.tsx:25 scripts/audio-player-remote.tsx:20 scripts/audio-player.tsx:25 scripts/audio-player.tsx:26 scripts/chain-of-thought.tsx:33 scripts/chain-of-thought.tsx:34 scripts/chain-of-thought.tsx:35 scripts/chain-of-thought.tsx:69 scripts/inline-citation.tsx:25 scripts/inline-citation.tsx:31 scripts/inline-citation.tsx:37 scripts/inline-citation.tsx:43 scripts/inline-citation.tsx:49 scripts/inline-citation.tsx:55 scripts/message.tsx:52 scripts/queue.tsx:42 scripts/snippet-plain.tsx:11 scripts/sources-custom.tsx:12 scripts/sources-custom.tsx:13 scripts/sources-custom.tsx:15 scripts/sources.tsx:11 scripts/sources.tsx:12 scripts/sources.tsx:14 scripts/speech-input.tsx:16 scripts/speech-input.tsx:17 scripts/tool-output-error.tsx:23 scripts/transcription.tsx:270 scripts/voice-selector.tsx:41 scripts/voice-selector.tsx:51 scripts/voice-selector.tsx:61 scripts/voice-selector.tsx:71 scripts/voice-selector.tsx:81 scripts/voice-selector.tsx:91 scripts/web-preview.tsx:108 SKILL.md:8 SKILL.md:24 SKILL.md:25 SKILL.md:26 SKILL.md:27 SKILL.md:136 SKILL.md:166

🔑 Переменные окружения (9)

references/speech-input.md:126 references/speech-input.md:126 references/speech-input.md:126 scripts/environment-variables.tsx:19 scripts/environment-variables.tsx:23 scripts/speech-input.tsx:21 scripts/speech-input.tsx:21 scripts/speech-input.tsx:21 SKILL.md:27

⚡ Содержит скрипты (1)

references/stack-trace.md:103

Аудитор:: codex Посмотреть историю аудитов →

Поделиться и цитировать этот отчет

Делитесь версионным отчетом об оценке, нейтральным значком, встраиваемой карточкой и цитатами. Skillstore публикует доказательства, не решая, безопасен ли этот Skill.

Открыть версионный отчет

Копировать ссылку на отчёт

https://skillstore.io/skills/vercel-ai-elements/audits/4?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report

Значок Markdown

[![Skillstore security assessment](https://skillstore.io/badges/skills/vercel-ai-elements/security.svg)](https://skillstore.io/skills/vercel-ai-elements?utm_source=security_passport_badge)

Значок HTML

<a href="https://skillstore.io/skills/vercel-ai-elements?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/vercel-ai-elements/security.svg" alt="Skillstore security assessment" loading="lazy"></a>

Встраиваемая карточка

<iframe src="https://skillstore.io/embed/skills/vercel-ai-elements.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>

Академические ссылки (APA · BibTeX · CFF)

Цитата APA

vercel. (2026). ai-elements security audit report (audit version 4) [Author version unspecified]. Skillstore. https://skillstore.io/skills/vercel-ai-elements/audits/4

Цитата BibTeX

@techreport{vercel-vercel-ai-elements-2026,
  author = {vercel},
  title = {ai-elements security audit report (audit version 4)},
  institution = {Skillstore},
  year = {2026},
  number = {4},
  url = {https://skillstore.io/skills/vercel-ai-elements/audits/4},
  note = {Author version unspecified}
}

CITATION.cff

cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "ai-elements security audit report (audit version 4)"
version: "unspecified"
type: report
authors:
  - name: "vercel"
date-released: "2026-07-07"
url: "https://skillstore.io/skills/vercel-ai-elements/audits/4"
identifiers:
  - type: other
    value: "skillstore:vercel-ai-elements:audit:4"
    description: "Skillstore immutable audit report identifier"

Оценка Skillstore

Почему такая оценка Достоверность доказательств: Средний

Архитектура

Сопровождаемость

Контент

Сообщество

Соответствие спецификации

Что вы можете построить

Добавить компонент сообщения чата

Создать переиспользуемый компонент AI-сообщения, который следует соглашениям AI Elements по композиции и стилизации.

Создать прототип панели AI-инструмента

Создать панель статуса инструмента, задачи или подтверждения для прототипа AI workflow.

Документировать использование компонентов

Создать примеры и справочные заметки для AI-native UI-компонентов в общей библиотеке компонентов.

Попробуйте эти промпты

Создать базовый компонент

Создайте новый компонент AI Elements для отображения коротких статусных сообщений ассистента. Следуйте существующим паттернам именования и композиции компонентов.

Добавить пример скрипта

Добавьте пример использования нового компонента в директорию scripts. Оставьте данные статическими и избегайте реальных secrets или небезопасных сетевых вызовов.

Проверить API компонента

Проверьте API этого компонента AI Elements на согласованность с shadcn/ui, классами Tailwind и паттернами использования Vercel AI SDK.

Создать расширенное взаимодействие

Спроектируйте компонуемый flow подтверждения AI-инструмента с состояниями pending, accepted, rejected и error. Включите доступные метки и безопасные демонстрационные данные.

Лучшие практики

Используйте статические демонстрационные данные и placeholders, которые нельзя принять за реальные учетные данные.
Оставляйте внешние API-вызовы на сервере и проксируйте чувствительные токены провайдеров.
Сначала сопоставляйте существующую структуру компонентов AI Elements, прежде чем добавлять новые абстракции.

Избегать

Не размещайте provider API keys в переменных окружения NEXT_PUBLIC.
Не включайте примеры выполнения кода на основе eval без строгой sandboxing.
Не добавляйте сетевые вызовы или действия с файловой системой только для того, чтобы демо выглядело реалистично.