AI Slash Commands in React Editors 2026 (10-Min Tutorial)

AI Slash Commands in React Editors 2026 (10-Min Tutorial)

Slash commands changed how users interact with text editors. Type / and a menu appears. Pick an action. It runs. Cursor uses this for coding. Notion uses it for blocks. Linear uses it for tasks. Every modern editor in 2026 needs this pattern — or users notice something is missing.

Adding AI to slash commands takes the pattern further. Type / → pick "Continue writing" → GPT-5 continues your text. Type / → pick "Summarize" → Claude Sonnet 5 condenses the selection. Type / → pick "Translate to Spanish" → Gemini 3 rewrites in Spanish. The menu becomes an AI command palette embedded in your editor.

This guide shows you how to add AI slash commands to any React editor in 2026 — the Cursor-style menu pattern with three working paths: custom build in Lexical, custom build in TipTap, and Eddyter's built-in slash commands. By the end, you'll have production-ready code either way.

The short answer: For most React and Next.js teams in 2026, adding AI slash commands via Eddyter takes 10 minutes at $12-$59/mo flat with GPT-5, Claude Sonnet 5, Haiku 4.5, and Gemini 3 built in. Custom builds in Lexical or TipTap take 2-3 weeks of engineering. Full working code for both paths below.

🎥 New to modern editors? Watch: What is Eddyter? Why Developers Are Switching in 2026

What "AI Slash Commands" Actually Means

Before writing code, clarify what pattern you're building. "AI slash commands" describes four related but distinct UX patterns in 2026:

1. AI Action Menu

Type / → menu appears with AI actions (Continue writing, Improve writing, Fix grammar, Translate, Summarize). Select an action. AI runs it on selected text or cursor position.

2. Block Menu with AI Blocks

Type / → menu shows content blocks (Heading, Bullet list, Code block, Callout) plus AI blocks (Ask AI, Generate summary). Notion uses this pattern.

3. Command Palette

Type / → menu shows every editor command (formatting, structural, AI). Cursor uses this pattern with Cmd+K plus /.

4. AI Chat Trigger

Type / → mini chat opens inline. User types a prompt. AI responds and inserts content. Notion AI uses this pattern.

This guide focuses on Pattern #1 (AI action menu) because it's the most-requested pattern for React editors in 2026 and the foundation for the other three. Patterns 2-4 are extensions covered briefly in later sections.

The 6 Technical Challenges of AI Slash Commands

Building slash commands that feel smooth requires solving six specific problems. Skipping any of these creates the janky feel that plagues most homegrown implementations.

1. Trigger Detection

Detect the / character reliably. Ignore / inside code blocks. Ignore / at the start of URLs. Handle keyboard IME edge cases (Japanese, Chinese input methods).

2. Menu Positioning

