Skip to content
Back to skills

Ai App

ASecurity

Builds full-stack Next.js AI applications with the AI SDK and ai-elements. Use when creating a chatbot, agent dashboard or custom AI application.

  • 67 stars
  • 0 votes
  • 0 copies
  • 1 view
  • Added September 9, 2026
ai-agentsjavascriptjavareactnextjsnodefrontend

Works with

  • cli

Security analysis

A100/100

Pro scans all 5 files and shows the line behind each finding

Scanned October 5, 2026

npx -y skills add laguagu/claude-code-nextjs-skills --skill ai-app --agent claude-code

Installs into .claude/skills of the current project.

Are you the author of Ai App?

Add the live security badge to your README. It updates with every re-scan.

Security grade badge for Ai App
[![Security: A — Skills Directory](https://www.skillsdirectory.com/api/skills/laguagu-ai-app/badge)](https://www.skillsdirectory.com/skills/laguagu-ai-app)

More formats (shields.io, HTML) on the badges page. Keep it an A: scan every change in CI with Pro.

Download with Pro
SKILL.md
---
name: ai-app
description: >-
  Builds full-stack Next.js AI applications with the AI SDK and ai-elements.
  Use when creating a chatbot, agent dashboard or custom AI application.
---

# AI application setup

Build the requested app around its users, data and operations. Keep the existing
stack and SDK major unless migration is part of the task; use Bun for new
JavaScript projects.

1. Resolve the installed AI SDK major through `ai-sdk`; use `ai-sdk-6` or
   `ai-sdk-7` for implementation. For a new app, default to **AI SDK 7**: `ai@7`,
   `@ai-sdk/react@4` and each provider package at `latest` (provider majors
   differ; Node.js 22+). Keep v6 only when a required dependency pins it. AI
   Elements still targets v6, and its `context.tsx` fails a v7 typecheck until
   patched (see `ai-elements`). Read version-matched `ai/docs/` and provider
   docs before using web examples.
2. Use `nextjs-shadcn` for framework setup and `frontend-design` for visual
   direction. Use `ai-elements` when its components fit the required chat UI;
   inspect installed source instead of assuming registry props.
3. Keep provider credentials and authorization on the server. Resolve model IDs
   from configuration or the selected provider's catalog.
4. Implement the smallest complete user flow. Add persistence, approvals,
   attachments, search, suggestions or dashboards when the app needs them.
5. Match the server stream to the client transport. Verify a second turn,
   relevant tool states, safe failures and mobile behavior, alongside the
   project's typecheck/build.

## Read for the app being built

- [Chatbot](references/chatbot.md): conversation and stream contracts.
- [Agent dashboard](references/agent-dashboard.md): execution, approval and run state.
- [Examples](references/examples.md): current official implementations.
- [Project structure](references/project-structure.md): boundaries without a fixed tree.
- `nextjs-chatbot`: durable history, feedback, embedding and production checks.

These references describe requirements, not copyable production templates.

Files in this skill

  • SKILL.md8.5 KB
  • references/agent-dashboard.md13.6 KB
  • references/chatbot.md16 KB
  • references/examples.md19 KB
  • references/project-structure.md6.9 KB

Attribution

Is this your skill, or is something wrong with this listing? Request removal or report an issue. Author removals are honored within 72 hours.

Comments

Loading comments…

Newsletter

Get the weekly list of safe new skills, and the ones we pulled.