Installation
Install the block using the shadcn CLI:npx shadcn@latest add @blocks/ai-02
@tabler/icons-react- shadcn/ui components:
button, select, textarea
Install dependencies
npm install @tabler/icons-react
Add shadcn/ui components
npx shadcn@latest add button select textarea
Usage
import Ai02 from "@/components/ai-02";
export default function Page() {
return <Ai02 />;
}
Features
This AI chat component offers model selection and quick prompt suggestions:
Model Selection
Multi-Model Support - Choose from different AI models including GPT-5, GPT-4o, GPT-4, and Claude 3.5 Sonnet, each optimized for different use cases.
const MODELS = [
{
value: "gpt-5",
name: "GPT-5",
description: "Most advanced model",
max: true,
},
{
value: "gpt-4o",
name: "GPT-4o",
description: "Fast and capable",
},
{
value: "gpt-4",
name: "GPT-4",
description: "Reliable and accurate",
},
{
value: "claude-3.5",
name: "Claude 3.5 Sonnet",
description: "Great for coding tasks",
},
];
Quick Prompts
Pre-configured prompt buttons for common tasks:
- Write Documentation - Generate comprehensive documentation with setup instructions and API references
- Optimize Performance - Analyze code for bottlenecks and suggest improvements
- Find and Fix Bugs - Scan codebase to identify and fix critical issues
Special Badge System
The “MAX” badge indicates premium or advanced models:
const renderMaxBadge = () => (
<div className="flex h-[14px] items-center gap-1.5 rounded border border-border px-1 py-0">
<span
className="text-[9px] font-bold uppercase"
style={{
background: "linear-gradient(to right, rgb(129, 161, 193), rgb(125, 124, 155))",
WebkitBackgroundClip: "text",
WebkitTextFillColor: "transparent",
}}
>
MAX
</span>
</div>
);
Component Props
This component doesn’t accept external props. All state is managed internally:
inputValue - Current input textselectedModel - Currently selected AI modelinputRef - Reference to the textarea element
Customization
Adding Custom Models
Extend the MODELS array with your own model configurations:
const MODELS = [
// ... existing models
{
value: "custom-model",
name: "Custom Model",
description: "Your custom description",
max: false, // Set to true for premium badge
},
];
Adding Custom Prompts
Add new quick prompt buttons:
const PROMPTS = [
// ... existing prompts
{
icon: IconCustom,
text: "Your action",
prompt: "Your detailed prompt text here",
},
];
<div className="flex flex-col gap-4 w-[calc(42rem-5rem)]">
{/* Adjust width by changing the calculation */}
</div>
Implementation Details
Prompt Click Handler
When a user clicks a quick prompt button, the text is automatically populated:
const handlePromptClick = (prompt: string) => {
if (inputRef.current) {
inputRef.current.value = prompt;
setInputValue(prompt);
inputRef.current.focus();
}
};
Model Change Handler
const handleModelChange = (value: string) => {
const model = MODELS.find((m) => m.value === value);
if (model) {
setSelectedModel(model);
}
};
Image Attachment
The component includes an image attachment button that can be extended with file upload functionality.