/*********************************************************
* Tokens
*/
.namespace {
  opacity: 0.7;
}

.token.doctype .token.doctype-tag {
  /* No direct equivalent, using similar color */
  color: #79c0ff;
}

.token.doctype .token.name {
  /* No direct equivalent, using similar color */
  color: #d2a8ff;
}

.token.comment,
.token.prolog {
  color: #8b949e;
}

.token.punctuation,
.language-html .language-css .token.punctuation,
.language-html .language-javascript .token.punctuation {
  color: #c9d1d9; /* From .hljs-subst */
  
}

.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.constant,
.token.symbol,
.token.inserted,
.token.unit {
  color: #79c0ff;
}

.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.deleted {
  color: #79c0ff; /* From .hljs-string, .hljs-regexp */
}

.token.plain-text {
  color: #fafafa; /* No direct equivalent, using a light color */
}

.language-css .token.string.url {
  text-decoration: underline;
}

.token.operator,
.token.entity {
  color: #79c0ff;
}

.token.operator.arrow {
  /* No direct equivalent, using similar color */
  color: #ff7b72;
}

.token.atrule {
  color: #79c0ff;
}

.token.atrule .token.rule {
  /* No direct equivalent, using similar color */
  color: #d2a8ff;
}

.token.atrule .token.url {
  color: #79c0ff;
}

.token.atrule .token.url .token.function {
  /* No direct equivalent, using similar color */
  color: #79c0ff;
}

.token.atrule .token.url .token.punctuation {
  /* No direct equivalent, using similar color */
  color: #d4d4d4;
}

.token.keyword {
  color: #ff7b72;
}

.token.keyword.module,
.token.keyword.control-flow {
  /* No direct equivalent, using similar color */
  color: #c586c0;
}

.token.function,
.token.function .token.maybe-class-name {
  color: #d2a8ff;
}

.token.regex {
  color: #a5d6ff;
}

.token.important {
  color: #ff7b72;
}

.token.italic {
  font-style: italic;
  color: #c9d1d9; /* Using .hljs-emphasis color */
}

.token.constant {
  color: #79c0ff;
}

.token.class-name,
.token.maybe-class-name {
  color: #d2a8ff;
}

.token.console {
  /* No direct equivalent, using similar color */
  color: #9cdcfe;
}

.token.parameter {
  color: #79c0ff;
}

.token.interpolation {
  /* No direct equivalent, using similar color */
  color: #79c0ff;
}

.token.punctuation.interpolation-punctuation {
  /* No direct equivalent, using similar color */
  color: #569cd6;
}

.token.boolean {
  color: #ff7b72;
}

.token.property,
.token.variable,
.token.imports .token.maybe-class-name,
.token.exports .token.maybe-class-name {
  color: #79c0ff;
}

.token.selector {
  color: #7ee787;
}

.token.escape {
  color: #7ee787; /* Same as .hljs-selector-tag */
}

.token.tag {
  color: #7ee787;
}

.token.tag .token.punctuation {
  color: #808080;
}

.token.cdata {
  color: #808080;
}

.token.attr-name {
  color: #79c0ff;
}

.token.attr-value,
.token.attr-value .token.punctuation {
  color: #a5d6ff; /* Same as .hljs-string */
}

.token.attr-value .token.punctuation.attr-equals {
  color: #d4d4d4;
}

.token.entity {
  color: #79c0ff;
}

.token.namespace {
  color: #7ee787;
}

/* No direct mapping in provided theme for .token.operator */
.token.operator {
  color: #94a3b8;
}

/*********************************************************
* Language Specific
*/

pre[class*='language-javascript'],
code[class*='language-javascript'],
pre[class*='language-jsx'],
code[class*='language-jsx'],
pre[class*='language-typescript'],
code[class*='language-typescript'],
pre[class*='language-tsx'],
code[class*='language-tsx'] {
  color: #79c0ff; /* Same as .hljs-attr */
}

pre[class*='language-css'],
code[class*='language-css'] {
  color: #a5d6ff; /* Same as .hljs-string */
}

pre[class*='language-html'],
code[class*='language-html'] {
  color: #c9d1d9; /* Using .hljs-subst color */
}

.language-regex .token.anchor {
  /* No direct equivalent, using similar color */
  color: #dcdcaa;
}

.language-html .token.punctuation {
  color: #808080;
}

/* Used for API response */
span.language-json .token.punctuation {
  color: #4b5563;
}

:is(.dark span.language-json .token.punctuation) {
  color: #d1d5db;
}

span.language-json .token.property {
  color: #0284c7;
}

:is(.dark span.language-json .token.property) {
  color: 9cdcfe;
}

span.language-json .token.string {
  color: #d97706;
}

:is(.dark span.language-json .token.string) {
  color: #ce9178;
}

span.language-json .token.number {
  color: #16a34a;
}

:is(.dark span.language-json .token.number) {
  color: #b5cea8;
}

.line-highlight.line-highlight {
  background: #f7ebc6;
  box-shadow: inset 5px 0 0 #f7d87c;
  z-index: 0;
}

function loadScript(src, onload) {
    if (typeof window === 'undefined') return
    if (typeof src !== 'string') {
        console.error('src must be a string')
        return
    }

    const script = document.createElement('script')
    script.src = src
    script.async = true

    if (typeof onload === 'function') {
        script.addEventListener('load', onload)
    }

    document.head.appendChild(script)
    return script
}

