Principle:FlowiseAI Flowise API Integration Code Generation

Attribute	Value
Page Name	API_Integration_Code_Generation
Workflow	Chatbot_Deployment
Repository	FlowiseAI/Flowise
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

Technique for generating ready-to-use API integration code in multiple programming languages for programmatic chatflow access.

Description

The API code generation system produces copy-pasteable code examples for multiple languages and scenarios. The generated code demonstrates how to call the Flowise prediction API endpoint for a specific chatflow.

Supported Languages

cURL -- Command-line HTTP requests using the curl utility
Python -- Using the requests library with requests.post()
JavaScript -- Using the fetch() API with async/await
Embedded widget -- HTML/React embed code (delegated to EmbedChat component)

Code Variants

Each language generates multiple code variants depending on configuration:

Basic (no auth): Simple POST request with a question body
With Authorization: Adds Authorization: Bearer {apiKey} header when an API key is selected
With Override Config (JSON): Includes an overrideConfig object in the request body for parameter overrides
With Override Config (FormData): Uses multipart form data when file uploads are involved
With Auth + Override Config: Combines both authorization header and override configuration
With Auth + FormData: Combines authorization with multipart form data

Prediction Endpoint

All generated code targets the prediction endpoint:

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

The request body format is:

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

API Key Selection

The dialog includes an API key dropdown selector. When an API key is selected:

The generated code automatically includes the Authorization header
The embed and share chatbot tabs display a warning that API keys cannot be used with embedded/shared chatbots
Selecting "No Authorization" removes the auth header from generated code

Override Configuration Display

When the "Show Override Config" checkbox is enabled, the dialog:

Fetches the chatflow's configurable parameters via configApi.getConfig()
Groups parameters by node label with expandable accordions
Shows which parameters are enabled for override (per security settings)
Generates code including the overrideConfig property with example values
Displays a tip about specifying per-node parameter values using node IDs

Streaming Support

The dialog checks if the chatflow supports streaming via getIsChatflowStreaming and displays a link to the streaming documentation when applicable.

Usage

Use this principle when providing developers with integration code for chatflow API access. Apply when:

Onboarding developers who need to integrate a chatflow into their application
Generating starter code for backend services consuming the chatflow API
Demonstrating the correct request format including authentication and override configuration
Providing code examples that match the exact chatflow configuration (API key, override settings)

Theoretical Basis

This technique implements the multi-language code generation pattern. Templates are parameterized with chatflow-specific values (ID, base URL, API key) and rendered for each target language. The generated code demonstrates both synchronous and streaming request patterns.

Key design properties:

Template interpolation: Code templates are JavaScript template literal strings with placeholders for chatflow-specific values. This ensures the generated code is always syntactically correct and immediately runnable.
Context-sensitive generation: The generated code adapts to the current configuration state (API key selection, override config enablement, form data requirements). This eliminates the need for developers to manually adjust boilerplate code.
Copy-paste readiness: The CopyBlock component from react-code-blocks provides syntax highlighting and one-click copying, reducing friction in the integration process.
Progressive disclosure: Basic code is shown by default. Override configuration and customization options are revealed through checkboxes, avoiding information overload for simple use cases.
Helper function delegation: Override config code examples use utility functions (getConfigExamplesForJS, getConfigExamplesForPython, getConfigExamplesForCurl) from @/utils/genericHelper to generate language-appropriate parameter formatting.

Related Pages

Page Connections

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

Principle

Implementation

Heuristic

Environment