Position the menu below the cursor. Handle screen edges (menu shouldn't clip off the viewport). Handle scrolled containers. Update position as user scrolls.

3. Fuzzy Search

Users type /imp and expect "Improve writing" to match. Users type /sum and expect "Summarize" to match. Fuzzy matching, not exact matching, feels correct.

4. Keyboard Navigation

Arrow up/down cycles menu items. Enter selects. Esc closes. Tab autocompletes. Every printable character updates the filter. This must feel identical to VS Code, Cursor, and Notion.

5. Streaming AI Rendering

When user picks "Continue writing", GPT-5 streams tokens back at 20-50/sec. Naive rendering causes flickering. Correct implementations use requestAnimationFrame batching.

6. Undo/Redo Handling

If user picks "Continue writing" and doesn't like the result, Cmd+Z should undo the AI-inserted text as a single unit — not one character at a time. Custom undo stacks matter.

For deeper AI integration patterns, see our How to Add AI Autocomplete to a React Editor 2026 and AI Writing Assistants for React 2026 guide.

Two Paths: Custom Build vs Eddyter

You have two production-ready paths in 2026:

The custom path gives total control over UX behavior, model choice, and command list. Eddyter gives you production quality in 10 minutes.

Both paths are covered below with working code.

Path 1: Custom Build in Lexical (2-3 Weeks)

If you need full control over the slash command UX, this is the pattern that works in 2026 with Lexical. It uses Lexical's Typeahead plugin for menu positioning, Vercel AI SDK 5.0+ for streaming AI, and standard React state for menu behavior.

Step 1: Install Dependencies

bash

1
npm install lexical @lexical/react ai @ai-sdk/openai @ai-sdk/anthropic

Lexical is Meta's editor framework. Vercel AI SDK 5.0+ provides streamText() for streaming AI. The @ai-sdk/openai and @ai-sdk/anthropic packages are provider adapters.

Step 2: Define Your Slash Commands

Create a list of commands with metadata:

typescript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
// lib/slash-commands.ts
export interface SlashCommand {
  id: string;
  label: string;
  description: string;
  icon: string;
  category: 'ai' | 'format';
  aiPrompt?: string;
}
export const slashCommands: SlashCommand[] = [
  {
    id: 'continue',
    label: 'Continue writing',
    description: 'Let AI continue where you left off',
    icon: '✍️',
    category: 'ai',
    aiPrompt: 'Continue the following text naturally with 2-3 sentences. Match the tone and style.',
  },
  {
    id: 'improve',
    label: 'Improve writing',
    description: 'Fix grammar and improve clarity',
    icon: '✨',
    category: 'ai',
    aiPrompt: 'Improve the following text for clarity and grammar. Keep the same meaning and length.',
  },
  {
    id: 'summarize',
    label: 'Summarize',
    description: 'Condense the selection into 2-3 sentences',
    icon: '📝',
    category: 'ai',
    aiPrompt: 'Summarize the following text in 2-3 sentences. Preserve key points.',
  },
  {
    id: 'shorter',
    label: 'Make shorter',
    description: 'Reduce length by half',
    icon: '📉',
    category: 'ai',
    aiPrompt: 'Rewrite the following text at half the current length. Preserve all key information.',
  },
  {
    id: 'longer',
    label: 'Make longer',
    description: 'Expand with more detail',
    icon: '📈',
    category: 'ai',
    aiPrompt: 'Expand the following text with more detail and examples. Maintain the tone.',
  },
  {
    id: 'translate-es',
    label: 'Translate to Spanish',
    description: 'Rewrite in Spanish',
    icon: '🇪🇸',
    category: 'ai',
    aiPrompt: 'Translate the following text into Spanish. Preserve tone and formatting.',
  },
  {
    id: 'fix-grammar',
    label: 'Fix grammar',
    description: 'Correct grammar and spelling only',
    icon: '📚',
    category: 'ai',
    aiPrompt: 'Fix only grammar and spelling errors in the following text. Do not change meaning, tone, or style.',
  },
  {
    id: 'change-tone-professional',
    label: 'Make more professional',
    description: 'Rewrite in a professional tone',
    icon: '💼',
    category: 'ai',
    aiPrompt: 'Rewrite the following text in a professional business tone.',
  },
];

What this list defines:

• 8 core AI commands — the standard set most editors ship with in 2026
• Categories — separate AI actions from format actions for menu grouping
• AI prompts — specific instructions for each action
• Icons — visual anchors that help users scan the menu fast

Step 3: Create the Streaming AI Endpoint

The API route handles streaming AI requests. Runs on Edge Runtime for lowest latency.

typescript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
// app/api/slash-command/route.ts
import { streamText } from 'ai';
import { openai } from '@ai-sdk/openai';
export const runtime = 'edge';
export async function POST(req: Request) {
  try {
    const { command, selectedText, contextBefore } = await req.json();
    const systemPrompt = `You are a text editor assistant. Execute the requested action on the user's text. Return only the transformed text — no preamble, no explanation, no quotes.`;
    const userPrompt = selectedText
      ? `${command.aiPrompt}\n\nText to transform:\n${selectedText}`
      : `${command.aiPrompt}\n\nContext:\n${contextBefore}`;
    const result = await streamText({
      model: openai('gpt-5'),
      messages: [
        { role: 'system', content: systemPrompt },
        { role: 'user', content: userPrompt },
      ],
      maxTokens: 500,
      temperature: 0.7,
    });
    return result.toDataStreamResponse();
  } catch (error) {
    console.error('Slash command error:', error);
    return new Response('Command failed', { status: 500 });
  }
}

Key decisions in this code:

• maxTokens: 500 limits response length (slash commands should feel snappy, not draft essays)
• temperature: 0.7 balances creativity and predictability
• Edge runtime minimizes latency between user selection and AI response
• System prompt enforces clean output (no "Here's your improved text:" preamble)

To use Claude Sonnet 5 instead of GPT-5:

typescript

1
2
3
import { anthropic } from '@ai-sdk/anthropic';
// In streamText:
model: anthropic('claude-sonnet-5-20260101'),

Or Gemini 3:

typescript

1
2
3
import { google } from '@ai-sdk/google';
// In streamText:
model: google('gemini-3-pro'),

Step 4: Build the Slash Command Menu Component

The menu component handles positioning, filtering, keyboard navigation, and command execution.

tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
"use client";
import { useEffect, useRef, useState } from 'react';
import { SlashCommand, slashCommands } from '@/lib/slash-commands';
interface SlashCommandMenuProps {
  position: { top: number; left: number };
  filter: string;
  onSelect: (command: SlashCommand) => void;
  onClose: () => void;
}
export function SlashCommandMenu({
  position,
  filter,
  onSelect,
  onClose,
}: SlashCommandMenuProps) {
  const [selectedIndex, setSelectedIndex] = useState(0);
  const menuRef = useRef<HTMLDivElement>(null);
  // Fuzzy filter commands
  const filtered = slashCommands.filter((cmd) => {
    if (!filter) return true;
    const search = filter.toLowerCase();
    return (
      cmd.label.toLowerCase().includes(search) ||
      cmd.description.toLowerCase().includes(search) ||
      cmd.id.includes(search)
    );
  });
  // Reset selection when filter changes
  useEffect(() => {
    setSelectedIndex(0);
  }, [filter]);
  // Keyboard navigation
  useEffect(() => {
    const handleKeyDown = (e: KeyboardEvent) => {
      if (filtered.length === 0) return;
      if (e.key === 'ArrowDown') {
        e.preventDefault();
        setSelectedIndex((i) => (i + 1) % filtered.length);
      } else if (e.key === 'ArrowUp') {
        e.preventDefault();
        setSelectedIndex((i) => (i - 1 + filtered.length) % filtered.length);
      } else if (e.key === 'Enter') {
        e.preventDefault();
        onSelect(filtered[selectedIndex]);
      } else if (e.key === 'Escape') {
        e.preventDefault();
        onClose();
      }
    };
    window.addEventListener('keydown', handleKeyDown);
    return () => window.removeEventListener('keydown', handleKeyDown);
  }, [filtered, selectedIndex, onSelect, onClose]);
  // Scroll selected item into view
  useEffect(() => {
    const menuEl = menuRef.current;
    if (!menuEl) return;
    const selectedEl = menuEl.children[selectedIndex] as HTMLElement;
    if (selectedEl) {
      selectedEl.scrollIntoView({ block: 'nearest' });
    }
  }, [selectedIndex]);
  if (filtered.length === 0) {
    return (
      <div
        className="fixed z-50 w-72 bg-white border border-gray-200 rounded-lg shadow-lg p-3"
        style={{ top: position.top, left: position.left }}
      >
        <div className="text-sm text-gray-500">No commands match "{filter}"</div>
      </div>
    );
  }
  return (
    <div
      ref={menuRef}
      className="fixed z-50 w-72 max-h-80 overflow-y-auto bg-white border border-gray-200 rounded-lg shadow-lg py-1"
      style={{ top: position.top, left: position.left }}
    >
      {filtered.map((cmd, i) => (
        <button
          key={cmd.id}
          onClick={() => onSelect(cmd)}
          onMouseEnter={() => setSelectedIndex(i)}
          className={`w-full flex items-start gap-3 px-3 py-2 text-left transition-colors ${
            i === selectedIndex
              ? 'bg-blue-50'
              : 'hover:bg-gray-50'
          }`}
        >
          <span className="text-xl">{cmd.icon}</span>
          <div className="flex-1 min-w-0">
            <div className="text-sm font-medium text-gray-900">
              {cmd.label}
            </div>
            <div className="text-xs text-gray-500 truncate">
              {cmd.description}
            </div>
          </div>
        </button>
      ))}
    </div>
  );
}

What this component handles:

• Fuzzy filtering — matches label, description, and id
• Keyboard navigation — arrow keys cycle, Enter selects, Esc closes
• Mouse hover sync — hovering updates selected index (matches VS Code pattern)
• Auto-scroll — selected item stays visible
• Empty state — clear message when no commands match

Step 5: Integrate with Lexical

Connect the menu to your Lexical editor via a custom plugin:

tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
"use client";
import { useEffect, useState, useCallback } from 'react';
import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
import {
  $getSelection,
  $isRangeSelection,
  $createTextNode,
  KEY_DOWN_COMMAND,
  COMMAND_PRIORITY_HIGH,
} from 'lexical';
import { SlashCommandMenu } from './SlashCommandMenu';
import { SlashCommand } from '@/lib/slash-commands';
export function SlashCommandPlugin() {
  const [editor] = useLexicalComposerContext();
  const [isOpen, setIsOpen] = useState(false);
  const [filter, setFilter] = useState('');
  const [position, setPosition] = useState({ top: 0, left: 0 });
  const [isStreaming, setIsStreaming] = useState(false);
  // Detect / trigger and update position
  useEffect(() => {
    return editor.registerCommand(
      KEY_DOWN_COMMAND,
      (event: KeyboardEvent) => {
        if (event.key === '/' && !isOpen) {
          editor.getEditorState().read(() => {
            const selection = $getSelection();
            if (!$isRangeSelection(selection) || !selection.isCollapsed()) return;
            const domSelection = window.getSelection();
            if (!domSelection || domSelection.rangeCount === 0) return;
            const range = domSelection.getRangeAt(0);
            const rect = range.getBoundingClientRect();
            setPosition({
              top: rect.bottom + 5,
              left: rect.left,
            });
            setIsOpen(true);
            setFilter('');
          });
        } else if (isOpen) {
          // Update filter as user types after /
          if (event.key.length === 1 && !event.metaKey && !event.ctrlKey) {
            setFilter((prev) => prev + event.key);
          } else if (event.key === 'Backspace') {
            setFilter((prev) => {
              if (prev.length === 0) {
                setIsOpen(false);
                return prev;
              }
              return prev.slice(0, -1);
            });
          }
        }
        return false;
      },
      COMMAND_PRIORITY_HIGH
    );
  }, [editor, isOpen]);
  // Execute selected command
  const handleSelect = useCallback(
    async (command: SlashCommand) => {
      setIsOpen(false);
      if (command.category !== 'ai') return;
      setIsStreaming(true);
      try {
        // Get selected text or context
        let selectedText = '';
        let contextBefore = '';
        editor.getEditorState().read(() => {
          const selection = $getSelection();
          if ($isRangeSelection(selection)) {
            selectedText = selection.getTextContent();
            // Get previous ~500 chars for context
            const root = editor.getRootElement();
            if (root) {
              contextBefore = root.textContent?.slice(-500) || '';
            }
          }
        });
        // Remove the "/filter" text that triggered the menu
        editor.update(() => {
          const selection = $getSelection();
          if ($isRangeSelection(selection)) {
            const text = '/' + filter;
            const node = selection.anchor.getNode();
            if (node.getTextContent().endsWith(text)) {
              const currentText = node.getTextContent();
              node.setTextContent(currentText.slice(0, -text.length));
            }
          }
        });
        // Stream AI response
        const response = await fetch('/api/slash-command', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ command, selectedText, contextBefore }),
        });
        if (!response.ok || !response.body) {
          throw new Error('AI request failed');
        }
        const reader = response.body.getReader();
        const decoder = new TextDecoder();
        let accumulated = '';
        while (true) {
          const { done, value } = await reader.read();
          if (done) break;
          const chunk = decoder.decode(value);
          const lines = chunk.split('\n').filter(Boolean);
          for (const line of lines) {
            if (line.startsWith('0:')) {
              const text = JSON.parse(line.slice(2));
              accumulated += text;
              // Insert into editor
              editor.update(() => {
                const selection = $getSelection();
                if ($isRangeSelection(selection)) {
                  selection.insertText(text);
                }
              });
            }
          }
        }
      } catch (error) {
        console.error('Slash command failed:', error);
      } finally {
        setIsStreaming(false);
      }
    },
    [editor, filter]
  );
  if (!isOpen) return null;
  return (
    <>
      <SlashCommandMenu
        position={position}
        filter={filter}
        onSelect={handleSelect}
        onClose={() => setIsOpen(false)}
      />
      {isStreaming && (
        <div className="fixed bottom-4 right-4 bg-blue-600 text-white px-3 py-2 rounded-lg text-sm">
          AI thinking...
        </div>
      )}
    </>
  );
}

