ai-instructions-demo

1"use client"
2 
3import { useState } from "react"
4 
5import {
6  Instruction,
7  Instructions,
8  InstructionsContent,
9  InstructionsCreateDialog,
10  InstructionsCreateTrigger,
11  InstructionsEmpty,
12  InstructionsFooter,
13  InstructionsGroup,
14  InstructionsItem,
15  InstructionsList,
16  InstructionsSearch,
17  InstructionsTrigger,
18} from "../ui/ai-instructions"
19 
20const SAMPLE_INSTRUCTIONS: Instruction[] = [
21  {
22    id: "concise",
23    title: "Be Concise",
24    description: "Keep responses short and to the point",
25    content:
26      "Provide brief, focused responses. Avoid unnecessary elaboration unless specifically requested. Get to the point quickly.",
27  },
28  {
29    id: "code-examples",
30    title: "Include Code Examples",
31    description: "Always include relevant code snippets",
32    content:
33      "When explaining technical concepts, always include working code examples that demonstrate the concept. Use appropriate syntax highlighting.",
34  },
35  {
36    id: "explain-reasoning",
37    title: "Explain Your Reasoning",
38    description: "Walk through your thought process step by step",
39    content:
40      "Before providing a solution, explain the reasoning behind your approach. Break down complex problems into smaller steps.",
41  },
42  {
43    id: "typescript",
44    title: "Prefer TypeScript",
45    description: "Use TypeScript over JavaScript when possible",
46    content:
47      "Write all code examples in TypeScript with proper type annotations. Include interfaces and type definitions.",
48  },
49  {
50    id: "accessibility",
51    title: "Consider Accessibility",
52    description: "Ensure solutions are accessible to all users",
53    content:
54      "Include ARIA attributes, semantic HTML, keyboard navigation support, and screen reader considerations in all UI-related code.",
55  },
56]
57 
58export default function AiInstructionsDemo() {
59  const [activeInstructions, setActiveInstructions] = useState<string[]>([
60    "concise",
61  ])
62  const [instructions, setInstructions] =
63    useState<Instruction[]>(SAMPLE_INSTRUCTIONS)
64 
65  return (
66    <div className="flex w-full max-w-md flex-col gap-4">
67      <div className="rounded-lg border bg-card p-4">
68        <p className="mb-3 text-muted-foreground text-sm">
69          Configure AI behavior with custom instructions. Click the button below
70          to manage your active instructions.
71        </p>
72        <Instructions
73          instructions={instructions}
74          onInstructionsChange={setInstructions}
75          onValueChange={setActiveInstructions}
76// … truncated