AI Task Input Generator.

The front door of every agent product: one card that carries the whole job — instruction, attachments, model and mode, context the user can actually see — and a submit that turns into a stop button the moment work begins. Tell MeDo what your agents get asked to do and the entry unit comes back with its state machine built.

A Task Input Is a Brief, Not a Field

An agent is only as good as what it gets handed, and the task input is where that handoff happens. Every capability the entry unit cannot express — materials that cannot be attached, execution rules that cannot be chosen, context the user cannot see or remove — gets compensated for in prose, and prose is the least reliable place to carry it: users forget, contracts drift, and the agent silently works on a fraction of what it was given. The second half of the component is the exit. Submitting an agent task is one of the few interface actions that starts something which keeps running, and keeps costing, after the click — which is why the stop state is not a nicety but the feature that makes people willing to submit at all. Get both halves right and the input becomes the place where trust is negotiated: what the agent will see, under what rules it will work, and how to take it back.

4 modèles

Modèles de Task Input que vous pouvez générer

Chaque modèle est un vrai prompt, pas une capture d'écran. Copiez-le dans n'importe quel éditeur IA, ou exécutez-le dans MeDo pour récupérer du code React + Tailwind.

MinimalPrompt-Only Bar

Single-Shot Entry With Example Chips

The landing-page shape: one box, one button, a row of starters. Right when the job fits entirely in words and nothing needs attaching — and wrong the moment materials enter the picture.

Create a task entry for an AI app builder's home screen: a single rounded bar, two rows tall, holding a textarea with placeholder 'Describe the app you want'. Enter submits; Shift+Enter adds a newline. Below the bar, four example chips — 'Booking site for a dental practice', 'Habit tracker with streaks', 'Invoice generator with PDF export', 'Team wiki with search' — each fills the textarea when clicked but never submits on its own. The submit button reads 'Build it' and stays disabled with helper text until the textarea holds at least twelve characters. On submit the bar collapses into a compact 'Starting your build…' row with a spinner, then hands off to the workspace route.

Tester dans MeDo

AttachmentsResearch Brief

Document-Heavy Request With Depth Control

For jobs where the materials carry half the meaning: files front and center, a depth mode, and every scrap of context visible before submit rather than assumed after it.

Create a research-request input for an analyst tool: a six-row textarea for the question, an attach panel accepting up to ten PDFs or spreadsheets rendered as chips with file name, page or row count, and a remove x. A segmented control picks Brief, Standard, or Exhaustive depth, each label carrying a one-line hint. Context chips above the submit list what else the run will receive — 'CRM export from Monday', 'pricing page snapshot' — each removable. Submit reads 'Run analysis'; while the job queues, the button becomes 'Queued — click to cancel'. A chip that fails parsing turns red with the reason inline, and the run holds until it is removed or replaced.

Tester dans MeDo

Dev toolModel-Picked Fix

Code Fix With Scope Chips and a Model Picker

The developer shape: a short instruction, explicit scope naming the files or services in play, and a model choice where the latency label is part of the decision.

Create a fix-request input inside a developer console: a three-row textarea with placeholder 'What is breaking?', and a scope row where the developer pins context as chips — file paths, service names, or a failing test id — added by typing or picked from recent items. A model picker offers Fast, Balanced, and Deep with a rough latency label on each. A mode toggle chooses between Propose patch and Patch and run tests, and the submit button's verb follows the mode. Cmd+Enter submits; during the run the button becomes Stop with a spinner, and a stop within the first two seconds cancels before execution while a later stop leaves a partial-diff notice.

Tester dans MeDo

MediaMultimodal Brief

References and Parameters Side by Side

Creative jobs need materials and parameters together: references attached and orderable, aspect and count chosen, then one submit that starts a generation slow enough to need its own cancel.