What this plugin does:

• Detects / — triggers menu open
• Updates filter — as user types after /
• Positions menu — below current cursor using DOM range API
• Removes trigger text — cleans up /command before inserting AI response
• Streams AI response — inserts tokens as they arrive
• Handles Backspace — closes menu if user backspaces past /

Step 6: Wire It Up in Your Editor

tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
"use client";
import { LexicalComposer } from '@lexical/react/LexicalComposer';
import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin';
import { ContentEditable } from '@lexical/react/LexicalContentEditable';
import { HistoryPlugin } from '@lexical/react/LexicalHistoryPlugin';
import LexicalErrorBoundary from '@lexical/react/LexicalErrorBoundary';
import { SlashCommandPlugin } from './SlashCommandPlugin';
export default function EditorWithSlashCommands() {
  const initialConfig = {
    namespace: 'slash-command-editor',
    onError: (error: Error) => console.error(error),
    nodes: [],
  };
  return (
    <LexicalComposer initialConfig={initialConfig}>
      <div className="relative border rounded-lg p-4">
        <RichTextPlugin
          contentEditable={
            <ContentEditable className="outline-none min-h-64" />
          }
          placeholder={
            <div className="text-gray-400 absolute top-4 left-4 pointer-events-none">
              Type / for AI commands...
            </div>
          }
          ErrorBoundary={LexicalErrorBoundary}
        />
        <HistoryPlugin />
        <SlashCommandPlugin />
      </div>
    </LexicalComposer>
  );
}

