> ## Documentation Index
> Fetch the complete documentation index at: https://koreai.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Kore.ai Product Documentation

> Build and deploy AI agents at enterprise scale — quickly, securely, and flexibly.

export const HeroSection = () => {
  const canvasRef = useRef(null);
  useEffect(() => {
    const loadedRaf1 = requestAnimationFrame(() => {
      requestAnimationFrame(() => {
        document.documentElement.classList.add('kore-loaded');
      });
    });
    const canvas = canvasRef.current;
    if (!canvas) return () => cancelAnimationFrame(loadedRaf1);
    const hero = canvas.parentElement;
    const NODE_COUNT = 90;
    const CONNECT_DIST = 160;
    const MOUSE_RADIUS = 140;
    const MOUSE_FORCE = 1.2;
    const MAX_SPEED = 4;
    let ctx = null;
    let nodes = [];
    let raf = null;
    let paused = false;
    let started = false;
    let idleId = null;
    let timeoutId = null;
    const mouse = {
      x: -9999,
      y: -9999,
      over: false
    };
    function resize() {
      canvas.width = hero.offsetWidth;
      canvas.height = hero.offsetHeight;
    }
    function initNodes() {
      nodes = Array.from({
        length: NODE_COUNT
      }, () => {
        const x = Math.random() * canvas.width;
        const y = Math.random() * canvas.height;
        return {
          x,
          y,
          ox: x,
          oy: y,
          vx: (Math.random() - 0.5) * 0.5,
          vy: (Math.random() - 0.5) * 0.5
        };
      });
    }
    function isDark() {
      return document.documentElement.classList.contains('dark');
    }
    function draw() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      const dark = isDark();
      const nodeRgb = '92,200,58';
      const lineRgb = '92,200,58';
      const nodeAlpha = dark ? 0.8 : 0.65;
      const lineMaxAlpha = dark ? 0.42 : 0.32;
      for (const n of nodes) {
        if (mouse.over) {
          const dx = n.x - mouse.x;
          const dy = n.y - mouse.y;
          const dist = Math.sqrt(dx * dx + dy * dy);
          if (dist < MOUSE_RADIUS && dist > 0) {
            const force = (MOUSE_RADIUS - dist) / MOUSE_RADIUS * MOUSE_FORCE;
            n.vx += dx / dist * force;
            n.vy += dy / dist * force;
          }
        } else {
          n.vx += (n.ox - n.x) * 0.012;
          n.vy += (n.oy - n.y) * 0.012;
        }
        n.vx *= 0.92;
        n.vy *= 0.92;
        const speed = Math.sqrt(n.vx * n.vx + n.vy * n.vy);
        if (speed > MAX_SPEED) {
          n.vx = n.vx / speed * MAX_SPEED;
          n.vy = n.vy / speed * MAX_SPEED;
        }
        n.x += n.vx;
        n.y += n.vy;
        if (n.x < 0 || n.x > canvas.width) n.vx *= -1;
        if (n.y < 0 || n.y > canvas.height) n.vy *= -1;
      }
      for (let i = 0; i < nodes.length; i++) {
        for (let j = i + 1; j < nodes.length; j++) {
          const dx = nodes[i].x - nodes[j].x;
          const dy = nodes[i].y - nodes[j].y;
          const dist = Math.sqrt(dx * dx + dy * dy);
          if (dist < CONNECT_DIST) {
            const alpha = lineMaxAlpha * (1 - dist / CONNECT_DIST);
            ctx.strokeStyle = `rgba(${lineRgb},${alpha})`;
            ctx.lineWidth = 0.8;
            ctx.beginPath();
            ctx.moveTo(nodes[i].x, nodes[i].y);
            ctx.lineTo(nodes[j].x, nodes[j].y);
            ctx.stroke();
          }
        }
      }
      for (const n of nodes) {
        ctx.fillStyle = `rgba(${nodeRgb},${nodeAlpha})`;
        ctx.beginPath();
        ctx.arc(n.x, n.y, 2.5, 0, Math.PI * 2);
        ctx.fill();
      }
    }
    function loop() {
      if (!paused) draw();
      raf = requestAnimationFrame(loop);
    }
    function onMouseMove(e) {
      const rect = hero.getBoundingClientRect();
      mouse.x = e.clientX - rect.left;
      mouse.y = e.clientY - rect.top;
    }
    function onMouseEnter() {
      mouse.over = true;
    }
    function onMouseLeave() {
      mouse.over = false;
      mouse.x = -9999;
      mouse.y = -9999;
    }
    function onVisibility() {
      paused = document.hidden;
    }
    function onResize() {
      if (!started) return;
      resize();
      initNodes();
    }
    function startCanvas() {
      if (started) return;
      started = true;
      ctx = canvas.getContext('2d');
      resize();
      initNodes();
      loop();
      requestAnimationFrame(() => {
        canvas.classList.add('kore-canvas-ready');
      });
    }
    if (typeof window !== 'undefined' && ('requestIdleCallback' in window)) {
      idleId = window.requestIdleCallback(startCanvas, {
        timeout: 1500
      });
    } else {
      timeoutId = setTimeout(startCanvas, 200);
    }
    hero.addEventListener('mousemove', onMouseMove);
    hero.addEventListener('mouseenter', onMouseEnter);
    hero.addEventListener('mouseleave', onMouseLeave);
    window.addEventListener('resize', onResize);
    document.addEventListener('visibilitychange', onVisibility);
    return () => {
      cancelAnimationFrame(loadedRaf1);
      if (raf) cancelAnimationFrame(raf);
      if (idleId !== null && ('cancelIdleCallback' in window)) window.cancelIdleCallback(idleId);
      if (timeoutId !== null) clearTimeout(timeoutId);
      hero.removeEventListener('mousemove', onMouseMove);
      hero.removeEventListener('mouseenter', onMouseEnter);
      hero.removeEventListener('mouseleave', onMouseLeave);
      window.removeEventListener('resize', onResize);
      document.removeEventListener('visibilitychange', onVisibility);
    };
  }, []);
  return <div className="kore-hero" style={{
    position: 'relative',
    overflow: 'hidden',
    padding: '75px 48px 54px',
    textAlign: 'center'
  }}>
      <canvas ref={canvasRef} className="kore-hero-canvas" style={{
    position: 'absolute',
    inset: 0,
    width: '100%',
    height: '100%',
    zIndex: 0
  }} />
      <div className="kore-hero-overlay" style={{
    position: 'absolute',
    inset: 0,
    pointerEvents: 'none',
    zIndex: 1
  }} />
      <div className="kore-hero-bottom-fade" style={{
    position: 'absolute',
    bottom: 0,
    left: 0,
    right: 0,
    height: '90px',
    pointerEvents: 'none',
    zIndex: 1
  }} />

      <div style={{
    position: 'relative',
    zIndex: 2
  }}>

        <div className="ka1 kore-hero-badge" style={{
    display: 'inline-flex',
    alignItems: 'center',
    border: '1px solid',
    borderRadius: '100px',
    padding: '4px 14px',
    marginBottom: '24px',
    fontSize: '11px',
    fontWeight: 600,
    letterSpacing: '0.1em'
  }}>
          ✦ Enterprise AI Agent Platform
        </div>

        <div className="ka2">
          <h1 className="kore-h1 kore-hero-title" style={{
    fontSize: 'clamp(1.512rem, 2.835vw, 2.268rem)',
    fontWeight: 700,
    lineHeight: 1.08,
    margin: '0 0 20px',
    textWrap: 'balance'
  }}>
            Kore.ai Product Documentation
          </h1>
        </div>

        <div className="ka3">
          <p className="kore-subtext" style={{
    fontSize: '1.05rem',
    maxWidth: '480px',
    margin: '0 auto 0',
    lineHeight: 1.6
  }}>
            Build and deploy AI agents at enterprise scale — quickly, securely, and flexibly.
          </p>
        </div>

      </div>
    </div>;
};

