Stats
Actions
Tags
Help us improve
Share bugs, ideas, or general feedback.
Provides portable patterns for Next.js AI chatbots: server action validators for auth/FormData, tool abstraction with type checking, multi-AI providers, and workflow execution.
npx claudepluginhub secondsky/claude-skills --plugin better-chatbot-patternsHow this skill is triggered — by the user, by Claude, or both
Slash command
/better-chatbot-patterns:better-chatbot-patternsThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
**Status**: Production Ready
Enforces better-chatbot project standards for contributions, including three-tier tool system, repository patterns, server actions, and component designs.
Delivers provider-agnostic type-safe LLM chat SDK with streaming, tools, agent loops for OpenAI, Anthropic, Gemini, Ollama in React, Solid, Next.js apps.
Provides Vercel AI SDK v5 React hooks (useChat, useCompletion, useObject) for streaming AI chat UIs in Next.js apps. Fixes parse stream errors, no responses, and streaming issues.
Share bugs, ideas, or general feedback.
Status: Production Ready Last Updated: 2025-11-21 Dependencies: None Latest Versions: next@16.0.3, ai@5.0.98, zod@3.24.2, zustand@5.0.8
This skill extracts reusable patterns from the better-chatbot project for use in custom AI chatbot implementations. Unlike the better-chatbot skill (which teaches project conventions), this skill provides portable templates you can adapt to any project.
Patterns included:
For complete implementation: Load references/server-action-patterns.md when implementing server action validators, auth validation, or FormData parsing.
What it solves: Inconsistent auth checks, repeated FormData parsing boilerplate, non-standard error handling, and type safety issues in server actions.
Three validator patterns:
validatedAction - Simple validation (no auth)validatedActionWithUser - With user context (auth required)validatedActionWithPermission - With permission checks (role-based)Quick example:
// Server action with automatic auth + validation
export const updateProfile = validatedActionWithUser(
z.object({ name: z.string(), email: z.string().email() }),
async (data, formData, user) => {
// user is authenticated, data is validated
await db.update(users).set(data).where(eq(users.id, user.id))
return { success: true }
}
)
Adapt to your auth: Better Auth, Clerk, Auth.js, or custom auth system.
For complete implementation: Load references/tool-abstraction-patterns.md when building multi-type tool systems, MCP integration, or extensible tool architectures.
What it solves: Type mismatches at runtime, repeated type checking boilerplate, and difficulty adding new tool types (TypeScript can't enforce runtime types).
How it works: Branded type tags enable runtime type narrowing with full TypeScript safety.
Quick example:
// Runtime type checking with branded tags
async function executeTool(tool: unknown) {
if (VercelAIMcpToolTag.isMaybe(tool)) {
return await tool.execute() // TypeScript knows tool is MCPTool
} else if (VercelAIWorkflowToolTag.isMaybe(tool)) {
return await executeWorkflow(tool.nodes) // TypeScript knows tool is WorkflowTool
}
throw new Error("Unknown tool type")
}
// Create tagged tools
const mcpTool = VercelAIMcpToolTag.create({
type: "mcp",
name: "search",
execute: async () => { /* ... */ }
})
Extensible: Add new tool types without breaking existing code.
For complete implementation: Load references/provider-integration-patterns.md when setting up multi-AI provider support, configuring Vercel AI SDK, or implementing provider fallbacks.
What it solves: Different SDK initialization patterns, provider-specific configurations, and unified interface for switching providers at runtime.
Supported providers: OpenAI, Anthropic (Claude), Google (Gemini), xAI (Grok), Groq.
Quick example:
// Provider registry in lib/ai/providers.ts
export const providers = {
openai: createOpenAI({ apiKey: process.env.OPENAI_API_KEY }),
anthropic: createAnthropic({ apiKey: process.env.ANTHROPIC_API_KEY }),
google: createGoogleGenerativeAI({ apiKey: process.env.GOOGLE_API_KEY })
}
// API route with user provider selection
export async function POST(req: Request) {
const { messages, provider, model } = await req.json()
const selectedModel = getModel(provider, model)
return streamText({ model: selectedModel, messages }).toDataStreamResponse()
}
Features: Fallback strategies, health checks, cost-aware selection.
For complete implementation: Load references/state-validation-patterns.md when implementing Zustand stores, workflow state, or complex nested state management.
What it solves: Managing complex nested state without mutations, avoiding re-render issues, and preventing state update bugs.
Quick example:
// Zustand store with shallow update pattern
export const useWorkflowStore = create<WorkflowStore>((set) => ({
workflow: null,
// Shallow update - no deep mutation
updateNodeStatus: (nodeId, status) =>
set(state => ({
workflow: state.workflow ? {
...state.workflow,
nodes: state.workflow.nodes.map(node =>
node.id === nodeId ? { ...node, status } : node
)
} : null
}))
}))
Patterns included: Multi-store organization, Immer integration, persist middleware.
For complete implementation: Load references/state-validation-patterns.md when implementing cross-field validation, password confirmation, or date ranges.
What it solves: Validating related fields (password confirmation, date ranges, conditional requirements) with consistent error messages and business rules.
Quick example:
// Zod superRefine for cross-field validation
const passwordSchema = z.object({
password: z.string().min(8),
confirmPassword: z.string()
}).superRefine((data, ctx) => {
if (data.password !== data.confirmPassword) {
ctx.addIssue({
path: ["confirmPassword"],
code: z.ZodIssueCode.custom,
message: "Passwords must match"
})
}
})
Use cases: Password match, date ranges, conditional fields, business rules, array validation.
Load reference files when implementing specific chatbot patterns:
Load when:
Load when:
Load when:
Load when:
✅ Adapt patterns to your auth system (Better Auth, Clerk, Auth.js, etc.)
✅ Use branded type tags for runtime type checking
✅ Use shallow updates for nested Zustand state
✅ Use Zod superRefine for cross-field validation
✅ Type your tool abstractions properly
❌ Copy code without adapting to your auth/role system ❌ Assume tool type without runtime check ❌ Mutate Zustand state directly ❌ Use separate validators for related fields ❌ Skip type branding for extensible systems
This skill prevents 5 common issues:
Prevention: Use validatedActionWithUser pattern (adapt to your auth)
Prevention: Use branded type tags with .isMaybe() checks
Prevention: Use shallow Zustand update pattern
Prevention: Use Zod superRefine for related fields
Prevention: Use provider registry with unified interface
templates/action-utils.ts - Complete server action validatorstemplates/tool-tags.ts - Complete tool abstraction systemtemplates/providers.ts - Multi-AI provider setuptemplates/workflow-store.ts - Zustand workflow storeCopy to your project and adapt placeholders (getUser(), checkPermission(), etc.)
Required:
Optional (based on patterns used):
These patterns are extracted from better-chatbot:
Token Efficiency: ~65% savings | Errors Prevented: 5 | Production Verified: Yes