AI Input With Model Selection

A dynamic AI input box with model selection, file upload, privacy toggle, and API integration.

AIInputSeven is an advanced input component that allows users to:

Select an AI model (GPT-4, GPT-3.5, Claude, etc.)
Upload or capture a file
Toggle Privacy Mode (to prevent sending sensitive info)
Type a message with auto-resizing text area
Send input to an AI API endpoint

GSAP

Framer Motion

Import

import { AIInputSeven } from "@/components/FingUIComponents/ai-input/ai-input-07.tsx"

Default

<AIInputSeven/>

Passing Custom Models

You can also provide your own list of models. This is useful if your app integrates with specific APIs.

<AIInputSeven
  models={[
    { name: "Gemini-1.5" },
    { name: "Mistral-7B" },
    { name: "Custom-LLM" }
  ]}
/>

Real-World Use Case: API Request with Selected Model

You can use the selected model to send an API request. For example, imagine calling your AI backend:

"use client";
import { useState } from "react";
import { AIInputSeven } from "@/components/FingUIComponents/ai-input/ai-input-07";

export default function AIChatExample() {
  const [response, setResponse] = useState("");

  const handleAskAI = async (model: string, prompt: string) => {
    const res = await fetch("/api/ask-ai", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ model, prompt }),
    });
    const data = await res.json();
    setResponse(data.answer);
  };

  return (
    <div>
      <AIInputSeven
        models={[
          { name: "GPT-4" },
          { name: "Claude-3" },
          { name: "LLaMA-3" }
        ]}
        defaultModel="Claude-3"
      />
      <button
        onClick={() => handleAskAI("Claude-3", "Explain quantum physics simply")}
      >
        Ask AI
      </button>
      <p>Response: {response}</p>
    </div>
  );
}