スキル ai-elements
📦

ai-elements

コンテンツリビジョン r1 重大 ⚙️ 外部コマンド📁 ファイルシステムへのアクセス🌐 ネットワークアクセス🔑 環境変数⚡ スクリプトを含む

AIチャットUIコンポーネントを構築

チームには、AI Elementsのパターンに一致する一貫したAIチャットインターフェースが必要です。このスキルは、React、shadcn/ui、Vercel AI SDKの規約に沿ったコンポーネント作成をガイドします。

対応: Claude Codex Code(CC)
Maintain this Skill? Claim it ⚠️ 38 不十分

自分のエージェントでインストール

このリクエストをエージェントにコピーしてください。正規の 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 エージェント、クローラー、スクリプトがページ全体ではなく整理されたコンテキストを必要とする場合は、これらのリンクを使ってください。

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チャットアプリでモデル選択を表示するコンポーネントを作成してください。

期待される結果:

AI Elementsの規約に沿った、簡潔な実装計画、Reactコンポーネント構造、使用上のメモ。

「ai-elements」を使用しています。 新しいプロンプト入力バリアントのドキュメントを追加してください。

期待される結果:

props、使用ガイダンス、制限事項、安全なデモコンテンツを含むリファレンスページのアウトライン。

「ai-elements」を使用しています。 この生成されたAIコンポーネントの一貫性をレビューしてください。

期待される結果:

  • 命名と合成に関するメモ。
  • アクセシビリティとスタイリングに関する提案。
  • 安全でない例や漏洩したシークレットに関する警告。

セキュリティ監査

重大
v4 • 2026/7/7 バージョン別レポートを開く

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
解析済み行数
11
レビュー項目
0
誤検知を無視

