ComponentsAI & agents
Prompt Console
A two-row composer with a permission mode picker, a model picker and a context tab on top for the branch and folder.
"use client";
import { Folder, GitBranch } from "lucide-react";
import { useEffect, useRef, useState } from "react";
import type { PromptBoxStatus } from "@/components/miyuki-ui/prompt-box";
import { PromptConsole } from "@/components/miyuki-ui/prompt-console";
const models = [
{ id: "standard", name: "Standard", description: "Quick answers for everyday plans." },
{ id: "fine", name: "Fine mesh", description: "Slower. Reads every bulletin in full." },
{ id: "ensemble", name: "Ensemble", description: "Weighs several forecasts first." },
];
const context = [
{ id: "branch", icon: <GitBranch />, label: "plan/hakuba-14feb" },
{ id: "folder", icon: <Folder />, label: "routes/hakuba" },
];
export default function PromptConsoleDemo() {
const [status, setStatus] = useState<PromptBoxStatus>("idle");
const timer = useRef(0);
useEffect(() => () => window.clearTimeout(timer.current), []);
return (
<PromptConsole
className="max-w-[560px]"
placeholder="What do you need today?"
defaultMode="auto"
models={models}
defaultModel="standard"
context={context}
status={status}
onSend={() => {
setStatus("streaming");
timer.current = window.setTimeout(() => setStatus("idle"), 3000);
}}
onStop={() => {
window.clearTimeout(timer.current);
setStatus("idle");
}}
/>
);
}Install
npx shadcn@latest add @miyuki-ui/prompt-consoleThis needs the @miyuki-ui registry in your components.json. See Using the shadcn CLI.
Props
PromptConsole
Prop
Type
Prompt Box
The message box for a chat with an agent: a text area that grows line by line, a model picker, and a send button that turns into stop while a reply streams.
Prompt Glow
A band of water-blue light that circles the composer's border while the agent works, with a faint glow under its lower edge.