AI Pattern Architecture

Defining the manifestation of artificial intelligence within GateFlow. Emphasis on premium Orchid flows and cognitive agency.

Install
pnpm add @gateflow/ai

Cognitive Depth

AI surfaces exist on a superior cognitive layer, utilizing deep translucency and Orchid accents (--gf-color-ai-accent).

Reactive Motion

Content never "pops". Use 0.4s spring transitions with rhythmic staggering for an organic cognitive feel.

Actionable Intelligence

Tool calls and system operations are encapsulated in interactive cards that signal execution status and outcomes.

Cognition Lab

Test the GateFlow AI interaction model below. Observe how text blends with tool invocations under the Orchid Glow protocol.

Composition

Assembly patterns for building AI interfaces within the monorepo.

1. Cognitive Message Flow

AI messages use specific glassmorphism tokens and rhythmic entry animations. Always use MessageAvatar for clear agency.

import { MessageAvatar, StreamingIndicator } from '@gateflow/ai';

export function AIChat() {
  return (
    <div className="flex gap-4">
      <MessageAvatar role="assistant" />
      <div className="bg-[var(--gf-color-ai-surface)] p-4 rounded-3xl border border-white/10 shadow-ai-glow">
        <p>Processing your request...</p>
        <StreamingIndicator variant="pulse" className="mt-2" />
      </div>
    </div>
  );
}

2. Autonomous Tool Invocation

Tool calls are encapsulated primitives that signal execution status. They should be used for all background operations.

import { ToolCallCard } from '@gateflow/ai';

<ToolCallCard 
  name="provision_lane"
  status="running" // 'running' | 'success' | 'error'
  arguments={{ lane_id: 'G-42' }}
  collapsible={true}
/>

Cognitive Boundaries

AI elements must remain distinct from human-operated UI. Never substitute--ds-primary-accentfor AI actions. Intelligence always flows through the "Orchid" channel to maintain clarity of agency in the workspace.