NinA AI Agency

AI-promptveld

Invoerveld dat meegroeit, met modelkeuze, een denk-animatie en een antwoord dat woord voor woord verschijnt.

TypenGratis
Werkt inClaude CodeChatGPT CodexGemini CLIGitHub CopilotCursorLovablev0

Prompt plus werkende code in één keer. Plak het in Claude Code, Codex, Gemini, Copilot of Cursor.

Bouw een interactief UI-element: AI-promptveld.

Wat het is: Invoerveld dat meegroeit, met modelkeuze, een denk-animatie en een antwoord dat woord voor woord verschijnt.

Gedrag:
- Textarea die meegroeit tot maximaal 120px hoog; Enter verstuurt, Shift+Enter geeft een nieuwe regel.
- Rij met modelkeuze (bijvoorbeeld Claude, GPT, Gemini) als knoppen met role="radio"; de gekozen knop is gevuld.
- Ronde verzendknop rechtsonder, uitgeschakeld zolang het veld leeg is, in de accentkleur als hij actief is.
- Na verzenden: de vraag als bubbel rechts, daaronder "<model> denkt na..." met een glanzende tekstanimatie; na ongeveer een seconde verschijnt het antwoord woord voor woord (ongeveer 55 ms per woord).
- Gebruik een vast voorbeeldantwoord, of sluit het aan op mijn eigen AI-endpoint als dat er is.

Eisen:
- Werk in de stack van dit project. Is het React met Tailwind CSS, maak dan één component zonder extra pakketten; anders gewone HTML, CSS en JavaScript.
- Volledig bedienbaar met toetsenbord en touch, met de juiste aria-attributen.
- Respecteer prefers-reduced-motion: minder of geen beweging.
- Neem de kleuren, lettertypes en afrondingen van mijn project over.
- Laat me aan het eind zien waar het component staat en hoe ik het gebruik.
- Zet bovenaan het bestand een korte bronvermelding als commentaar: "Gebaseerd op de AI Toolkit van NinA AI Agency, https://www.nina-ai.nl/toolkit/ui/ai-prompt-invoer". Laat die staan.

Speel verder