That's the full custom Lexical implementation. Type / and the AI menu opens. Filter by typing. Enter to run. Streaming AI inserts the result at your cursor.

The Real Cost of Custom Lexical Slash Commands

Production-quality slash commands built this way typically takes 2-3 weeks and costs:

Plus opportunity cost: 2-3 weeks of senior engineering time is $12K-$18K in salary alone.

For build-vs-buy analysis, see Build vs Buy: Real Cost of Building a Rich Text Editor 2026 and Why Building Your Own Rich Text Editor Is a Startup Killer.

Path 1B: Custom Build in TipTap (2-3 Weeks)

If you're already on TipTap, the pattern is similar but uses TipTap's Suggestion extension.

Install the Suggestion Extension

bash

1
npm install @tiptap/suggestion tippy.js

Create the Slash Command Extension

typescript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
// extensions/slash-command.ts
import { Extension } from '@tiptap/core';
import Suggestion from '@tiptap/suggestion';
import { ReactRenderer } from '@tiptap/react';
import tippy from 'tippy.js';
import { SlashCommandMenuTipTap } from '@/components/SlashCommandMenuTipTap';
import { slashCommands } from '@/lib/slash-commands';
export const SlashCommandExtension = Extension.create({
  name: 'slashCommand',
  addProseMirrorPlugins() {
    return [
      Suggestion({
        editor: this.editor,
        char: '/',
        allowSpaces: false,
        items: ({ query }) => {
          return slashCommands.filter((cmd) => {
            const search = query.toLowerCase();
            return (
              cmd.label.toLowerCase().includes(search) ||
              cmd.description.toLowerCase().includes(search)
            );
          });
        },
        render: () => {
          let component: ReactRenderer;
          let popup: any;
          return {
            onStart: (props) => {
              component = new ReactRenderer(SlashCommandMenuTipTap, {
                props,
                editor: props.editor,
              });
              popup = tippy('body', {
                getReferenceClientRect: props.clientRect as any,
                appendTo: () => document.body,
                content: component.element,
                showOnCreate: true,
                interactive: true,
                trigger: 'manual',
                placement: 'bottom-start',
              });
            },
            onUpdate: (props) => {
              component.updateProps(props);
              popup[0].setProps({
                getReferenceClientRect: props.clientRect as any,
              });
            },
            onKeyDown: (props) => {
              if (props.event.key === 'Escape') {
                popup[0].hide();
                return true;
              }
              return (component.ref as any)?.onKeyDown?.(props);
            },
            onExit: () => {
              popup[0].destroy();
              component.destroy();
            },
          };
        },
      }),
    ];
  },
});

