Customization

The AI Feedback Assistant is a reference implementation showing how TheFrontKit components work together. Use it as a starting point and customize it for your product.

Adapting for Your Product

1. Update Branding

Change the design tokens in app/globals.css to match your brand:

:root {
  --primary: 220 90% 56%;
  --primary-foreground: 0 0% 100%;
}

Update the logo, favicon, and app name in app/layout.tsx.

2. Connect Your Backend

Replace placeholder handlers with real API calls:

Authentication:

// In authentication/login/page.tsx
const handleLogin = async (data) => {
    const response = await fetch("/api/auth/login", {
        method: "POST",
        body: JSON.stringify(data),
    });
    // Handle response...
};

AI Chat:

// Connect to your AI provider (OpenAI, Anthropic, etc.)
const handlePromptSubmit = async (prompt) => {
    const response = await fetch("/api/chat", {
        method: "POST",
        body: JSON.stringify({ prompt }),
    });
    // Stream response...
};

3. Customize the Home Dashboard

The /home page is a template — replace the demo data with your actual metrics:

• Swap placeholder charts with real analytics
• Update data table columns to match your data model
• Modify sidebar navigation links

4. Modify the Onboarding Flow

Adjust the onboarding steps to match your product's setup requirements:

• Change the number of steps
• Update form fields for user preferences
• Add your own welcome content

5. Configure Notifications

Wire the notification center to your real-time notification system (WebSocket, SSE, or polling).

Removing Demo Pages

If you're using this as a production starting point, remove the component explorer routes:

1. Delete app/composites/, app/primitives/, app/recipes/, app/templates/
2. Keep only the routes your application needs: /, /home, /authentication/*, /notifications, /onboarding
3. Run npm run build to verify no broken imports

Changing the Route Structure

The demo uses Next.js App Router. To reorganize routes:

• Move /authentication/login to /login by moving the directory
• Add route groups: app/(auth)/login/, app/(app)/home/
• Add middleware for auth protection: middleware.ts

// middleware.ts
export function middleware(request) {
    const isAuthenticated = /* check auth */;
    if (!isAuthenticated && !request.nextUrl.pathname.startsWith("/authentication")) {
        return NextResponse.redirect(new URL("/authentication/login", request.url));
    }
}

Design Token Customization

See the AI UX Kit Design Tokens guide for the full list of customizable tokens. The AI Feedback Assistant uses the same token system.