ai-chat-application

AI Chat Application

Complete guide to building AI chat applications with Vercel AI SDK. Orchestrates streaming routes, useChat integration, tool architecture, message handling, and UX patterns for production AI chatbots and assistants.

What's Inside

• Architecture overview (client, API route, tool system, message handling, AI persona)
• Step-by-step implementation (API route, chat component, UX polish, tool system, message persistence, AI persona)
• Component skills reference table
• Quick start checklist

When to Use

• Building a new AI chatbot or assistant
• Adding AI chat features to an existing app
• Need end-to-end guidance on AI chat architecture

Installation

npx add https://github.com/wpank/ai/tree/main/skills/meta/ai-chat-application

OpenClaw / Moltbot / Clawbot

npx clawhub@latest install ai-chat-application

Manual Installation

Cursor (per-project)

From your project root:

mkdir -p .cursor/skills
cp -r ~/.ai-skills/skills/meta/ai-chat-application .cursor/skills/ai-chat-application

Cursor (global)

mkdir -p ~/.cursor/skills
cp -r ~/.ai-skills/skills/meta/ai-chat-application ~/.cursor/skills/ai-chat-application

Claude Code (per-project)

From your project root:

mkdir -p .claude/skills
cp -r ~/.ai-skills/skills/meta/ai-chat-application .claude/skills/ai-chat-application

Claude Code (global)

mkdir -p ~/.claude/skills
cp -r ~/.ai-skills/skills/meta/ai-chat-application ~/.claude/skills/ai-chat-application

Related Skills

• vercel-ai-chat-integration — useChat hook patterns
• vercel-ai-data-streaming — Custom data events
• vercel-ai-tool-architecture — Tool system design
• ai-streaming-routes — API route patterns
• ai-message-handling — Format conversion
• ai-tool-composition — Tool factories

---

Part of the Meta skill category.