Then use the same fetch-and-stream pattern from Path 1 (Step 5) inside your menu component to call /api/slash-command.

TipTap's suggestion extension handles positioning and filtering for you. The AI streaming logic stays the same as Lexical.

Path 2: Eddyter Built-In Slash Commands (10 Minutes)

If slash commands are a feature (not your core product), Eddyter ships them in 10 minutes with GPT-5, Claude Sonnet 5, Haiku 4.5, and Gemini 3 all included at $12-$59/mo flat.

Step 1: Get Your Eddyter API Key

Visit eddyter.com/user/license-key. Copy your key. Add it to .env.local:

bash

1
NEXT_PUBLIC_EDDYTER_API_KEY=your-eddyter-api-key

Step 2: Install Eddyter

bash

1
npm install eddyter

Step 3: Render the Editor with Slash Commands Enabled

tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
"use client";
import {
  ConfigurableEditorWithAuth,
  EditorProvider,
} from 'eddyter';
import 'eddyter/style.css';
export default function EditorWithSlashCommands() {
  const apiKey = process.env.NEXT_PUBLIC_EDDYTER_API_KEY;
  const handleContentChange = (html: string) => {
    console.log('Editor content:', html);
  };
  return (
    <EditorProvider>
      <ConfigurableEditorWithAuth
        apiKey={apiKey}
        aiOptions={{
          slashCommands: true,
          model: 'gpt-5', // or 'claude-sonnet-5', 'claude-haiku-4-5', 'gemini-3'
        }}
        onChange={handleContentChange}
      />
    </EditorProvider>
  );
}

That's it. Type / and the AI menu opens. Filter by typing. Enter to run. Streaming AI inserts the result at your cursor. All keyboard behavior matches Cursor/Notion conventions. Works in React 18.2+/19 and Next.js 14/15.

