ai-app

Solid

Full-stack AI application generator with Next.js, AI SDK, and ai-elements. Use when creating chatbots, agent dashboards, or custom AI applications. Triggers: chatbot, chat app, agent dashboard, AI application, Next.js AI, useChat, streamText, ai-elements, build AI app, create chatbot

AI & Automation 37 stars 13 forks Updated 3 days ago MIT

Install

Quality Score: 86/100

Stars 20%

53

Recency 20%

100

Frontmatter 20%

70

Documentation 15%

100

Issue Health 10%

80

License 10%

100

Description 5%

100

Skill Content

# AI App Generator Build full-stack AI applications with Next.js, AI SDK, and ai-elements. ## Quick Start ### 1. Scaffold Project ```bash bunx --bun shadcn@latest create --preset "https://ui.shadcn.com/init?base=radix&style=nova&baseColor=neutral&theme=neutral&iconLibrary=lucide&font=geist-sans&menuAccent=subtle&menuColor=default&radius=default" --template next my-ai-app cd my-ai-app ``` ### 2. Install Dependencies ```bash bun add ai @ai-sdk/react @ai-sdk/anthropic zod bunx --bun ai-elements@latest ``` ### 3. Configure Environment ```bash # .env.local - Choose your provider ANTHROPIC_API_KEY=sk-ant-... # OPENAI_API_KEY=sk-... # GOOGLE_GENERATIVE_AI_API_KEY=... ``` ### 4. Generate Application Based on user requirements, generate: - **Chatbot**: See [references/chatbot.md](references/chatbot.md) - **Agent Dashboard**: See [references/agent-dashboard.md](references/agent-dashboard.md) - **Custom**: Combine patterns as needed ## Application Types ### Chatbot Simple conversational AI with streaming responses. | Feature | Implementation | |---------|----------------| | Chat UI | Conversation + Message + PromptInput | | API | streamText + toUIMessageStreamResponse | | Extras | Reasoning, Sources, File attachments | ### Agent Dashboard Multi-agent interface with tool visualization. | Feature | Implementation | |---------|----------------| | Agents | ToolLoopAgent with tools | | UI | Dashboard layout + Tool components | | API | createAgentUIStreamResponse | | Extras |...

Details

Author: laguagu
Repository: laguagu/claude-code-nextjs-skills
Created: 4 months ago
Last Updated: 3 days ago
Language: TypeScript
License: MIT

Integrates with

OpenAI · AI Anthropic · AI Vercel · Cloud Next.js · Frontend

Similar Skills

Semantically similar based on skill content — not just same category

AI & Automation Solid

ai-elements

Create new AI chat interface components for the ai-elements library following established composable patterns, shadcn/ui integration, and Vercel AI SDK conventions. Use when creating new components in packages/elements/src or when the user asks to add a new component to ai-elements.

37 Updated 3 days ago

AI & Automation Featured

chatgpt-app-builder

DEPRECATED: This skill has been replaced by `mcp-app-builder`. Check if `mcp-app-builder` is available in the skills folder. If not, install it: `npx skills install mcp-use/mcp-use --skill mcp-app-builder` Use `mcp-app-builder` instead of this skill. Build ChatGPT apps with interactive widgets using mcp-use and OpenAI Apps SDK. Use when creating ChatGPT apps, building MCP servers with widgets, defining React widgets, working with Apps SDK, or when user mentions ChatGPT widgets, mcp-use widgets, or Apps SDK development.

9,994 Updated today

AI & Automation Featured

agent-builder

Design and build AI agents for any domain. Use when users: (1) ask to "create an agent", "build an assistant", or "design an AI system" (2) want to understand agent architecture, agentic patterns, or autonomous AI (3) need help with capabilities, subagents, planning, or skill mechanisms (4) ask about Claude Code, Cursor, or similar agent internals (5) want to build agents for business, research, creative, or operational tasks Keywords: agent, assistant, autonomous, workflow, tool use, multi-step, orchestration

62,572 Updated today

Web & Frontend Solid

ai-tools

Provides guidance for integrating AI tools and components into the Family Tree App, including knowledge graphs, computer vision, and natural language processing. Invoke when working on AI-related features or when needing AI integration advice.

620 Updated today

AI & Automation Solid

agent-builder

Build AI agents using pai-agent-sdk with Pydantic AI. Covers agent creation via create_agent(), toolset configuration, session persistence with ResumableState, subagent hierarchies, and browser automation. Use when creating agent applications, configuring custom tools, managing multi-turn sessions, setting up hierarchical agents, or implementing HITL approval flows.

20 Updated today