export const IconCPU = () => <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    <rect x="4" y="4" width="16" height="16" rx="2" /><rect x="9" y="9" width="6" height="6" />
    <path d="M15 2v2M15 20v2M9 2v2M9 20v2M2 15h2M2 9h2M20 15h2M20 9h2" />
  </svg>;

export const IconBriefcase = () => <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    <rect width="20" height="14" x="2" y="7" rx="2" /><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16" />
  </svg>;

export const IconHeadphones = () => <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    <path d="M3 14h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-7a9 9 0 0 1 18 0v7a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3" />
  </svg>;

export const IconWorkflow = () => <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    <rect x="3" y="3" width="6" height="6" rx="1" /><rect x="15" y="15" width="6" height="6" rx="1" /><rect x="15" y="3" width="6" height="6" rx="1" />
    <path d="M6 9v3a3 3 0 0 0 3 3h6M18 9v3" />
  </svg>;

export const IconUsers = () => <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" /><circle cx="9" cy="7" r="4" />
    <path d="M22 21v-2a4 4 0 0 0-3-3.87" /><path d="M16 3.13a4 4 0 0 1 0 7.75" />
  </svg>;

export const IconUserPlus = () => <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" /><circle cx="9" cy="7" r="4" />
    <line x1="19" y1="8" x2="19" y2="14" /><line x1="22" y1="11" x2="16" y2="11" />
  </svg>;

