AI Suggestions Panel

A panel showing AI-generated suggestions with accept/reject/modify actions, confidence scores, and batch operations.

Preview

File	Path
ai-suggestions-panel.tsx	components/ai-assist/ai-suggestions-panel/ai-suggestions-panel.tsx
suggestion-card.tsx	components/ai-assist/ai-suggestions-panel/suggestion-card.tsx
suggestion-actions.tsx	components/ai-assist/ai-suggestions-panel/suggestion-actions.tsx
types.ts	components/ai-assist/ai-suggestions-panel/types.ts
index.ts	components/ai-assist/ai-suggestions-panel/index.ts

File	Path
design-tokens.ts	lib/design-tokens.ts

Install these dependencies before using the component:

Terminal

bash

npx shadcn@latest add button badge collapsible

Terminal

bash

npm install @phosphor-icons/react

The component consists of the following files:

ai-suggestions-panel.tsx

tsx

"use client";

import { useState } from "react";
import { Lightbulb } from "@phosphor-icons/react";
import { Button } from "@/components/ui/button";

suggestion-card.tsx

tsx

"use client";

import {
  Check,
  X,

suggestion-actions.tsx

tsx

"use client";

import { Check, X } from "@phosphor-icons/react";
import { Button } from "@/components/ui/button";

types.ts

tsx

export interface AISuggestion {
  id: string;
  title: string;
  description: string;
  category?: string;

index.ts

tsx

export { AISuggestionsPanel } from "./ai-suggestions-panel";
export type { AISuggestionsPanelProps, AISuggestion } from "./types";

This component uses shared utility functions. These are included in the bundle above:

tsx

// Border radius
export const radius = {
  card: "rounded-xl",
  badge: "rounded-full",
  button: "rounded-lg",

app/page.tsx

tsx

"use client";

import { AISuggestionsPanel, type AISuggestion } from "@/components/ai-assist";

const suggestions: AISuggestion[] = [