Skills ai-elements

📦

ai-elements

Name: ai-elements
Author: vercel

Content revision r1 Critical ⚙️ External commands📁 Filesystem access🌐 Network access🔑 Env variables⚡ Contains scripts

Build AI Chat Interfaces with AI Elements

AI chat interfaces require many coordinated React components. This skill guides creation and customization of AI Elements components for Vercel AI SDK apps.

Supports: Claude Codex Code(CC)

⚠️ 38 Poor

Do not auto-install this skill.

The canonical policy requires operator review before any installation action.

Install with my Agent

Copy this request to your Agent. It includes the canonical Skill page and manifest.

Agent request

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.

Your Agent should still show its plan and request any confirmation required by the security policy.

Agent-readable resources

Use these links when an AI agent, crawler, or script needs clean context instead of reading the full page.

Markdown detail GET /skills/vercel-ai-elements.md Signed manifest GET /api/skills/vercel-ai-elements/manifest Signed lockfile GET /api/skills/vercel-ai-elements/lockfile

Test it

Using "ai-elements". Request to add a simple AI chat interface.

Expected outcome:

A concise implementation plan that identifies the needed AI Elements components and their composition order.

Using "ai-elements". Request to customize assistant messages with sources and actions.

Expected outcome:

Recommended message structure for assistant responses.
Source display guidance for citations.
Action placement guidance for copy, retry, and feedback controls.

Using "ai-elements". Request to prepare a production review.

Expected outcome:

A checklist covering server-side API handling, component accessibility, Tailwind setup, and Vercel AI SDK integration points.

Security Audit

Critical

v4 • 7/7/2026 Open versioned report

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

Files scanned

14,882

Lines analyzed

Review items

False positives ignored

Confirmed security concerns (4)

Critical

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.

High

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.

High

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.

High

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.

Capability review items (11)

These are real local capabilities that may be expected for this skill, so they require review but are not counted as confirmed malicious behavior.

Critical

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.

High

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.

High

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.

High

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.

High

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.

High

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.

High

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.

High

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.

High

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.

Medium

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.

Medium

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.

Risk Factors

⚙️ External commands (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

📁 Filesystem access (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

🌐 Network access (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

🔑 Env variables (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

⚡ Contains scripts (1)

references/stack-trace.md:103

Audited by: codex View Audit History →

Share & cite this report

Share the versioned assessment report, neutral badge, embed card, and citations. Skillstore reports evidence without deciding whether this Skill is safe.

Open versioned report

Copy report link

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

Markdown badge

[![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 badge

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

Embed card

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

Academic citations (APA · BibTeX · CFF)

APA citation

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

BibTeX citation

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

Why this score Evidence Confidence: Medium

Architecture

Maintainability

Content

Community

Spec Compliance

What You Can Build

Create Chat UI Components

Add message, conversation, prompt input, and response components to a Next.js AI application.

Standardize AI Product Patterns

Use consistent AI Elements patterns across tools, sources, reasoning, tasks, and media displays.

Document Component Integration

Prepare implementation guidance for teams adopting shadcn/ui and Vercel AI SDK together.

Try These Prompts

Add a Basic Chat View

Use AI Elements to add a basic chat view with messages, a conversation container, and a prompt input.

Customize Message Rendering

Create an AI Elements message layout that supports user messages, assistant responses, attachments, and action buttons.

Integrate Tool Feedback

Design an AI Elements interface that shows tool calls, tool outputs, sources, and task progress for a coding assistant.

Review a Production Integration

Review my AI Elements implementation for secure API handling, accessible controls, loading states, and consistent shadcn/ui patterns.

Best Practices

Keep provider API keys and transcription requests behind server routes.
Follow the existing AI Elements composition patterns before adding new abstractions.
Test components with loading, empty, error, and long-content states.

Avoid

Do not place private provider keys in client components or public environment variables.
Do not copy demo data into production without reviewing privacy and security impact.
Do not bypass shadcn/ui and Tailwind conventions with unrelated component patterns.