Create a media-generation task input: a two-row instruction field beside an attachment tray that accepts reference images as square thumbnails with drag-to-reorder and a corner x. A parameter row holds an aspect-ratio segmented control — 1:1, 4:5, 16:9 — a count stepper from one to eight, and a style dropdown. Context chips state what the model will reference, such as '3 reference images' and 'brand palette', so nothing stays implicit. The submit button reads 'Generate' and flips to Stop while generation runs, thumbnails showing a progress shimmer; a stopped run keeps finished outputs and marks the rest cancelled. Validate total reference weight before submit and surface the limit as an inline warning, not a post-submit error.

Tester dans MeDo

Comment personnaliser votre Task Input

Decide what a submission costs, then design submit

A submit that starts paid or long-running work needs a visible exit before it needs styling. If runs are expensive, the stop button — and, for the heaviest modes, a one-line time or cost hint beside submit — will change user behavior more than any treatment of the card itself.

Make implicit context explicit and removable

Whatever the agent receives that the user did not type this session — the current page, a connected account, yesterday's export — should appear as a chip the user can delete. Silent context is how an agent ends up acting on material the user assumed was excluded.

Keep the mode selector opinionated

Three named modes with a hint each beat nine toggles. The selector exists to make one tradeoff legible — speed against depth, proposal against action — and a control that forces five decisions at submit time gets abandoned to whatever the defaults are.

Let the stop state tell the truth

Stopping is three different products: cancel before execution, abort mid-run keeping partial output, or abort with rollback. Pick the one your runtime actually offers and write it into the prompt, because a stop that promises more than the runtime delivers breaks trust exactly once.

Qui utilise le composant Task Input

AI app-builder onboarding

The describe-your-app entry on a builder's home screen: starter chips seed the instruction, example cards never auto-submit, and the handoff after submit goes to a workspace route rather than a message thread.

Internal ops request console

Colleagues hand research and triage jobs to agents: documents attach as chips with page counts, a depth mode trades speed for coverage, and the stop button matters because runs touch live customer records.

Developer fix-request panel

A failing test pinned as scope, a model picker carrying latency labels, and a mode toggle between proposing a patch and applying it with tests — the entry unit states the whole contract before anything executes.

Consumer media generation

Reference images drop into a thumbnail tray beside aspect-ratio and count controls; a progress shimmer on attachments and a working cancel keep a slow generation from feeling like a hang.

Modèles de Task Input pour différents sites web

Le même composant task input, adapté au type de site sur lequel il est publié.

01 / 04

Product Landing Pages

The task input doubles as the demo. Constrain the placeholder, the hint, and the example chips to exactly what the backend accepts — a bar that says any link works, over a parser that only handles articles, breaks trust on the first submit.

Styles et variantes de Task Input

Choisissez la variante qui correspond au reste de la page, puis générez-la.

01 / 04

Floating Hero Bar

A bar suspended over the hero with one soft shadow — the marketing shape. It earns the drama only if every state still fits inside it: validation, chips, and the running state all have to survive the slim silhouette.

Task Input en React, Next.js, Vue et Svelte

React, Next.js, Vue 3, SvelteKit, Astro ou HTML simple — le même task input, six façons de l'intégrer.

01 / 03

React Task Input

One status value does the work: the same button submits in idle and stops mid-run, and the disabled rule puts the minimum-brief validation where it belongs — on the control itself.

src/components/TaskInput.tsx

const [brief, setBrief] = useState('')
const [status, setStatus] = useState<'idle' | 'running'>('idle')

async function submit() {
  setStatus('running')
  try {
    await runTask({ instruction: brief, attachments, mode })
  } finally {
    setStatus('idle')
  }
}

<textarea value={brief} onChange={(e) => setBrief(e.target.value)}
  rows={4} placeholder='Describe the task — what done looks like'
  className='w-full resize-none outline-none' />

<button onClick={status === 'running' ? abort : submit}
  disabled={status === 'idle' && brief.trim().length < 12}
  className='ml-auto rounded-lg bg-indigo-600 px-4 py-2
             text-sm font-medium text-white disabled:opacity-40'>
  {status === 'running' ? 'Stop' : 'Run task'}
</button>

Comment ajouter votre Task Input à un projet

