A production-ready prompt input with agent selector, sources toggle, file attach, and deep research mode. Created by Samet Ozkale.
Type your prompt, then press Enter or click the send button to submit. Shift+Enter adds a new line. The prompt is sent to onSubmit so you can show it in your chat.
Customize colors with CSS custom properties for dark mode or any theme.
Border, hover, and icon colors can be customized
via CSS variables for seamless theme integration.
Install the package and add the component to your React app. Requires Tailwind CSS and the peer dependencies listed below.
Install the package and peer dependencies. Ensure Tailwind CSS is configured and the package is included in your Tailwind content path.
# Core package
npm install @sametozkale/prompt-input
# Peer dependencies (if not already installed)
npm install framer-motion @radix-ui/react-dropdown-menu @radix-ui/react-select lucide-reactImport the component and use it like any other React component. Styles are included automatically.
import { useState } from "react";
import { AIPromptInput } from "@sametozkale/prompt-input";
import type { PromptData } from "@sametozkale/prompt-input";
function ChatPage() {
const [messages, setMessages] = useState<{ role: "user"; text: string }[]>([]);
const handleSubmit = (data: PromptData) => {
setMessages((prev) => [...prev, { role: "user", text: data.text }]);
// Component resets input automatically; send to your API here
};
return (
<div>
{messages.map((m, i) => (
<div key={i}>{m.text}</div>
))}
<AIPromptInput
onSubmit={handleSubmit}
placeholder="What would you like to do?"
/>
</div>
);
}Add the package to your Tailwind content array so its classes are included in the build.
// tailwind.config.js – add the package to content
module.exports = {
content: [
"./app/**/*.{js,ts,jsx,tsx,mdx}",
"./components/**/*.{js,ts,jsx,tsx,mdx}",
"./node_modules/@sametozkale/prompt-input/dist/**/*.js",
],
// ...
};