# Initialize HAX in your project
hax init

# Add the rules context
hax add composer rules-context

import { RulesProvider, useRules, RulesModal } from "@/hax/composer/rules-context";

export function ChatWithRules() {
  const [showRulesModal, setShowRulesModal] = useState(false);

  return (
    <RulesProvider>
      <div className="chat-interface">
        <button onClick={() => setShowRulesModal(true)}>
          Manage Rules
        </button>
        <RulesModal
          open={showRulesModal}
          onOpenChange={setShowRulesModal}
        />
        {/* Chat interface */}
      </div>
    </RulesProvider>
  );
}