skills.rest
aicodepro
aicodeproOFFICIAL
Explore all skills by this author →
GitHub

better-chatbot-patterns

Implements reusable Next.js chatbot patterns for server actions, tools, providers, and state.

Updated Jun 22, 2026
Search Tags:#next.js#server actions#zustand#multi-provider#vercel ai sdk#zod validation#chatbot patterns
One-click install
npx skills add https://github.com/aicodepro/ai-agent-nexi --skill better-chatbot-patterns-aicodepro
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: better-chatbot-patterns
Source: https://github.com/aicodepro/ai-agent-nexi/tree/main/agent/skills/better-chatbot-patterns
Command: npx skills add https://github.com/aicodepro/ai-agent-nexi --skill better-chatbot-patterns-aicodepro

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires zod, zustand, ai, @ai-sdk/openai, @ai-sdk/anthropic, @ai-sdk/google, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve? Building custom AI chatbots with Next.js and the Vercel AI SDK repeatedly hits the same pitfalls: inconsistent auth checks in server actions, runtime tool type mismatches, fragmented multi-provider configuration, Zustand state mutation bugs, and broken cross-field validation. This Skill provides portable, production-verified patterns extracted from the better-chatbot project that you can adapt to any codebase. ## Core Features & Use Cases - Server Action Validators: Three composable patterns (validatedAction, validatedActionWithUser, validatedActionWithPermission) that unify auth, Zod validation, and FormData parsing, adaptable to Better Auth, Clerk, or Auth.js. - Tool Abstraction System: Branded type tags enabling runtime type narrowing for MCP, workflow, and default tools with full TypeScript safety. - Multi-AI Provider Setup: A provider registry supporting OpenAI, Anthropic, Google, xAI, and Groq with fallback strategies, health checks, and cost-aware selection. - State & Validation Patterns: Shallow-update Zustand stores and Zod superRefine cross-field validation for passwords, date ranges, and conditional fields. - Use Case: When building a chatbot API route that must support user-selected models across OpenAI and Anthropic with a fallback chain, load the provider-integration reference and copy the registry pattern into your project. ## Quick Start Ask the AI to implement a validated server action with user authentication using the better-chatbot-patterns skill, adapted to your auth provider.

Frequently Asked Questions about better-chatbot-patterns

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I validate Next.js server actions with authentication?▼

Use the validatedActionWithUser pattern, which wraps your handler with automatic auth checking and Zod schema validation. Adapt the getUser() placeholder to your auth system such as Better Auth, Clerk, or Auth.js, and the pattern returns standardized success or error results.

How to support multiple AI providers with Vercel AI SDK?▼

Create a provider registry in lib/ai/providers.ts that initializes OpenAI, Anthropic, Google, xAI, and Groq with their API keys. xAI and Groq use OpenAI-compatible base URLs, and a getModel helper validates provider and model combinations at runtime.

How do I validate matching password fields with Zod?▼

Use Zod's superRefine method on the object schema to compare password and confirmPassword fields, adding a custom issue on the confirmPassword path when they differ. The same approach works for date ranges, conditional required fields, and business rules.

Can these patterns work with Clerk or Auth.js instead of Better Auth?▼

Yes, the patterns are auth-agnostic by design. The reference documentation includes adaptation guides showing exactly how to implement getUser() for Better Auth, Clerk, and Auth.js, plus role-based and database-driven permission check variants.

Why do Zustand state updates cause bugs in nested workflow state?▼

Direct mutation of nested state breaks React's change detection and causes stale renders. The shallow update pattern spreads each level of the object when updating, and Immer middleware is available as an alternative for deeply nested structures.

When should I not use branded type tags for tools?▼

Skip branded type tags when your system has a single tool type or all types are known at compile time, since plain TypeScript interfaces suffice. The pattern is designed for multi-type systems like MCP, workflow, and custom tools requiring runtime type narrowing.

Related Skills

Explore More Software Engineering Skills→
wibbydashboard-codewibbydashboard-code

agent-builder-vercel-sdk

Combine Vercel AI SDK with OpenRouter for streaming Next.js chat interfaces with tool calling and multi-provider support.

Community
Advanced
HainrixzHainrixz
48

all-deploy

Automate end-to-end deployment of web apps, APIs, and agents via CLI.

Community
Advanced
smol-aismol-ai
4

deprecated-public-qa-chatbot

Implements secure architecture for public-facing chatbot widgets with rate limiting and semantic caching.

Official
Advanced
TheViziusGroupTheViziusGroup
1

rag-architecture-business

Explains RAG architecture, vector databases, and chatbot build decisions for business stakeholders.

Official
Intermediate