📦

ai-elements

Name: ai-elements
Author: vercel

Revisão do conteúdo r1 Crítico ⚙️ Comandos externos📁 Acesso ao sistema de arquivos🌐 Acesso à rede🔑 Variáveis de ambiente⚡ Contém scripts

Criar Componentes de UI de Chat com IA

Equipes precisam de interfaces de chat com IA consistentes que sigam os padrões do AI Elements. Esta skill orienta a criação de componentes com as convenções de React, shadcn/ui e Vercel AI SDK.

Suporta: Claude Codex Code(CC)

⚠️ 38 Ruim

Não instale este Skill automaticamente.

A política canônica exige a revisão de um operador antes de qualquer ação de instalação.

Instalar com meu Agente

Copie esta solicitação para o seu Agente. Ela inclui a página canônica do Skill e o manifesto.

Solicitação do agente

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.

Seu Agente ainda deve apresentar o plano e solicitar qualquer confirmação exigida pela política de segurança.

Recursos legíveis por agentes

Use estes links quando um agente de IA, crawler ou script precisar de contexto limpo em vez de ler a página completa.

Detalhe em Markdown GET /skills/vercel-ai-elements.md manifest assinado GET /api/skills/vercel-ai-elements/manifest lockfile assinado GET /api/skills/vercel-ai-elements/lockfile

Testar

Usando "ai-elements". Crie um componente que exiba seleção de modelo em um app de chat com IA.

Resultado esperado:

Um plano de implementação conciso, uma estrutura de componente React e notas de uso alinhadas às convenções do AI Elements.

Usando "ai-elements". Adicione documentação para uma nova variante de entrada de prompt.

Resultado esperado:

Um esboço de página de referência com props, orientações de uso, limitações e conteúdo de demonstração seguro.

Usando "ai-elements". Revise este componente de IA gerado quanto à consistência.

Resultado esperado:

Notas sobre nomenclatura e composição.
Sugestões de acessibilidade e estilo.
Avisos sobre exemplos inseguros ou segredos vazados.

Auditoria de segurança

Crítico

v4 • 07/07/2026 Abrir o relatório versionado

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

Arquivos analisados

14,882

Linhas analisadas

Itens de revisão

Falsos positivos ignorados

Preocupações de segurança confirmadas (4)

Crítico

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.

Alto

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.

Alto

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.

Alto

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.

Itens de revisão de capacidade (11)

Estas são capacidades locais reais que podem ser esperadas para esta habilidade, portanto exigem revisão, mas não são contabilizadas como comportamento malicioso confirmado.

Crítico

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.

Alto

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.

Alto

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.

Alto

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.

Alto

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.

Alto

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.

Alto

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.

Alto

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.

Alto

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.

Médio

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.

Médio

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.

Fatores de risco

⚙️ Comandos externos (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

📁 Acesso ao sistema de arquivos (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

🌐 Acesso à rede (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

🔑 Variáveis de ambiente (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

⚡ Contém scripts (1)

references/stack-trace.md:103

Auditado por: codex Ver histórico de auditoria →

Compartilhar e citar este relatório

Compartilhe o relatório de avaliação versionado, o badge neutro, o cartão incorporável e as citações. A Skillstore apresenta evidências sem decidir se este Skill é seguro.

Abrir o relatório versionado

Copiar link do relatório

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

Badge 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)

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>

Cartão incorporável

<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>

Citações acadêmicas (APA · BibTeX · CFF)

Citação APA

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

Citação 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"

Pontuação do Skillstore

Por que esta pontuação Confiança das evidências: Médio

Arquitetura

Manutenibilidade

Conteúdo

Comunidade

Conformidade com a especificação

O que você pode criar

Adicionar um Componente de Mensagem de Chat

Crie um componente reutilizável de mensagem de IA que siga as convenções de composição e estilo do AI Elements.

Prototipar um Painel de Ferramenta de IA

Crie um painel de status de ferramenta, tarefa ou confirmação para um protótipo de fluxo de trabalho com IA.

Documentar o Uso de Componentes

Crie exemplos e notas de referência para componentes de UI nativos de IA em uma biblioteca de componentes compartilhada.

Teste estes prompts

Criar um Componente Básico

Crie um novo componente AI Elements para exibir mensagens curtas de status do assistente. Siga os padrões existentes de nomenclatura e composição de componentes.

Adicionar um Script de Exemplo

Adicione um exemplo de uso para o novo componente no diretório scripts. Mantenha os dados estáticos e evite segredos reais ou chamadas de rede inseguras.

Revisar API do Componente

Revise esta API de componente AI Elements quanto à consistência com shadcn/ui, classes Tailwind e padrões de uso do Vercel AI SDK.

Criar uma Interação Avançada

Projete um fluxo combinável de aprovação de ferramenta de IA com estados pendente, aceito, rejeitado e de erro. Inclua rótulos acessíveis e dados de exemplo seguros.

Boas práticas

Use dados de demonstração estáticos e placeholders que não possam ser confundidos com credenciais reais.
Mantenha chamadas de API externas no servidor e faça proxy de tokens sensíveis de provedores.
Siga a estrutura existente de componentes do AI Elements antes de adicionar novas abstrações.

Evitar

Não coloque chaves de API de provedores em variáveis de ambiente NEXT_PUBLIC.
Não inclua exemplos de execução de código baseados em eval sem sandboxing rigoroso.
Não adicione chamadas de rede ou ações no sistema de arquivos apenas para fazer uma demonstração parecer realista.

Perguntas frequentes

O que esta skill ajuda a criar?

Ela ajuda a criar componentes React do AI Elements para chat, ferramentas, mensagens, entradas, citações e padrões relacionados de interface de IA.

Quais ferramentas podem usar esta skill?

O relatório lista suporte para Claude, Codex e Claude Code.

Ela instala o AI Elements automaticamente?

Não. Ela fornece orientação e exemplos de referência. Os usuários ainda executam os comandos relevantes de pacote ou shadcn/ui por conta própria.

A skill é segura para uso em produção?

Tenha cautela. A auditoria encontrou padrões de exemplo inseguros que devem ser corrigidos antes da publicação no marketplace.

Ela pode criar rotas de backend?

Ela pode orientar exemplos, mas rotas de backend precisam de uma revisão de segurança separada para autenticação, sandboxing e tratamento de segredos.

Qual configuração de projeto é esperada?

Ela espera as convenções de React, TypeScript, Tailwind CSS, shadcn/ui e Vercel AI SDK.