// function loadCommonRoom() {
//     const url = 'https://cdn.cr-relay.com/v1/site/5c7cdf16-fbc0-4bb8-b39e-a8c6136687b9/signals.js'
//     const init = () => {
//         window.signals = Object.assign(
//             [],
//             ['page', 'identify', 'form'].reduce(function (acc, method) {
//                 acc[method] = function () {
//                     signals.push([method, arguments])
//                     return signals
//                 }
//                 return acc
//             }, {})
//         )
//     }

//     loadScript(url, init)
// }

function loadAmplitude() {
    // TODO: Move the key and url to an env var in mintlify
    const amplitudeKey = 'c97dd2acbf306ab7bf54aca0aeb7ffa1'
    const amplitudeUrl = 'https://api2.amplitude.com/2/httpapi'

    const addUrl = (event) => {
        const deviceId = amplitude.getDeviceId()
        const { href = '' } = event.target
        const url = new URL(href)
        url.searchParams.set('deviceId', deviceId)
        event.target.href = url.toString()
    }

    const removeUrl = (event) => {
        const { href = '' } = event.target
        const url = new URL(href)
        url.searchParams.delete('deviceId')
        event.target.href = url.toString()
    }

    const urls = [
        'https://app.prefect.cloud',
        'https://prefect.io',
    ]

    const selector = urls.map((url) => `a[href^="${url}"]`).join(',')

    const addDeviceIdToAppLinks = () => {
        const elements = document.querySelectorAll(selector)

        elements.forEach((element) => {
            element.addEventListener('mouseenter', addUrl)
            element.addEventListener('mouseleave', removeUrl)
            element.addEventListener('focus', addUrl)
            element.addEventListener('blur', removeUrl)
            element.addEventListener('touchstart', addUrl)
            element.addEventListener('touchend', removeUrl)
        })
    }

    function trackPageView() {
        amplitude.track(
            'Page View: Docs New',
            {
                'url': window.href,
                'title': document.title,
                'referrer': document.referrer,
                'path': window.location.pathname,
                'source': 'controlflow_docs',
                'source_detail': 'controlflow_docs'
            }
        )
    }

    const init = () => {
        amplitude.init(amplitudeKey, undefined, {
            useBatch: true,
            serverUrl: amplitudeUrl,
            attribution: {
                disabled: false,
                trackNewCampaigns: true,
                trackPageViews: true,
                resetSessionOnNewCampaign: true,
            },
            defaultTracking: {
                pageViews: {
                    trackOn: function () { return true },
                    eventType: "Page View: ControlFlow Docs",
                    trackHistoryChanges: "all",
                },
                sessions: false,
                formInteractions: true,
                fileDownloads: true,
            },
        })

        setTimeout(addDeviceIdToAppLinks)
        setTimeout(trackPageView)
    }

    const url = 'https://cdn.amplitude.com/libs/analytics-browser-2.8.1-min.js.gz'
    loadScript(url, init)
}


// loadCommonRoom()
loadAmplitude()


Code

Community

ControlFlow

Examples

AI Glossary

Library

Welcome

Installation & Setup

Build your first agentic workflow in less than a minute.

Quickstart

Overview

Core concepts

Tasks

The intelligent workers in your AI workflows.

Agents

Orchestrating tasks and agents in your AI workflows.

Flows

Control task execution and manage how agents collaborate.

Running tasks

Validate task outputs with structured result types.

Task Results

Give agents new abilities with custom tools.

Tools

Interactivity

Manage task dependencies and subtasks to create complex workflows.

Dependencies

Provide ad-hoc guidance to agents without modifying tasks.

Instructions

AI Planning

Managing History

Settings

ControlFlow supports a variety of LLMs and model providers.

Configuring LLM models

Configuring the Default Agent

Build complex workflows by indicating relationships between tasks.

Dependent Tasks

Provide tools to expand agent capabilities.

Custom tools

Leverage different LLM models for specific tasks within a workflow.

Multi-LLM Workflows

Create isolated execution environments within your workflows.

Private flows

Use GPT-4o mini to quickly build a sentiment classifier.

Sentiment Classifier

Classify news headlines into predefined categories.

Headline Categorization

Extract named entities from text using ControlFlow.

Named Entity Recognition

Generate concise summaries of longer texts.

Text Summarization

Use ControlFlow to efficiently standardize multiple place names into consistent postal addresses.

Standardize Place Names

Use ControlFlow to generate test data based on a template.

Generate User Profiles

Use ControlFlow to translate text from one language to another.

Text Translation

Use ControlFlow to anonymize sensitive information in text.

Data Anonymization

Use ControlFlow to generate natural language explanations of code snippets.

Code Explanation

Create an engaging AI tutor for language learning using ControlFlow

Interactive Language Tutor

Play rock, paper, scissors against an AI... without letting it cheat.

Rock, Paper, Scissors

Create an AI agent that acts as a software engineer, taking user input and generating code based on the requirements.

ControlFlow Features

Core LLM Operations

Agentic Flows

Library

Rock, Paper, Scissors

Customer Call Routing

Software Engineer

Don't Panic.