agent-studio-chat

ShouxinZhang's avatarfrom ShouxinZhang

Work on Agent Studio chat (UI + streaming) and the /api/chat route. Use for tasks like message rendering, reasoning display, editing/regenerate, Zustand chat stores, model/settings UI, and OpenRouter or Vercel AI SDK integration. 聊天功能开发/排障：流式输出、Reasoning 展示、消息编辑与重新生成、模型与参数设置。

⭐0stars🔀0forks📁View on GitHub🕐Updated Jan 5, 2026
[Code Generation]

When & Why to Use This Skill

This Claude skill is designed to accelerate the development and debugging of sophisticated AI chat interfaces. It provides expert-level guidance on implementing real-time streaming, reasoning displays, and complex state management using the Vercel AI SDK and Zustand. By focusing on both the frontend UI components and the backend /api/chat routes, it helps developers build robust, feature-rich agentic chat applications with seamless OpenRouter integrations.

Use Cases

  • Implementing real-time streaming and reasoning metadata displays to improve the transparency of AI thought processes in the UI.
  • Developing advanced chat features such as message editing, regeneration, and persistent conversation history using Zustand stores.
  • Architecting and debugging Next.js API routes for LLM integration, specifically handling provider-specific metadata and stream formatting.
  • Building comprehensive model settings panels that allow users to adjust sampling parameters, system instructions, and provider configurations.
nameagent-studio-chat
descriptionWork on Agent Studio chat (UI + streaming) and the /api/chat route. Use for tasks like message rendering, reasoning display, editing/regenerate, Zustand chat stores, model/settings UI, and OpenRouter or Vercel AI SDK integration. 聊天功能开发/排障：流式输出、Reasoning 展示、消息编辑与重新生成、模型与参数设置。

Agent Studio Chat

Follow the data flow

  • Start from src/components/features/chat/hooks/useChatLogic.ts (Vercel AI SDK useChat + DefaultChatTransport).
  • Server route is src/app/api/chat/route.ts (OpenRouter provider + streamText).
  • UI entry is src/components/features/chat/ChatInterface.tsx (Virtuoso list + ChatInput).

Know the state layers

  • Conversation persistence: src/lib/store/useChatStore.ts
  • UI-only transient state (editing/copy): src/lib/store/useChatUIStore.ts
  • Model + sampling + system instructions: src/lib/store/useSettingsStore.ts and src/components/features/settings/SettingsPanel.tsx

Make safe changes

  • Preserve UIMessage.parts when needed (reasoning parts may carry provider metadata; see src/app/api/chat/route.ts).
  • Prefer adding new transient UI flags to useChatUIStore to avoid prop drilling.
  • Keep feature code under src/components/features/chat/ and reuse src/components/ui/* primitives.