{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "ai-instructions-demo",
  "type": "registry:component",
  "registryDependencies": [
    "ai-instructions"
  ],
  "files": [
    {
      "path": "registry/default/example/ai-instructions-demo.tsx",
      "content": "\"use client\"\n\nimport { useState } from \"react\"\n\nimport {\n  Instruction,\n  Instructions,\n  InstructionsContent,\n  InstructionsCreateDialog,\n  InstructionsCreateTrigger,\n  InstructionsEmpty,\n  InstructionsFooter,\n  InstructionsGroup,\n  InstructionsItem,\n  InstructionsList,\n  InstructionsSearch,\n  InstructionsTrigger,\n} from \"../ui/ai-instructions\"\n\nconst SAMPLE_INSTRUCTIONS: Instruction[] = [\n  {\n    id: \"concise\",\n    title: \"Be Concise\",\n    description: \"Keep responses short and to the point\",\n    content:\n      \"Provide brief, focused responses. Avoid unnecessary elaboration unless specifically requested. Get to the point quickly.\",\n  },\n  {\n    id: \"code-examples\",\n    title: \"Include Code Examples\",\n    description: \"Always include relevant code snippets\",\n    content:\n      \"When explaining technical concepts, always include working code examples that demonstrate the concept. Use appropriate syntax highlighting.\",\n  },\n  {\n    id: \"explain-reasoning\",\n    title: \"Explain Your Reasoning\",\n    description: \"Walk through your thought process step by step\",\n    content:\n      \"Before providing a solution, explain the reasoning behind your approach. Break down complex problems into smaller steps.\",\n  },\n  {\n    id: \"typescript\",\n    title: \"Prefer TypeScript\",\n    description: \"Use TypeScript over JavaScript when possible\",\n    content:\n      \"Write all code examples in TypeScript with proper type annotations. Include interfaces and type definitions.\",\n  },\n  {\n    id: \"accessibility\",\n    title: \"Consider Accessibility\",\n    description: \"Ensure solutions are accessible to all users\",\n    content:\n      \"Include ARIA attributes, semantic HTML, keyboard navigation support, and screen reader considerations in all UI-related code.\",\n  },\n]\n\nexport default function AiInstructionsDemo() {\n  const [activeInstructions, setActiveInstructions] = useState<string[]>([\n    \"concise\",\n  ])\n  const [instructions, setInstructions] =\n    useState<Instruction[]>(SAMPLE_INSTRUCTIONS)\n\n  return (\n    <div className=\"flex w-full max-w-md flex-col gap-4\">\n      <div className=\"bg-card rounded-lg border p-4\">\n        <p className=\"text-muted-foreground mb-3 text-sm\">\n          Configure AI behavior with custom instructions. Click the button below\n          to manage your active instructions.\n        </p>\n        <Instructions\n          instructions={instructions}\n          onInstructionsChange={setInstructions}\n          onValueChange={setActiveInstructions}\n          value={activeInstructions}\n        >\n          <InstructionsTrigger />\n          <InstructionsContent>\n            <InstructionsSearch />\n            <InstructionsList>\n              <InstructionsEmpty />\n              <InstructionsGroup heading=\"Available Instructions\">\n                {instructions.map((instruction) => (\n                  <InstructionsItem\n                    instruction={instruction}\n                    key={instruction.id}\n                  />\n                ))}\n              </InstructionsGroup>\n            </InstructionsList>\n            <InstructionsFooter>\n              <InstructionsCreateTrigger />\n            </InstructionsFooter>\n          </InstructionsContent>\n          <InstructionsCreateDialog />\n        </Instructions>\n      </div>\n      {activeInstructions.length > 0 && (\n        <div className=\"bg-muted/50 rounded-lg border p-3\">\n          <p className=\"mb-2 text-xs font-medium\">\n            Active ({activeInstructions.length}):\n          </p>\n          <div className=\"flex flex-wrap gap-1.5\">\n            {activeInstructions.map((id) => {\n              const instruction = instructions.find((i) => i.id === id)\n              return instruction ? (\n                <span\n                  className=\"bg-primary/10 text-primary rounded-md px-2 py-0.5 text-xs\"\n                  key={id}\n                >\n                  {instruction.title}\n                </span>\n              ) : null\n            })}\n          </div>\n        </div>\n      )}\n    </div>\n  )\n}\n",
      "type": "registry:component"
    }
  ]
}