# Initialize HAX in your project
agntcy-hax init

# Add the composer system
agntcy-hax add composer chat-commands

import { CommandRegistryProvider, useChatCommands, CommandSuggestions, CommandHints } from "@/hax/composer/chat-commands";
export function EnhancedChat() {
  const { commandType, showSuggestions, detectCommand } = useChatCommands();
  return (
    <CommandRegistryProvider>
      <div className="chat-interface">
        <CommandHints showSuggestions={showSuggestions} />
        <textarea
          onChange={(e) => detectCommand(e.target.value, e.target.selectionStart)}
        />
        <CommandSuggestions
          showSuggestions={showSuggestions}
          commandType={commandType}
        />
      </div>
    </CommandRegistryProvider>
  );
}