@restnfeel/agentc-starter-kit

# Quick Start Guide Get up and running with Agent C Starter Kit in minutes. ## Installation ```bash npm install agentc-starter-kit # or yarn add agentc-starter-kit # or pnpm add agentc-starter-kit ``` ## Peer Dependencies Install the required peer dependencies: ```bash npm install next@^14.0.0 tailwindcss@^3.0.0 @supabase/supabase-js@^2.0.0 next-auth@^4.0.0 ``` ## 1. Set Up Tailwind CSS If you haven't already, set up Tailwind CSS in your project: ```bash npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p ``` Update your `tailwind.config.js`: ```js /** @type {import('tailwindcss').Config} */ module.exports = { content: [ "./pages/**/*.{js,ts,jsx,tsx,mdx}", "./components/**/*.{js,ts,jsx,tsx,mdx}", "./app/**/*.{js,ts,jsx,tsx,mdx}", "./node_modules/agentc-starter-kit/dist/**/*.{js,mjs}", ], theme: { extend: { colors: { primary: { 50: "#eff6ff", 100: "#dbeafe", 200: "#bfdbfe", 300: "#93c5fd", 400: "#60a5fa", 500: "#3b82f6", 600: "#2563eb", 700: "#1d4ed8", 800: "#1e40af", 900: "#1e3a8a", }, }, }, }, plugins: [], darkMode: "class", }; ``` Add the Tailwind directives to your CSS file: ```css @tailwind base; @tailwind components; @tailwind utilities; ``` ## 2. Environment Setup Create a `.env.local` file in your project root: ```env # Supabase Configuration NEXT_PUBLIC_SUPABASE_URL=your_supabase_url_here NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key_here SUPABASE_SERVICE_ROLE_KEY=your_supabase_service_role_key_here # NextAuth Configuration NEXTAUTH_URL=http://localhost:3000 NEXTAUTH_SECRET=your_nextauth_secret_here # OAuth Providers (optional) GOOGLE_CLIENT_ID=your_google_client_id_here GOOGLE_CLIENT_SECRET=your_google_client_secret_here KAKAO_CLIENT_ID=your_kakao_client_id_here KAKAO_CLIENT_SECRET=your_kakao_client_secret_here NAVER_CLIENT_ID=your_naver_client_id_here NAVER_CLIENT_SECRET=your_naver_client_secret_here ``` ## 3. Basic Usage ### Simple Landing Page ```tsx // app/page.tsx import { HeroSection, FeaturesSection, PricingSection, CTASection, } from "agentc-starter-kit"; export default function HomePage() { const features = [ { title: "Fast Setup", description: "Get your app running in minutes", icon: "⚡", }, { title: "Modern Stack", description: "Built with Next.js 14 and TypeScript", icon: "🚀", }, { title: "Production Ready", description: "Optimized for performance and SEO", icon: "✨", }, ]; const plans = [ { name: "Starter", price: "$9", period: "month", features: ["5 Projects", "Basic Support"], highlighted: false, }, { name: "Pro", price: "$29", period: "month", features: ["Unlimited Projects", "Priority Support", "Advanced Features"], highlighted: true, }, ]; return ( <div> <HeroSection title="Build Amazing Apps Fast" subtitle="The complete starter kit for your Next.js applications" ctaText="Get Started" onCtaClick={() => console.log("Get started clicked")} /> <FeaturesSection title="Why Choose Our Kit" features={features} /> <PricingSection title="Simple Pricing" plans={plans} onSelectPlan={(planId) => console.log("Selected plan:", planId)} /> <CTASection title="Ready to Get Started?" subtitle="Join thousands of developers building with our kit" primaryButton={{ text: "Start Building", onClick: () => console.log("Start building"), }} secondaryButton={{ text: "View Documentation", onClick: () => console.log("View docs"), }} /> </div> ); } ``` ### With Authentication ```tsx // app/layout.tsx import { AuthProvider } from "agentc-starter-kit"; export default function RootLayout({ children, }: { children: React.ReactNode; }) { return ( <html lang="en"> <body> <AuthProvider>{children}</AuthProvider> </body> </html> ); } // app/dashboard/page.tsx import { DashboardLayout, StatsCard, DataTable, UserProfile, } from "agentc-starter-kit"; import { useAuth } from "agentc-starter-kit"; export default function DashboardPage() { const { user } = useAuth(); const users = [ { id: 1, name: "John Doe", email: "john@example.com", status: "Active" }, { id: 2, name: "Jane Smith", email: "jane@example.com", status: "Inactive", }, ]; const columns = [ { key: "name", label: "Name", sortable: true }, { key: "email", label: "Email", sortable: true }, { key: "status", label: "Status" }, ]; return ( <DashboardLayout> <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8"> <StatsCard title="Total Users" value="1,234" trend={{ value: 12, isPositive: true }} variant="success" /> <StatsCard title="Revenue" value="$45,678" trend={{ value: 8, isPositive: true }} variant="default" /> <StatsCard title="Conversion" value="3.2%" trend={{ value: 2, isPositive: false }} variant="warning" /> </div> <div className="grid grid-cols-1 lg:grid-cols-2 gap-8"> <DataTable data={users} columns={columns} searchable /> {user && ( <UserProfile user={user} editable onSave={(updatedUser) => console.log("User updated:", updatedUser)} /> )} </div> </DashboardLayout> ); } ``` ### Legal Compliance ```tsx // app/privacy/page.tsx import { PrivacyPolicy } from "agentc-starter-kit"; export default function PrivacyPage() { return ( <PrivacyPolicy companyName="Your Company Name" contactEmail="privacy@yourcompany.com" showTableOfContents enablePrint /> ); } // app/layout.tsx - Add consent manager import { ConsentManager } from "agentc-starter-kit"; export default function RootLayout({ children }) { return ( <html> <body> {children} <ConsentManager privacyPolicyUrl="/privacy" termsUrl="/terms" onConsentUpdate={(consents) => { console.log("Consent updated:", consents); // Handle consent changes }} /> </body> </html> ); } ``` ## 4. Customization ### Custom Theme Create a custom theme by extending Tailwind: ```js // tailwind.config.js module.exports = { theme: { extend: { colors: { primary: { // Your brand colors 500: "#your-brand-color", 600: "#your-brand-color-dark", }, }, fontFamily: { sans: ["Your-Font", "system-ui", "sans-serif"], }, }, }, }; ``` ### Component Variants Most components accept a `variant` prop for different styles: ```tsx import { Button, Card, StatsCard } from "agentc-starter-kit"; // Button variants <Button variant="primary">Primary</Button> <Button variant="secondary">Secondary</Button> <Button variant="outline">Outline</Button> // Card variants <Card variant="elevated">Elevated Card</Card> // Stats card variants <StatsCard variant="success" /> <StatsCard variant="warning" /> <StatsCard variant="danger" /> ``` ## 5. Next Steps - 📖 Read the [full component documentation](./components.md) - 🎨 Check out the [examples](../examples/) - 🔧 Learn about [customization options](./customization.md) - 🚀 Deploy your app with [deployment guides](./deployment.md) ## Common Issues ### Bundle Size To keep your bundle size minimal, import only what you need: ```tsx // ✅ Good import { Button, Card } from "agentc-starter-kit"; // ❌ Avoid import * as Components from "agentc-starter-kit"; ``` ### TypeScript Errors Make sure you have the correct TypeScript configuration: ```json // tsconfig.json { "compilerOptions": { "moduleResolution": "node", "esModuleInterop": true, "allowSyntheticDefaultImports": true } } ``` ### Styling Issues Ensure Tailwind is properly configured to include the component library: ```js // tailwind.config.js - Make sure this path is included content: ["./node_modules/agentc-starter-kit/dist/**/*.{js,mjs}"]; ``` ## Support - 📧 Email: support@agentc.dev - 💬 Discord: [Join our community](https://discord.gg/agentc) - 🐛 Issues: [GitHub Issues](https://github.com/agentc/starter-kit/issues)