Schuif om te bevestigenBevestigd
Met e-mail
Invoerveld dat meegroeit, met modelkeuze, een denk-animatie en een antwoord dat woord voor woord verschijnt.
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.
Klik op het eiland