確認済みのセキュリティ上の懸念 (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 スコア

このスコアの理由 証拠の信頼度: 中
68
アーキテクチャ
85
保守性
87
コンテンツ
79
コミュニティ
83
仕様準拠

作成できるもの

チャットメッセージコンポーネントを追加

AI Elementsの合成とスタイリング規約に従う再利用可能なAIメッセージコンポーネントを作成します。

AIツールパネルをプロトタイプ化

AIワークフローのプロトタイプ向けに、ツールのステータス、タスク、または確認パネルを構築します。

コンポーネントの使用方法を文書化

共有コンポーネントライブラリ内のAIネイティブUIコンポーネント向けに、例と参考メモを作成します。

これらのプロンプトを試す

基本コンポーネントを作成 
短いアシスタントステータスメッセージを表示するための新しいAI Elementsコンポーネントを作成してください。既存のコンポーネント命名および合成パターンに従ってください。
サンプルスクリプトを追加 
新しいコンポーネントの使用例をscriptsディレクトリに追加してください。データは静的に保ち、実際のシークレットや安全でないネットワーク呼び出しは避けてください。
コンポーネントAPIをレビュー 
このAI ElementsコンポーネントAPIが、shadcn/ui、Tailwind classes、Vercel AI SDKの使用パターンと一貫しているかレビューしてください。
高度なインタラクションを構築 
pending、accepted、rejected、errorの状態を持つ、合成可能なAIツール承認フローを設計してください。アクセシブルなラベルと安全なサンプルデータを含めてください。

ベストプラクティス

  • 実際の認証情報と誤認されない静的なデモデータとプレースホルダーを使用します。
  • 外部API呼び出しはサーバー側に置き、機密性の高いプロバイダートークンをプロキシします。
  • 新しい抽象化を追加する前に、既存のAI Elementsコンポーネント構造に合わせます。

回避

  • プロバイダーのAPIキーをNEXT_PUBLIC環境変数に配置しないでください。
  • 厳格なサンドボックス化なしに、evalベースのコード実行例を含めないでください。
  • デモを現実的に見せるためだけに、ネットワーク呼び出しやファイルシステム操作を追加しないでください。

よくある質問

このスキルは何の構築を支援しますか？
チャット、ツール、メッセージ、入力、引用、および関連するAIインターフェースパターン向けのAI Elements Reactコンポーネント構築を支援します。
どのツールでこのスキルを使用できますか？
レポートにはClaude、Codex、Claude Codeのサポートが記載されています。
AI Elementsを自動的にインストールしますか？
いいえ。ガイダンスと参考例を提供します。ユーザーは関連するpackageまたはshadcn/uiコマンドを自分で実行します。
このスキルは本番環境で安全に使用できますか？
注意して使用してください。監査で、マーケットプレイス公開前に修正すべき安全でないサンプルパターンが見つかりました。
バックエンドルートを作成できますか？
例の作成はガイドできますが、バックエンドルートには認証、サンドボックス化、シークレット処理に関する別個のセキュリティレビューが必要です。
どのようなプロジェクト設定が想定されていますか？
React、TypeScript、Tailwind CSS、shadcn/ui、Vercel AI SDKの規約を前提としています。

開発者情報

作成者

vercel

ライセンス

MIT

Skillstore リビジョン

r1

バージョンに関する注意

作者はバージョンを宣言していません。

リポジトリ

https://github.com/vercel/ai-elements/tree/main/skills/ai-elements/

参照

36e07d5e13068e5be64447e8f20b427cf2cbd21a

メンテナンスの新しさ

2026/7/18

利用状況

35 ダウンロード · 808 閲覧

ファイル構成

📁 references/

📄 agent.md

📄 artifact.md

📄 attachments.md

📄 audio-player.md

📄 canvas.md

📄 chain-of-thought.md

📄 checkpoint.md

📄 code-block.md

📄 commit.md

📄 confirmation.md

📄 connection.md

📄 context.md

📄 controls.md

📄 conversation.md

📄 edge.md

📄 environment-variables.md

📄 file-tree.md

📄 image.md

📄 inline-citation.md

📄 jsx-preview.md

📄 message.md

📄 mic-selector.md

📄 model-selector.md

📄 node.md

📄 open-in-chat.md

📄 package-info.md

📄 panel.md

📄 persona.md

📄 plan.md

📄 prompt-input.md

📄 queue.md

📄 reasoning.md

📄 sandbox.md

📄 schema-display.md

📄 shimmer.md

📄 snippet.md

📄 sources.md

📄 speech-input.md

📄 stack-trace.md

📄 suggestion.md

📄 task.md

📄 terminal.md

📄 test-results.md

📄 tool.md

📄 toolbar.md

📄 transcription.md

📄 voice-selector.md

📄 web-preview.md

📁 scripts/

📄 agent.tsx

📄 artifact.tsx

📄 attachments-inline.tsx

📄 attachments-list.tsx

📄 attachments.tsx

📄 audio-player-remote.tsx

📄 audio-player.tsx

📄 chain-of-thought.tsx

📄 checkpoint.tsx

📄 code-block-dark.tsx

📄 code-block.tsx

📄 commit.tsx

📄 confirmation-accepted.tsx

📄 confirmation-rejected.tsx

📄 confirmation-request.tsx

📄 confirmation.tsx

📄 context.tsx

📄 conversation.tsx

📄 environment-variables.tsx

📄 file-tree-basic.tsx

📄 file-tree-expanded.tsx

📄 file-tree-selection.tsx

📄 file-tree.tsx

📄 image.tsx

📄 inline-citation.tsx

📄 jsx-preview.tsx

📄 message.tsx

📄 mic-selector.tsx

📄 model-selector.tsx

📄 open-in-chat.tsx

📄 package-info.tsx

📄 persona-command.tsx

📄 persona-glint.tsx

📄 persona-halo.tsx

📄 persona-mana.tsx

📄 persona-obsidian.tsx

📄 persona-opal.tsx

📄 plan.tsx

📄 prompt-input-cursor.tsx

📄 prompt-input-tooltip.tsx

📄 prompt-input.tsx

📄 queue-prompt-input.tsx

📄 queue.tsx

📄 reasoning.tsx

📄 sandbox.tsx

📄 schema-display-basic.tsx

📄 schema-display-body.tsx

📄 schema-display-nested.tsx

📄 schema-display-params.tsx

📄 schema-display.tsx

📄 shimmer-duration.tsx

📄 shimmer-elements.tsx

📄 shimmer.tsx

📄 snippet-plain.tsx

📄 snippet.tsx

📄 sources-custom.tsx

📄 sources.tsx

📄 speech-input.tsx

📄 stack-trace-collapsed.tsx

📄 stack-trace-no-internal.tsx

📄 stack-trace.tsx

📄 suggestion-input.tsx

📄 suggestion.tsx

📄 task.tsx

📄 terminal-basic.tsx

📄 terminal-clear.tsx

📄 terminal-streaming.tsx

📄 terminal.tsx

📄 test-results-basic.tsx

📄 test-results-errors.tsx

📄 test-results-suites.tsx

📄 test-results.tsx

📄 tool-input-available.tsx

📄 tool-input-streaming.tsx

📄 tool-output-available.tsx

📄 tool-output-error.tsx

📄 tool.tsx

📄 transcription.tsx

📄 voice-selector.tsx

📄 web-preview.tsx

📄 SKILL.md

vercel のその他のスキル

すべて表示

関連スキル

すべて表示