Cameron Kelliher

AI Temperature Slider

AI chats

About

A temperature slider with labeled presets for tuning AI model output, ranging from precise to creative.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds AI Temperature Slider to your project and fits it to your theme.

Code

How AI Temperature Slider is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { AiTemperatureSlider } from "@/components/ui/temperature-slider";

export default function Demo() {
  return (
    <div className="mx-auto w-full max-w-sm p-6">
      <AiTemperatureSlider />
    </div>
  );
}

More by Cameron Kelliher

View all
  • AI Chain of Thought

    AI Chain of Thought

    111
  • Helix Loader

    Helix Loader

    94
  • AI Streaming Text

    AI Streaming Text

    50
  • AI Tool Call

    AI Tool Call

    45
  • Signal Bars Loader

    Signal Bars Loader

    41
  • Glitch Text Loader

    Glitch Text Loader

    41
  • AI Prompt Diff

    AI Prompt Diff

    39
  • AI Routing Indicator

    AI Routing Indicator

    34

More in AI chats

View all
  • AI Actions

    AI Actions

    319
  • Color Picker

    Color Picker

    82
  • Agent Chat

    Agent Chat

    17
  • Prompt with Model Picker

    Prompt with Model Picker

    2
  • Message Thread

    Message Thread

    36
  • System Message

    System Message

    54
  • Suggestions

    Suggestions

    28
  • Modal Card

    Modal Card

    101