How to Add Slash Commands to a React Input

Slash commands are everywhere now — Slack, Linear, Notion, ChatGPT. Typing / opens a menu of actions, you pick one, and the app does something specific. They are one of the highest-leverage additions to a chat input because they let power users skip menus entirely.

This tutorial adds a / command menu to a React input using Prompt Area. You get start-of-line detection (so a / mid-sentence does not trigger the menu) and structured output, with zero extra dependencies.

Step 1 — Install

npx shadcn@latest add https://prompt-area.com/r/prompt-area.json

Step 2 — Define your commands

Commands are plain data: a value to act on, a label to show, and an optional description for the dropdown.

const COMMANDS = [
  { value: 'summarize', label: 'summarize', description: 'Summarize the conversation' },
  { value: 'translate', label: 'translate', description: 'Translate the last message' },
  { value: 'deep-research', label: 'deep-research', description: 'Research a topic in depth' },
]

const searchCommands = (q: string) =>
  COMMANDS.filter((c) => c.label.toLowerCase().includes(q.toLowerCase()))

Step 3 — Wire up the command trigger

The commandTrigger() preset handles the / character, start-of-line detection, and the dropdown. Spread your state bind and pass the trigger:

'use client'

import { PromptArea } from '@/components/prompt-area'
import { usePromptAreaState } from '@/components/use-prompt-area-state'
import { commandTrigger } from '@/components/trigger-presets'

export function CommandInput() {
  const { bind } = usePromptAreaState()
  return (
    <PromptArea
      {...bind}
      triggers={[commandTrigger({ onSearch: searchCommands })]}
      placeholder="Type / for commands…"
      minHeight={48}
    />
  )
}

Step 4 — Act on the selected command

When the user submits, read the chosen command as structured data and branch your logic. No parsing the raw text for a leading slash.

import { getChipsByTrigger } from '@/components/segment-helpers'

function handleSubmit() {
  const command = getChipsByTrigger(bind.value, '/')[0]?.value
  switch (command) {
    case 'summarize':
      return summarizeThread()
    case 'translate':
      return translateLast()
    default:
      return sendMessage(plainText)
  }
}

Because the command is a typed chip, it stays intact even if the user keeps typing a message after it — you always know exactly which command was chosen.

Going further

The same trigger system powers @mentions and #tags, so you can combine them in one input. You can also style command chips, load commands asynchronously via onSearch, and pair the input with an Action Bar for buttons like attach and send.