Ai Sdk Ui
v0.1.0Build React chat interfaces with Vercel AI SDK v6. Covers useChat/useCompletion/useObject hooks, message parts structure, tool approval workflows, and 18 UI error solutions. Prevents documented issues with React Strict Mode, concurrent requests, stale closures, and tool approval edge cases. Use when: implementing AI chat UIs, migrating v5→v6, troubleshooting "useChat failed to parse stream", "stale body values", "React maximum update depth", "Cannot read properties of undefined (reading 'state')", or tool approval workflow errors.
⭐ 1· 1.5k·1 current·1 all-time
byVeera@veeramanikandanr48
MIT-0
Download zip
LicenseMIT-0 · Free to use, modify, and redistribute. No attribution required.
Security Scan
OpenClaw
Suspicious
medium confidencePurpose & Capability
The name/description and the included templates (use-chat, use-completion, custom renderers, Next.js router examples) are coherent with a frontend UI skill. However: (1) the README and templates include server-side API route examples (app/api/chat/route.ts, pages/api/chat.ts) that require backend API keys and server usage — yet the skill metadata declares no required environment variables; (2) some template files import from older package names ('ai/react', types from 'ai') while other docs/reference mention '@ai-sdk/react' and v6 — version/import inconsistencies suggest the bundle mixes code for different SDK versions. Both are disproportionate to a pure frontend UI helper and should be clarified.
Instruction Scope
SKILL.md and reference docs focus on UI hooks and include many concrete code examples. They also include server-side patterns showing use of process.env (OPENAI_API_KEY, ANTHROPIC_API_KEY, etc.), streaming helpers, and example API route code using openai() — these are concrete actions that require server secrets and backend hosting. The instructions don't explicitly instruct the agent to read or exfiltrate arbitrary local files, but they do show patterns that will use environment secrets on the server if you deploy the templates. Additionally, example error-logging snippets suggest sending logs to monitoring services (Sentry/Datadog) — normal for apps but worth noting for privacy.
Install Mechanism
There is no install spec (instruction-only skill). No remote downloads or extract operations; templates instruct local npm installs for normal dependencies (react-markdown, syntax highlighter, ai, @ai-sdk/*). This is low risk from an install mechanism standpoint, but you will run npm installs locally which should be reviewed as usual.
Credentials
Metadata declares no required environment variables, but multiple reference files and templates (references/nextjs-integration.md, README.md, templates/nextjs-api-route.ts) instruct adding OPENAI_API_KEY, ANTHROPIC_API_KEY, GOOGLE_GENERATIVE_AI_API_KEY, etc. Server API route examples call openai() and assume these keys exist. Not declaring these required secrets in the skill metadata is an inconsistency that could mislead users into deploying templates without realizing they must provide sensitive keys. Also the skill includes examples showing logging/error-reporting which could transmit user context to monitoring services if used.
Persistence & Privilege
The skill is not marked always:true and does not request to modify other skills or system-wide settings. It includes templates that use localStorage, navigator.clipboard and file export/import for chat history — these are normal UI behaviors and limited to the user's browser context. No persistent autonomous privilege is requested.
What to consider before installing
This package appears to be a collection of UI templates and documentation for building React chat UIs with Vercel AI SDK, but there are a few mismatches you should check before using it: 1) Environment secrets: several server-side templates expect OPENAI_API_KEY, ANTHROPIC_API_KEY, etc., yet the skill metadata lists none — do not deploy server templates without adding and securing the required keys. 2) Version/import consistency: some templates import from 'ai' or 'ai/react' while other docs reference '@ai-sdk/react' and v6 — search the files and replace/normalize imports for the SDK version you plan to use. 3) Review server API route code: the provided API examples call provider functions and will run on your server (and use your keys); audit these before deploying. 4) Dependency installs: the templates ask you to npm install several packages — review package.json and installed packages for correctness. 5) Privacy/logging: examples suggest sending error logs to monitoring services; ensure you’re not leaking sensitive user data there. If you want, I can: (a) list all files that reference process.env or OPENAI/ANTHROPIC keys, (b) scan the repo for imports from 'ai' vs '@ai-sdk/*', or (c) suggest minimal edits to align templates with a single SDK version.Like a lobster shell, security has layers — review code before you run it.
latestvk97cf2dgf78q5zp4mm0138fdgn8090tt
License
MIT-0
Free to use, modify, and redistribute. No attribution required.