Implementation:FlowiseAI Flowise APICodeDialog Code Generation

Attribute	Value
Page Name	APICodeDialog_Code_Generation
Workflow	Chatbot_Deployment
Repository	FlowiseAI/Flowise
Type	Pattern Doc
Domain	API Integration, Code Generation, Developer Experience
Source	packages/ui/src/views/chatflows/APICodeDialog.jsx:L1-961
Last Updated	2026-02-12 14:00 GMT

Overview

Client-side code generation dialog component that produces ready-to-use API integration code in multiple programming languages (cURL, Python, JavaScript) and embed variants. This is a Pattern Doc -- the code generation itself makes no API call; it interpolates chatflow-specific values into template strings. The dialog does make auxiliary API calls to fetch API keys, streaming status, and configurable parameters.

Code Reference

Source Location

File: packages/ui/src/views/chatflows/APICodeDialog.jsx, lines 1-961 (entire component)

Pattern Interface

const APICodeDialog = ({ show, dialogProps, onCancel }) => { ... }

Prop	Type	Description
`show`	`boolean`	Whether the dialog is visible
`dialogProps`	`object`	Contains `chatflowid`, `chatflowApiKeyId`, `title`, `isFormDataRequired`, `isSessionMemory`, `isAgentCanvas`, `isAgentflowV2`
`onCancel`	`function`	Callback to close the dialog

Import

The component is used in CanvasHeader.jsx:

import APICodeDialog from './APICodeDialog'

Internal API Calls

While code generation is client-side, the dialog makes these auxiliary API calls:

import apiKeyApi from '@/api/apikey'
import chatflowsApi from '@/api/chatflows'
import configApi from '@/api/config'
import variablesApi from '@/api/variables'

// Fetch all API keys for the dropdown selector
const getAllAPIKeysApi = useApi(apiKeyApi.getAllAPIKeys)

// Update chatflow when API key is selected
const updateChatflowApi = useApi(chatflowsApi.updateChatflow)

// Check if chatflow supports streaming
const getIsChatflowStreamingApi = useApi(chatflowsApi.getIsChatflowStreaming)

// Fetch configurable parameters for override config display
const getConfigApi = useApi(configApi.getConfig)

// Fetch variables for override config display
const getAllVariablesApi = useApi(variablesApi.getAllVariables)

I/O Contract

Inputs

Parameter	Type	Description
`dialogProps.chatflowid`	`string`	Chatflow ID interpolated into generated code
`dialogProps.chatflowApiKeyId`	`string`	Pre-selected API key ID (optional)
`dialogProps.isFormDataRequired`	`boolean`	Whether the chatflow requires file upload (form data)
`dialogProps.isAgentflowV2`	`boolean`	Whether the chatflow is an agentflow v2 (affects override config format)

The component also reads baseURL from @/store/constant and the chatflow's apiConfig from the Redux store.

Outputs

The component renders a dialog with tabs for: Embed, Python, JavaScript, cURL, and Share Chatbot. Each language tab displays copyable code blocks. No direct output value; the component renders UI.

Prediction Endpoint

All generated code targets:

POST {baseURL}/api/v1/prediction/{chatflowId}

Request body format:

{
  "question": "Hey, how are you?",
  "overrideConfig": {}
}

Usage Examples

Generated Python Code (No Auth)

import requests

API_URL = "https://your-flowise-instance.com/api/v1/prediction/abc-123-def-456"

def query(payload):
    response = requests.post(API_URL, json=payload)
    return response.json()

output = query({
    "question": "Hey, how are you?",
})

Generated Python Code (With Auth)

import requests

API_URL = "https://your-flowise-instance.com/api/v1/prediction/abc-123-def-456"
headers = {"Authorization": "Bearer fl-xxxxxxxxxxxxxxxx"}

def query(payload):
    response = requests.post(API_URL, headers=headers, json=payload)
    return response.json()

output = query({
    "question": "Hey, how are you?",
})

Generated JavaScript Code (No Auth)

async function query(data) {
    const response = await fetch(
        "https://your-flowise-instance.com/api/v1/prediction/abc-123-def-456",
        {
            method: "POST",
            headers: {
                "Content-Type": "application/json"
            },
            body: JSON.stringify(data)
        }
    );
    const result = await response.json();
    return result;
}

query({"question": "Hey, how are you?"}).then((response) => {
    console.log(response);
});

Generated JavaScript Code (With Auth)

async function query(data) {
    const response = await fetch(
        "https://your-flowise-instance.com/api/v1/prediction/abc-123-def-456",
        {
            headers: {
                Authorization: "Bearer fl-xxxxxxxxxxxxxxxx",
                "Content-Type": "application/json"
            },
            method: "POST",
            body: JSON.stringify(data)
        }
    );
    const result = await response.json();
    return result;
}

query({"question": "Hey, how are you?"}).then((response) => {
    console.log(response);
});

Generated cURL Code (No Auth)

curl https://your-flowise-instance.com/api/v1/prediction/abc-123-def-456 \
     -X POST \
     -d '{"question": "Hey, how are you?"}' \
     -H "Content-Type: application/json"

Generated cURL Code (With Auth)

curl https://your-flowise-instance.com/api/v1/prediction/abc-123-def-456 \
     -X POST \
     -d '{"question": "Hey, how are you?"}' \
     -H "Content-Type: application/json" \
     -H "Authorization: Bearer fl-xxxxxxxxxxxxxxxx"

Generated Python Code (With Override Config)

import requests

API_URL = "https://your-flowise-instance.com/api/v1/prediction/abc-123-def-456"

def query(payload):
    response = requests.post(API_URL, json=payload)
    return response.json()

output = query({
    "question": "Hey, how are you?",
    "overrideConfig": {
        "temperature": 0.7,
        "modelName": "gpt-4"
    }
})

Code Generation Functions

The component defines these code generation function families:

Function Family	Description
`getCode(codeLang)`	Basic code without auth or overrides
`getCodeWithAuthorization(codeLang)`	Code with Authorization bearer header
`getConfigCode(codeLang, configData)`	Code with JSON override config
`getConfigCodeWithAuthorization(codeLang, configData)`	Auth + JSON override config
`getConfigCodeWithFormData(codeLang, configData)`	FormData override config (file upload)
`getConfigCodeWithFormDataWithAuth(codeLang, configData)`	Auth + FormData override config
`getMultiConfigCode()`	Per-node override config example (JSON)
`getMultiConfigCodeWithFormData(codeLang)`	Per-node override config example (FormData)

Related Pages

Page Connections

Double-click a node to navigate. Hold to expand connections.

Principle

Implementation

Heuristic

Environment