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

    110
  • Helix Loader

    Helix Loader

    94
  • AI Streaming Text

    AI Streaming Text

    48
  • AI Tool Call

    AI Tool Call

    44
  • Signal Bars Loader

    Signal Bars Loader

    41
  • Glitch Text Loader

    Glitch Text Loader

    41
  • AI Prompt Diff

    AI Prompt Diff

    38
  • AI Conversation Tree

    AI Conversation Tree

    32

More in AI chats

View all
  • AI Actions

    AI Actions

    317
  • Color Picker

    Color Picker

    73
  • Prompt with Model Picker

    Prompt with Model Picker

    2
  • Agent Chat

    Agent Chat

    17
  • Approval Card

    Approval Card

    12
  • System Message

    System Message

    53
  • Message

    Message

    48
  • AI Task List

    AI Task List

    158