Customizing the Slash Command List

Add your own commands to the built-in menu:

tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<ConfigurableEditorWithAuth
  apiKey={apiKey}
  aiOptions={{
    slashCommands: true,
    model: 'gpt-5',
    customCommands: [
      {
        id: 'brand-voice',
        label: 'Rewrite in brand voice',
        description: 'Apply our brand tone guidelines',
        icon: '🎨',
        prompt: 'Rewrite this text in our brand voice: friendly, direct, no jargon, active voice.',
      },
      {
        id: 'legal-review',
        label: 'Legal review',
        description: 'Flag any legal risk',
        icon: '⚖️',
        prompt: 'Review this text for legal risk. Flag any claims that need substantiation or disclaimers.',
      },
    ],
  }}
/>

Your custom commands appear in the menu alongside the built-in 8. Users type /brand and your rewriter runs.

Switching Models Per Command

Different commands can use different models. Fast tasks on Haiku 4.5, complex tasks on Sonnet 5:

tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
customCommands: [
  {
    id: 'quick-summary',
    label: 'Quick summary',
    description: 'Fast 1-sentence summary',
    icon: '⚡',
    prompt: 'Summarize in one sentence.',
    model: 'claude-haiku-4-5', // Override default for this command
  },
  {
    id: 'deep-analysis',
    label: 'Deep analysis',
    description: 'Thorough analysis with reasoning',
    icon: '🔬',
    prompt: 'Analyze this text thoroughly. Consider structure, argument quality, and evidence.',
    model: 'claude-sonnet-5',
  },
],

BYOK for Cost Control

On AI Pro BYOK ($39/mo), bring your own OpenAI/Anthropic/Google API keys:

tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
<ConfigurableEditorWithAuth
  apiKey={apiKey}
  aiOptions={{
    slashCommands: true,
    model: 'gpt-5',
    provider: 'byok',
    byokKeys: {
      openai: process.env.OPENAI_API_KEY,
      anthropic: process.env.ANTHROPIC_API_KEY,
      google: process.env.GOOGLE_AI_API_KEY,
    },
  }}
/>

For deeper AI integration, see Eddyter's docs and Best Rich Text Editor for AI Agent Products 2026.

🎥 See real setup: Integrate Eddyter in 30 Minutes with Cursor, Claude, Lovable

Custom Build vs Eddyter: Full Comparison

The pattern: Custom builds make sense when slash command UX is your core differentiator (Cursor, Linear). Eddyter makes sense when slash commands are a feature (SaaS with content editing, note-taking apps, CMS platforms, documentation tools).

3-Year Cost Math: Real Numbers

For a typical React SaaS with 1,000 active users using slash commands moderately (20 executions/day/user average):

Custom Build (Self-Hosted)

• Senior engineering (2.5 weeks initial build): $15,000
• Vercel AI SDK: Free
• OpenAI GPT-5 API costs (1,000 users × 20 runs/day × 30 days × 3 yrs × ~$0.008/run): $14,400
• Ongoing maintenance (bug fixes, model updates, ~8 hours/mo × $150/hr × 36 mo): $43,200
• 3-year total: $72,600

Custom Build + Cost Optimization (Model Fallback)

• Same as above except:
• API costs optimized 40% via Haiku for simple commands: $8,640 (was $14,400)
• 3-year total: $66,840

Eddyter AI Pro Managed

• Base plan: $59/mo × 36 = $2,124
• Includes: All AI costs, all models, ongoing updates, multi-framework support, custom commands support
• 3-year total: $2,124

The Real Savings

• vs Custom build: Eddyter saves $70,476 over 3 years (97.1% cost reduction)
• vs Custom build + optimization: Eddyter saves $64,716 over 3 years (96.8% cost reduction)

Plus 2-3 weeks of senior engineering time freed for actual product work.

5-Question Decision Framework

Use this to decide which path fits your team:

1. Are slash commands your core product differentiator?

Yes → Custom build. If users choose your product BECAUSE of unique slash command behavior (Cursor's multi-mode commands, Linear's issue commands), you need total UX control.

No → Eddyter. If slash commands are a feature that makes your existing product better, managed slash commands deliver 95% of the value with 3% of the engineering cost.

2. Do you have 2-3 weeks of senior engineering bandwidth?

Yes + no other priorities → Custom build possible.

No → Eddyter. If your team is stretched, adding 2-3 weeks of slash command engineering is opportunity cost you can't afford.

3. What frameworks does your product use?

React only → Either path works.