export const IconMonitor = () => <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    <rect x="2" y="3" width="20" height="14" rx="2" /><line x1="8" y1="21" x2="16" y2="21" /><line x1="12" y1="17" x2="12" y2="21" />
  </svg>;

export const IconActivity = () => <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    <polyline points="22 12 18 12 15 21 9 3 6 12 2 12" />
  </svg>;

export const IconShoppingBag = () => <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    <path d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z" /><line x1="3" y1="6" x2="21" y2="6" /><path d="M16 10a4 4 0 0 1-8 0" />
  </svg>;

export const IconLandmark = () => <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    <line x1="3" y1="22" x2="21" y2="22" /><line x1="6" y1="18" x2="6" y2="11" />
    <line x1="10" y1="18" x2="10" y2="11" /><line x1="14" y1="18" x2="14" y2="11" />
    <line x1="18" y1="18" x2="18" y2="11" /><polygon points="12 2 20 7 4 7" />
  </svg>;

export const IconMessageCircle = () => <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
  </svg>;

export const IconBookOpen = () => <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    <path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z" /><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z" />
  </svg>;

export const IconLifeBuoy = () => <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    <circle cx="12" cy="12" r="10" /><circle cx="12" cy="12" r="4" />
    <line x1="4.93" y1="4.93" x2="9.17" y2="9.17" /><line x1="14.83" y1="14.83" x2="19.07" y2="19.07" />
    <line x1="14.83" y1="9.17" x2="19.07" y2="4.93" /><line x1="4.93" y1="19.07" x2="9.17" y2="14.83" />
  </svg>;

export const IconAgents = () => <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    <path d="M12 8V4H8" /><rect width="16" height="12" x="4" y="8" rx="2" />
    <path d="M2 14h2M20 14h2M15 13v2M9 13v2" />
  </svg>;

export const IconTools = () => <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    <path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z" />
  </svg>;

export const IconSearchData = () => <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    <circle cx="11" cy="11" r="8" /><path d="m21 21-4.35-4.35" />
  </svg>;

export const IconModelHub = () => <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    <ellipse cx="12" cy="5" rx="9" ry="3" /><path d="M3 5v14a9 3 0 0 0 18 0V5" />
    <path d="M3 12a9 3 0 0 0 18 0" />
  </svg>;

export const IconPromptStudio = () => <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
    <path d="M8 10h8M8 14h5" />
  </svg>;

export const IconEvaluation = () => <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    <path d="M3 3v18h18" /><path d="m19 9-5 5-4-4-3 3" />
  </svg>;

export const IconShield = () => <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
  </svg>;

export const IconObservability = () => <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    <path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7z" /><circle cx="12" cy="12" r="3" />
  </svg>;

export const IconStar = () => <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    <path d="M12 2l2 6 6 2-6 2-2 6-2-6-6-2 6-2z" />
  </svg>;

export const CapabilityTile = ({href, icon, title, description}) => <a href={href} className="kore-cap-tile">
    <div className="kore-cap-tile-header">
      <div className="kore-icon-chip">{icon}</div>
      <div className="kore-cap-tile-title">{title}</div>
      <svg className="kore-cap-tile-arrow" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14M12 5l7 7-7 7" /></svg>
    </div>
    <p className="kore-cap-tile-desc">{description}</p>
  </a>;

export const SolutionCard = ({href, icon, title, description}) => <a href={href} className="kore-sol-card">
    <div style={{
  display: 'flex',
  alignItems: 'center',
  gap: '10px'
}}>
      <div className="kore-icon-chip" style={{
  width: '36px',
  height: '36px'
}}>{icon}</div>
      <div className="kore-sol-card-title" style={{
  flex: 1
}}>{title}</div>
      <svg className="kore-sol-card-arrow" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--kore-accent)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{
  opacity: 0,
  flexShrink: 0,
  transition: 'opacity 0.2s cubic-bezier(0.22,0.6,0.36,1), transform 0.2s cubic-bezier(0.22,0.6,0.36,1)'
}}><path d="M5 12h14M12 5l7 7-7 7" /></svg>
    </div>
    <p className="kore-sol-card-desc">{description}</p>
  </a>;

