ai-sdk-ui-v7

Name: ai-sdk-ui-v7
Author: blockmatic

github.com/blockmaticDevelopment1223 installsUpdated 5w ago

About ai-sdk-ui-v7

A skill for developers building chat interfaces with `@ai-sdk/react` and `useChat` on AI SDK v7. It covers client-side message handling and streaming UI patterns, while directing backend generation work to ai-sdk-core.

Key features

01Version-specific useChat guidance
02DefaultChatTransport configuration
03Local input and message rendering patterns
04Streaming UI response guidance
05Chat UI code templates

Use cases

01Building a React chat interface
02Connecting chat to a custom API endpoint
03Rendering messages with parts and status

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/blockmatic/basilic-skills --skill ai-sdk-ui-v7

After installing, type/ai-sdk-ui-v7in Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

templates/

nextjs-api-route.ts

nextjs-chat-app-router.tsx

use-chat-basic.tsx

Details

From the project README

Skill: ai-sdk-ui

Scope

Applies to: @ai-sdk/react useChat and DefaultChatTransport from ai
Does NOT cover: Backend generation (see ai-sdk-core)

Assumptions

SDK major is ai ^7; @ai-sdk/react is a separate package major. Folder follows ai
Never write useChat from memory. Grep node_modules/@ai-sdk/react/docs/ and node_modules/ai/docs/, else https://ai-sdk.dev/docs/ai-sdk-ui/chatbot
Chat HTTP may be Fastify; pass transport when the URL is not /api/chat

Principles

useChat from @ai-sdk/react; DefaultChatTransport from ai
Local input state; sendMessage({ text }); status not isLoading; render message.parts
Server: see ai-sdk-core. Handlers use createUIMessageStreamResponse + toUIMessageStream({ stream: result.stream }). Leave deprecated toUIMessageStreamResponse() only when the task is unrelated to streaming or the SDK

Constraints

MUST

DefaultChatTransport({ api }) when the endpoint is not /api/chat
Disable send while status !== 'ready'

AVOID

import { useChat } from 'ai/react'
toDataStreamResponse / pipeDataStreamToResponse
Pre-v5 handleInputChange / handleSubmit / useAssistant

Interactions

Uses ai-sdk-core
Complements fastify, next

Templates

Comments

Markdown supported

Details

Author: blockmatic
Repository: blockmatic/basilic-skills
Category: Development
Installs: 223
GitHub stars: 1

Report

More skills

All skills

remotion-render

github.com/inference-sh

1.6M

Render videos from React/Remotion component code via inference.sh. Pass TSX code, get MP4. Supports all Remotion APIs: useCurrentFrame, useVideoConfig, spring, interpolate, AbsoluteFill, Sequence. Configurable resolution, FPS, duration, codec. Use for: programmatic video generation, animated graphics, motion design, data-driven videos, React animations to video. Triggers: remotion, render video from code, tsx to video, react video, programmatic video, remotion render, code to video, animated video, motion graphics code, react animation video

improve-codebase-architecture

github.com/mattpocock

1.2M

Scan a codebase for architecture improvement opportunities, present them as a visual HTML report, then dive deep into whichever one you pick.

design-mobile-apps

github.com/designed-by-ai

1.2M

Design mobile app screens with Sleek, edit Sleek projects, and implement their designs in React Native or HTML

vercel-react-best-practices

github.com/vercel-labs

870.5k

React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.