Multi-framework (React + Vue + Angular + Svelte) → Eddyter. Custom builds are editor-specific and require rebuilding for each framework. Eddyter supports 7 frameworks natively.

4. Do you need custom command actions?

Standard AI actions (improve, summarize, translate) → Either path works.

Domain-specific actions (brand voice rewriter, legal review, medical dictation) → Eddyter with customCommands. Faster to add custom commands via config than to build from scratch.

5. Do you need to support multiple AI models per command?

Yes → Eddyter. Eddyter supports GPT-5, Claude Sonnet 5, Haiku 4.5, Gemini 3 out of the box with per-command model overrides.

No, single model → Either works.

Common Pitfalls (7 Ways Slash Commands Go Wrong)

Teams building slash commands consistently hit these issues. Solving each is required for production quality.

Pitfall 1: Detecting / Inside Code Blocks

Users type / in code blocks all the time. Naive implementations open the menu inside /regex/ or file paths.

Fix: Check the current node type before opening menu. Skip if inside code node, code block, or link.

Pitfall 2: Menu Positioning at Screen Edges

At the bottom of the screen, menu clips off the viewport. At the right edge, menu extends past the window.

Fix: Calculate available space in each direction. Flip menu upward if not enough space below. Shift left if not enough space right.

Pitfall 3: Not Cleaning Up Trigger Text

User types /improve and picks Improve. The /improve text stays in the editor before the AI response.

Fix: Remove the trigger text (/ + filter) BEFORE inserting AI response. See Step 5 in the Lexical path above.

Pitfall 4: Blocking Keyboard Input While Streaming

While AI streams tokens, user tries to type. Naive implementations block or lag.

Fix: Allow typing during streaming. If user types, cancel the stream and insert what's been generated so far.

Pitfall 5: No Feedback During AI Wait

User picks command. Nothing happens for 2-3 seconds while API responds. Users think it's broken.

Fix: Show "AI thinking..." indicator immediately. First token arrival hides it.

Pitfall 6: Undo Inserts One Character at a Time

AI streams 50 characters. User hits Cmd+Z. Cursor moves back 1 character. Cmd+Z 49 more times to undo.

Fix: Wrap the entire AI insertion in a single undo transaction. In Lexical: use editor.update() with HistoryPlugin. In TipTap: wrap in editor.commands.setContent() transaction.

Pitfall 7: No Rate Limiting

Users trigger 100 slash commands per minute. AI costs explode. Malicious users DDoS your OpenAI account.

Fix: Rate limit per user (30 commands/min max). Monthly quotas (500-2,000 commands/user/month). See How to Add AI Autocomplete to a React Editor 2026 for full rate-limiting patterns.

When Neither Path Is Right

Two scenarios where you should skip AI slash commands:

1. Highly Structured Content Editors

Code editors, formula editors, math editors. Slash commands don't fit because / has syntactic meaning. Use command palettes (Cmd+K) instead.

2. Very Short Content

Single-line inputs, search boxes, comment fields under 100 characters. AI slash commands are overhead for content that short. Users don't need "Improve writing" on a 20-word comment.

Frequently Asked Questions

1. What's the best React editor for AI slash commands in 2026?

For most React apps in 2026, Eddyter delivers the strongest slash command experience — GPT-5, Claude Sonnet 5, Haiku 4.5, and Gemini 3 built in, 10-minute setup, $12-$59/mo flat pricing, custom commands via config, and native support across 7 frameworks (React, Next.js, Vue 3, Angular 17-20, Svelte 4/5, Laravel, Vanilla JS). For custom slash command UX with total control, Lexical + Vercel AI SDK is the strongest path (2-3 weeks engineering, free MIT foundation). TipTap + Suggestion extension is the second choice for custom builds if you're already on TipTap. Skip building slash commands from scratch on Slate — the ecosystem support is thinner.

2. How long does it take to build AI slash commands from scratch?

Building production-quality AI slash commands for a React editor takes 2-3 weeks of senior engineering time in 2026. This covers: slash command list design (2-3 days), menu UI with fuzzy filter and keyboard navigation (3-5 days), editor integration for your specific editor (3-5 days for Lexical/TipTap, 5-7 days for Slate), AI streaming integration with Vercel AI SDK (3-4 days), undo/redo handling (2-3 days), rate limiting and cost controls (2-3 days), and QA/edge case handling (3-5 days). Total 3-year cost including engineering and AI infrastructure: $27,600-$72,600. Eddyter delivers equivalent slash commands in 10 minutes at $2,124 over 3 years.

3. Can I add slash commands to an existing rich text editor (Lexical, TipTap, Slate)?

