newOS for Developers

useFlowSettings

hook562 lines

Manages AI flow configuration for agents, including locality, web search, swarm mode, reasoning, and media generation settings.

Source Path

apps/web/hooks/useFlowSettings.tsx

Package

@newos/web

Exports

useFlowSettings()

Main hook returning flow state and controls.

useFlowSettings(): {
  // State
  isSwarm: boolean;              // Swarm mode enabled
  isWebSearch: boolean;          // Web search enabled
  locality: string;              // "local" | "global"
  reasoning: boolean;            // Extended reasoning enabled
  media: boolean;                // Media generation enabled
  manual: boolean;               // Manual mode (no AI)
  
  // Actions
  toggleSwarm: () => void;
  toggleWebSearch: () => void;
  toggleLocality: () => void;
  toggleReasoning: () => void;
  toggleMedia: () => void;
  setManual: (v: boolean) => void;
  
  // Utilities
  asQueryString: () => string;   // Serialize settings to URL params
  FlowSettingsComponent: React.FC;  // UI component for settings
}

FlowSettingsProvider

Context provider for flow settings. Wrap your app/component tree with this.

FlowSettingsContext

React Context for accessing/providing flow settings.

Flow Options

Setting	Default	Description
isSwarm	false	Enable multi-agent swarm coordination
isWebSearch	false	Enable web search in AI responses
locality	"global"	Search scope: local (folder) or global
reasoning	false	Show extended reasoning/chain-of-thought
media	false	Enable image/video generation
manual	false	No AI processing, human-only mode

Key Features

FlowSettingsComponent

Pre-built UI component with toggle buttons for all settings. Uses icons and animated transitions for each option.

URL Serialization

asQueryString() converts settings to URL params like?swarm=true&web=true&reasoning=true. Used for sharing.

Context-Based

Settings are shared via React Context. Components anywhere in the tree can access and modify settings.

Subscription Gating

Some features (like Swarm) require premium subscription. Hook integrates with useSubscriberInfo for gating.

Usage Example

// In your app root or layout
import { FlowSettingsProvider } from "@/hooks/useFlowSettings";

function App() {
  return (
    <FlowSettingsProvider>
      <ChatPage />
    </FlowSettingsProvider>
  );
}

// In a component
import { useFlowSettings } from "@/hooks/useFlowSettings";

function ChatInput() {
  const { 
    isSwarm, 
    toggleSwarm, 
    FlowSettingsComponent,
    asQueryString 
  } = useFlowSettings();

  const handleSubmit = () => {
    const flowParams = asQueryString();
    createPost({ content, flow: flowParams });
  };

  return (
    <div>
      <FlowSettingsComponent />
      <button onClick={handleSubmit}>Send</button>
    </div>
  );
}

Edge Cases & Gotchas

Provider Required — Must wrap component tree withFlowSettingsProvider. Hook throws if used outside provider.

Mutual Exclusivity — Some options are mutually exclusive. E.g., enabling manual disables AI features.

FlowToggleButton Usage — Internal useFlowToggleButton hook manages individual toggle state and animations.

Large File Size — This file is 562 lines due to embedded FlowSettingsComponent UI. Consider where you import from.

ChatInput FolderCreate post.ts (createPostMultiple)useSubscriberInfo

View source on GitHub →