export const ResourceItem = ({href, icon, title, description, cta}) => <a href={href} className="kore-resource-item" target="_blank" rel="noopener noreferrer">
    <div className="kore-resource-header">
      <div className="kore-resource-icon">{icon}</div>
      <div className="kore-resource-title">{title}</div>
    </div>
    <p className="kore-resource-desc">{description}</p>
    <span className="kore-resource-link">
      {cta}
      <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" /><polyline points="15 3 21 3 21 9" /><line x1="10" y1="14" x2="21" y2="3" /></svg>
    </span>
  </a>;

export const SectionLabel = ({children}) => <div style={{
  display: 'flex',
  alignItems: 'center',
  gap: '14px',
  marginBottom: '24px'
}}>
    <span className="kore-label" style={{
  fontSize: '11px',
  fontWeight: 600,
  textTransform: 'uppercase',
  letterSpacing: '0.1em',
  color: '#999999',
  whiteSpace: 'nowrap'
}}>
      {children}
    </span>
    <div className="kore-section-divider" style={{
  flex: 1,
  height: '1px',
  background: '#CCCCCC'
}} />
  </div>;

export const ProductCard = ({href, icon, title, description, cardClass}) => <a href={href} className={`kore-card${cardClass ? ' ' + cardClass : ''}`} style={{
  display: 'flex',
  flexDirection: 'column',
  gap: '12px',
  borderRadius: '12px',
  border: '1px solid var(--kore-border)',
  padding: 'var(--kore-card-pad)',
  textDecoration: 'none',
  boxShadow: '0 1px 4px rgba(0,0,0,0.04)'
}}>
    <div style={{
  display: 'flex',
  alignItems: 'center',
  gap: '12px'
}}>
      <div className="kore-icon-chip">{icon}</div>
      <div className="kore-card-title" style={{
  fontWeight: 600,
  fontSize: 'var(--kore-card-title)',
  color: 'var(--kore-text)',
  flex: 1
}}>
        {title}
      </div>
      <svg className="kore-card-arrow" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--kore-accent)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{
  opacity: 0,
  flexShrink: 0,
  transition: 'opacity 0.2s cubic-bezier(0.22,0.6,0.36,1), transform 0.2s cubic-bezier(0.22,0.6,0.36,1)'
}}><path d="M5 12h14M12 5l7 7-7 7" /></svg>
    </div>
    <p className="kore-card-desc" style={{
  fontSize: 'var(--kore-card-desc)',
  color: 'var(--kore-muted)',
  lineHeight: 'var(--kore-body-lh)',
  margin: 0
}}>
      {description}
    </p>
  </a>;

export const CardGrid = ({cols, children}) => <div className={`kore-grid kore-grid-${cols}`}>{children}</div>;

export const DocsFooter = () => <div className="kore-footer" style={{
  marginTop: '0',
  borderTop: '1px solid #CCCCCC',
  paddingTop: '32px',
  paddingBottom: '32px',
  display: 'flex',
  flexWrap: 'wrap',
  alignItems: 'center',
  justifyContent: 'space-between',
  gap: '16px',
  fontSize: '13px',
  color: '#666666'
}}>
    <span>© 2026 Kore.ai, Inc.</span>
    <div style={{
  display: 'flex',
  flexWrap: 'wrap',
  gap: '20px',
  alignItems: 'center',
  justifyContent: 'center'
}}>
      <a href="https://kore.ai/acceptable-use-policy/" style={{
  color: '#666666',
  textDecoration: 'none'
}}>Acceptable Use Policy</a>
      <a href="https://kore.ai/terms-of-service/" style={{
  color: '#666666',
  textDecoration: 'none'
}}>Terms of Service</a>
      <a href="https://kore.ai/privacy-policy/" style={{
  color: '#666666',
  textDecoration: 'none'
}}>Privacy Policy</a>
      <a href="https://kore.ai/cookie-policy/" style={{
  color: '#666666',
  textDecoration: 'none'
}}>Cookie Policy</a>
    </div>
    <div style={{
  display: 'flex',
  alignItems: 'center',
  gap: '16px'
}}>
      <a href="https://github.com/Koredotcom" aria-label="GitHub" style={{
  color: '#666666',
  textDecoration: 'none'
}}>
        <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0C5.374 0 0 5.373 0 12c0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23A11.509 11.509 0 0 1 12 5.803c1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576C20.566 21.797 24 17.3 24 12c0-6.627-5.373-12-12-12z" /></svg>
      </a>
      <a href="https://www.linkedin.com/company/kore-inc/" aria-label="LinkedIn" style={{
  color: '#666666',
  textDecoration: 'none'
}}>
        <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 0 1-2.063-2.065 2.064 2.064 0 1 1 2.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z" /></svg>
      </a>
      <a href="https://www.facebook.com/KoreDotAI/" aria-label="Facebook" style={{
  color: '#666666',
  textDecoration: 'none'
}}>
        <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z" /></svg>
      </a>
    </div>
  </div>;