Yes, but the integration pattern differs per editor. Lexical requires a custom plugin with KEY_DOWN_COMMAND registration and custom menu positioning (~1 week for slash trigger, ~1 week for AI streaming). TipTap has the @tiptap/suggestion package that handles positioning and filtering — faster integration (~3-5 days for slash trigger, ~1 week for AI streaming). Slate requires custom keyboard event handling and manual menu positioning (~1-2 weeks). Draft.js is deprecated in 2026 — migrate to Lexical instead. For teams wanting to skip the per-editor integration work, Eddyter is built on Lexical with slash commands included natively — 10-minute setup with no custom code required.

4. What AI models work best for slash commands?

Different slash commands benefit from different models. Claude Sonnet 5 produces the most natural continuations for prose actions ("Continue writing", "Improve writing"). GPT-5 works best for creative actions ("Make more engaging", "Add examples"). Claude Haiku 4.5 is the cost-optimized choice for simple actions ("Fix grammar", "Make shorter") — 10x cheaper than Sonnet 5 with 80% of the quality for simple tasks. Gemini 3 excels at factual actions ("Add sources", "Verify claims"). Eddyter supports all four out of the box with per-command model overrides — assign Haiku 4.5 to fast tasks and Sonnet 5 to complex tasks. For custom builds, start with GPT-5 and add multi-model logic only if command variety justifies the complexity.

5. How do I prevent slash command AI from being abused?

Production slash commands need three cost-control layers: (1) Per-user rate limiting — 30 commands/minute/user via Upstash Redis or similar (prevents runaway requests). (2) Monthly quotas — 500-2,000 commands/user/month depending on your plan tier. (3) Model tiering — route simple commands to Haiku 4.5 (~10x cheaper than Sonnet 5), only use Sonnet 5 or GPT-5 for complex commands. Additional protections: max token limit of 300-800 per command response, context windowing to 500-1500 tokens, and IP-based bot detection. Eddyter handles all layers automatically. For custom builds, plan 1-2 weeks of engineering for cost-control infrastructure alone.

6. What's the difference between slash commands and AI autocomplete?

Different UX patterns, different user actions. Slash commands are user-initiated — type /, pick action, AI runs. Best for discrete actions (translate, summarize, improve). AI autocomplete is automatic — as user types, AI suggests continuations in ghost text. Best for continuous drafting. Modern React editors in 2026 typically ship both patterns. Eddyter supports both natively via aiOptions.slashCommands and aiOptions.autocomplete flags — enable one, the other, or both depending on your product's needs. For the autocomplete pattern implementation, see How to Add AI Autocomplete to a React Editor 2026.

7. Can I customize the slash command menu with my own commands?

Yes, on both custom builds and Eddyter. Custom Lexical/TipTap builds — add new commands to your slashCommands array with prompt, icon, label, and description. Menu updates automatically. Eddyter — pass customCommands array in aiOptions. Custom commands appear alongside built-in commands with the same UX. Common custom command patterns: brand voice rewriting (apply company style guide), legal review (flag risky claims), medical terminology (expand or explain), technical accuracy (verify code snippets), tone shifts (formal, casual, empathetic). Custom commands in Eddyter take 2-3 minutes to add via config. Custom commands in a custom build take 15-30 minutes to add per command.

8. What's the alternative to building custom AI slash commands?

The strongest managed alternative in 2026 is Eddyter — built on Meta's Lexical framework with slash commands included natively, supporting GPT-5, Claude Sonnet 5, Haiku 4.5, and Gemini 3 out of the box at $12-$59/mo flat pricing. Setup is a 10-minute React integration versus 2-3 weeks for custom builds. Eddyter also supports slash commands across 7 frameworks (React, Next.js, Vue 3, Angular 17-20, Svelte 4/5, Laravel, Vanilla JS) — most alternatives are React-only. Other managed options exist: TipTap AI Toolkit works but costs $49-$999/mo Cloud + $500+/mo AI add-on ($1,500+/mo combined). CKEditor 5 AI Assistant works for enterprise ($144-$864/mo Cloud + $99+/mo AI). For most React and Next.js teams in 2026, Eddyter delivers the strongest cost-to-quality ratio.

Ready to Ship AI Slash Commands?

Stop engineering menu UI, fuzzy search, keyboard navigation, streaming integration, undo handling, and rate limiting from scratch. Deploy Eddyter into your React or Next.js product today — AI slash commands with GPT-5, Claude Sonnet 5, Haiku 4.5, and Gemini 3 built in, $12-$59/mo flat pricing, unlimited users, 10-minute setup.

👉 Try Eddyter free at eddyter.com
📚 Read the docs
💰 See pricing
🎥 Watch the intro video | Watch the 30-min integration guide