Nextjs Frontend

Next.js Frontend Plugin

Next.js 15 App Router with AI SDK, Supabase, shadcn/ui integration for building modern AI-powered applications.

Overview

This plugin provides comprehensive Next.js frontend development capabilities with first-class support for:

• Next.js 15 App Router - Modern React framework with Server Components
• Vercel AI SDK - AI streaming and model integration
• Supabase - Database, authentication, and storage
• shadcn/ui - High-quality UI component library
• TypeScript - Type-safe development
• Tailwind CSS - Utility-first styling

Commands

/nextjs-frontend:init

Initialize a new Next.js 15 application with AI and Supabase integration.

Usage:

/nextjs-frontend:init my-app

Creates a complete Next.js project with:

• App Router structure
• TypeScript configuration
• Tailwind CSS setup
• shadcn/ui components
• AI SDK integration
• Supabase client setup

/nextjs-frontend:add-page

Add a new page to your Next.js application.

Usage:

/nextjs-frontend:add-page dashboard

/nextjs-frontend:add-component

Add a new component with shadcn/ui integration.

Usage:

/nextjs-frontend:add-component chat-interface

/nextjs-frontend:integrate-supabase

Integrate Supabase into an existing Next.js project.

Usage:

/nextjs-frontend:integrate-supabase

/nextjs-frontend:integrate-ai-sdk

Integrate Vercel AI SDK for AI streaming capabilities.

Usage:

/nextjs-frontend:integrate-ai-sdk

/nextjs-frontend:search-components

Search and add shadcn/ui components to your project.

Usage:

/nextjs-frontend:search-components button

MCP Servers Used

• supabase-mcp: Database operations, auth, storage
• shadcn-mcp: shadcn/ui components and design system
• tailwind-ui-mcp: Tailwind CSS design system from Supabase
• figma-mcp-application: Application UI components from Figma
• context7: Documentation for Next.js, React, and AI SDK

Features

• App Router Architecture - Modern Next.js 15 with Server Components
• AI Streaming - Real-time AI responses with Vercel AI SDK
• Type Safety - Full TypeScript support throughout
• Component Library - shadcn/ui integration with customization
• Database Integration - Supabase client with TypeScript types
• Authentication - Supabase Auth integration
• Deployment Ready - Optimized for Vercel deployment

Integration Points

• Supabase (database, auth, design system)
• Vercel AI SDK (streaming, models)
• Tailwind CSS (with shadcn/ui + design system components)
• shadcn/ui + Figma MCP servers for component integration
• MCP servers for tool integration

Development Workflow

1. Initialize Project: /nextjs-frontend:init my-app
2. Add Pages: /nextjs-frontend:add-page dashboard
3. Add Components: /nextjs-frontend:add-component chat
4. Integrate Services: /nextjs-frontend:integrate-supabase
5. Add AI Features: /nextjs-frontend:integrate-ai-sdk
6. Search Components: /nextjs-frontend:search-components card

Best Practices

• Use Server Components by default for better performance
• Add 'use client' only when needed (state, effects, events)
• Leverage shadcn/ui for consistent UI
• Use TypeScript for type safety
• Follow Next.js App Router conventions
• Implement proper error handling
• Optimize for Core Web Vitals

Documentation

See /docs folder for detailed documentation on:

• Architecture patterns
• Component structure
• API integration
• Deployment strategies
• Testing approaches

Version

1.0.0

License

MIT