<div className="kore-page">
  <HeroSection />

  <div className="kore-ap-bleed">
    <div className="kore-ap-inner">
      <div className="kore-ap-card">
        <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
          <div className="kore-icon-chip">
            <IconCPU />
          </div>

          <div className="kore-ap-title" style={{ flex: 1 }}>Kore.ai Agent Platform</div>

          <a href="/agent-platform/">
            <svg className="kore-ap-card-arrow" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--kore-accent)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ opacity: 0, flexShrink: 0, transition: 'opacity 0.2s cubic-bezier(0.22,0.6,0.36,1), transform 0.2s cubic-bezier(0.22,0.6,0.36,1)' }}>
              <path d="M5 12h14M12 5l7 7-7 7" />
            </svg>
          </a>
        </div>

        <p className="kore-ap-desc" style={{ marginBottom: '4px', maxWidth: 'none' }}>\{ **Artemis** } the next-generation Kore.ai Agent Platform for building, deploying, and governing programmable agent systems at enterprise scale with certainty:</p>

        <div className="kore-cap-grid">
          <CapabilityTile href="/agent-platform/dual-brain-architecture" icon={<IconCPU />} title="Dual-Brain Architecture" description="A split-brain runtime: an agentic engine that reasons and a deterministic validator, running in parallel over a shared spine." />

          <CapabilityTile href="/agent-platform/abl" icon={<IconWorkflow />} title="ABL™ — Agent Blueprint Language" description="One DSL for agents, flows, tools, and policies. Compile-time validated, version-controlled, AI-programmable." />

          <CapabilityTile href="/agent-platform/arch-ai" icon={<IconStar />} title="Arch™ AI — The AI That Builds AI" description="A multi-agent system that drives the full lifecycle: interviews stakeholders, designs topology, writes ABL, learns from production." />

          <CapabilityTile href="/agent-platform/orchestrate" icon={<IconAgents />} title="Multi-Agent Orchestration" description="Compose specialists with HANDOFF, DELEGATE, FAN_OUT, and A2A — typed payloads, governed handoffs, unified traces." />

          <CapabilityTile href="/agent-platform/tools-overview" icon={<IconTools />} title="Tools & Integrations" description="Five tool types (HTTP, Code, KB, Workflow, MCP) under one Auth Profile — agents reach every enterprise system without glue code." />

          <CapabilityTile href="/agent-platform/knowledge" icon={<IconSearchData />} title="Search & Knowledge AI" description="RAG, vector search, knowledge graph, and reranking — with intelligent pipelines that chunk, embed, and enrich automatically." />

          <CapabilityTile href="/agent-platform/evals" icon={<IconEvaluation />} title="Evals, Quality & Observability" description="Persona × Scenario evaluation matrices, five-dimension quality monitoring, and 200+ trace events per session. Validated trust, not vibes." />

          <CapabilityTile href="/agent-platform/safety-and-guardrails" icon={<IconShield />} title="Enterprise Foundation" description="SSO, RBAC, KMS (BYOK), guardrails, PII detection, audit logging — SOC-2, GDPR, FedRAMP ready. Deploy SaaS, on-prem, VPC." />
        </div>
      </div>
    </div>
  </div>

  <div className="kore-resources-bleed">
    <div className="kore-resources-inner">
      <div style={{ marginBottom: '36px' }}>
        <div className="kore-section-eyebrow" style={{ color: '#5CC83A' }}>Resources</div>
        <h2 className="kore-section-title" style={{ color: '#F1F5F9' }}>Learn, Connect, Get Help</h2>
      </div>

      <div className="kore-resources-grid">
        <ResourceItem href="https://academy.kore.ai" icon={<IconBookOpen />} title="Academy" description="In-depth training courses on Kore.ai products, certifications, and feature deep-dives." cta="Browse Courses" />

        <ResourceItem href="https://community.kore.ai" icon={<IconMessageCircle />} title="Community" description="Search threads, post questions, and get answers from Kore.ai users and experts." cta="Join the Community" />

        <ResourceItem href="https://support.kore.ai" icon={<IconLifeBuoy />} title="Support" description="Open a ticket or browse the knowledge base for technical help from our team." cta="Get Support" />
      </div>
    </div>
  </div>

  <div className="kore-footer-bleed">
    <div className="kore-footer-inner">
      <DocsFooter />
    </div>
  </div>
</div>