Quatre étapes, du choix d'un modèle de task input à sa mise en production.

01~15min

Write the Job Contract First

List what one submission contains: the instruction, which materials attach, which model and mode it runs under, and what context the agent receives implicitly. Anything implicit should either become a visible chip or be cut from the run entirely.

02~10min

Choose Two Controls, Not Nine

Pick the model picker or the mode toggle — whichever decision actually changes the outcome — and let advanced settings live in a drawer. Every visible control is a decision you force on the user at the worst possible moment: right before they commit.

03~2min

Generate With the States Named

Send MeDo the brief shape and call out every state by name — empty, validating, submitting, running, stopped. The stop path is the part generators skip unless the prompt asks for it, and it is the part your users will test first.

04~10min

Submit, Then Interrupt It

Run a real task and stop it halfway. Confirm the run actually cancels, the partial output is labeled, and the entry unit returns to an editable state. An abort that only hides a spinner teaches people not to start expensive work.

Questions fréquentes à propos de Task Input

Isn't a task input just an input field with extra buttons?

An input collects a value for a form to use later; a task input assembles a brief and its submit starts work immediately. That difference is structural, not cosmetic: the brief needs attachments because materials are part of the job, model and mode controls because execution rules are part of the job, context chips because the user must see what the agent will know, and a stop state because submitted work runs on without further keystrokes. Remove any of those and you have a form field wearing an agent's clothes — users cram the missing pieces into the text and lose them.

How is a task input different from a chat composer?

A chat composer appends a message to an ongoing conversation; a task input starts a job. Three tells separate them: a task input carries execution controls such as model and mode, its attachments are work materials rather than things you are discussing, and above it there is no message history — submit hands off to a run, not to the next turn of a thread. Many products show both, and that is fine: the chat panel owns the ongoing exchange while the task input is the front door that started it. When the surface after submit is another message, you built a composer; when it is a running job, you built a task input.

Do I really need a stop button?

If runs take more than a few seconds or cost anything per run, yes — hesitation at the submit button is a real adoption problem, and its usual cause is the absence of an exit. Make stop honest: cancel the run where the runtime supports it, and when it cannot, say what happens to partial output instead of pretending the work vanished. A stop that only hides a spinner while the run continues silently is worse than none, because users who discover it stop trusting submit itself.

Which controls belong next to the prompt?

The two that change the outcome: a model choice where speed and depth genuinely trade off, and a mode choice where the same instruction can mean different work — propose versus apply, draft versus exhaustive. Context chips earn their place whenever the agent receives anything the user did not type this session. Everything else belongs in a collapsed advanced section; an entry unit that looks like a settings panel gets filled in like one, slowly and once.

What should happen immediately after submit?

The input should hand off visibly: the button flips to a stop or cancel state, fields dim or lock according to your edit policy, and the interface shows where the run lives — an inline status, a run row, or a route change to the workspace. Anything longer than a few seconds needs an elapsed indicator and a path back to the result. The worst pattern is a silent submit where the user cannot tell whether anything started.

Générez votre task input maintenant.

Testez n'importe quel prompt — gratuit, sans inscription.

Commencer gratuitement Voir les tarifs

Chat Panel

Your product already has the page where the answer is needed. MeDo generates the panel that lives there: a docked surface with a streaming message log, an attachment-aware composer, citations that trace back to sources, tool chips that tell the truth, and a recovery path for every failed request — all scoped to whatever the host page has open.

Composants associés

Agent Workspace

Not a chat window with extra panes: an arrangement where the conversation steers, the files testify, the preview verifies, and the task list keeps the plan honest — all of it wired to one run state so a failure lands everywhere at once. Give MeDo the regions and the states and the environment comes back assembled.

Composants associés

Conversation

Under every good chat screen sits a quiet set of decisions: who may speak, what counts as an event, how a streaming reply appends, and what happens when a user rewrites a question. MeDo generates the whole organizing pattern from those decisions — a typed message model, ordering and grouping rules, streaming semantics, branching, and compaction for threads that outgrow their welcome.

Composants associés