feat: Add CometAPI integration with new components and documentation.#9735
Conversation
- Updated sidebars to include CometAPI bundle. - Enhanced compatibility modules to support CometAPI constants. - Implemented lazy loading for CometAPI icons in the frontend. - Added CometAPI to the list of sidebar bundles in styleUtils. - Introduced CometAPI documentation page detailing usage and parameters. - Created CometAPI icon components for consistent UI representation. - Defined CometAPI model constants for available models. - Developed CometAPI component for language model integration with input handling. - Implemented model fetching logic from CometAPI API.
|
Important Review skippedAuto incremental reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the You can disable this status message by setting the WalkthroughAdds CometAPI integration across backend, frontend, and docs: new LFX component to fetch models and build a language model via CometAPI, fallback constants, env var inclusion, dynamic import wiring; frontend icon and sidebar bundle entry; documentation page and sidebar entry. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
actor User
participant UI as Builder/UI
participant Comp as CometAPIComponent
participant API as CometAPI Models API
participant LLM as ChatOpenAI (base_url=CometAPI)
User->>UI: Select CometAPI bundle
UI->>Comp: Open config (api_key, model_name, ...)
alt api_key/model_name changed
Comp->>API: GET /v1/models (Authorization: api_key)
API-->>Comp: 200 model IDs
Comp-->>UI: Update model_name options
else fetch fails
Comp-->>UI: Use fallback MODEL_NAMES (status set)
end
User->>UI: Build / Run
UI->>Comp: build_model()
Comp->>LLM: Initialize with model_name, temperature, max_tokens, seed, json_mode
LLM-->>Comp: LanguageModel instance
Comp-->>UI: Return LanguageModel
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Suggested labels
Suggested reviewers
✨ Finishing touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
github-actions
Bot
added
enhancement
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 5
🧹 Nitpick comments (7)
src/lfx/src/lfx/base/models/cometapi_constants.py (1)
10-50: Prefer immutable tuple for constants and soften “actual API offerings” claim.
- Use tuple + Final[tuple[str, ...]] to avoid accidental mutation.
- The “based on actual API offerings” phrasing will age quickly; clarify it’s a non-exhaustive fallback list.
Apply:
-from typing import Final +from typing import Final -# CometAPI available model list based on actual API offerings -COMETAPI_MODELS: Final[list[str]] = [ +# Curated fallback model identifiers (non-exhaustive; may become stale) +COMETAPI_MODELS: Final[tuple[str, ...]] = ( @@ - "qwen3-coder-plus-2025-07-22", -] + "qwen3-coder-plus-2025-07-22", +) @@ -MODEL_NAMES: Final[list[str]] = COMETAPI_MODELS +MODEL_NAMES: Final[tuple[str, ...]] = COMETAPI_MODELSsrc/frontend/src/icons/CometAPI/cometapi.jsx (1)
1-32: Icon component looks good; consider TSX + props typing.Works with isDark and a11y labels. Optional: convert to TSX and type props for consistency with React 18 + TS usage.
Example:
-const SvgCometAPI = ({ isDark = false, ...props }) => ( +import type { SVGProps } from "react"; +type Props = SVGProps<SVGSVGElement> & { isDark?: boolean }; +const SvgCometAPI = ({ isDark = false, ...props }: Props) => (src/lfx/src/lfx/components/cometapi/__init__.py (1)
17-28: Minor robustness: guard spec when deriving parent.If spec is None in rare contexts, import_mod may get a None parent. Provide a safe fallback.
Apply:
- result = import_mod(attr_name, _dynamic_imports[attr_name], __spec__.parent) + base_pkg = __spec__.parent if __spec__ else __name__.rpartition(".")[0] + result = import_mod(attr_name, _dynamic_imports[attr_name], base_pkg)docs/docs/Components/bundles-cometapi.mdx (2)
49-55: Align supported model examples with fallback constants or soften wording.Keep examples consistent with your fallback list or state “e.g.” to avoid implying completeness.
Apply:
-CometAPI provides access to a wide range of state-of-the-art language models including: +CometAPI provides access to a wide range of language models (for example):
56-56: Add a tip about auto-fetch behavior and fallbacks.Recommend an admonition to clarify behavior without a key or on API errors.
Add after Line 56:
:::tip When an API key is provided, Langflow fetches the latest models from CometAPI. If the fetch fails or no key is set, the component falls back to a curated model list. :::src/lfx/src/lfx/components/cometapi/cometapi.py (1)
25-26: Polish description textMinor grammar/clarity tweak.
- description = "All AI Models in One API 500+ AI Models" + description = "All AI models via one API (500+ models)."src/frontend/src/icons/CometAPI/index.tsx (1)
5-10: Optional: set displayName for easier debuggingAdds parity with many icons and clearer React DevTools labels.
export const CometAPIIcon = forwardRef< SVGSVGElement, React.PropsWithChildren<{}> >((props, ref) => { return <SvgCometAPI ref={ref} {...props} />; }); +CometAPIIcon.displayName = "CometAPIIcon";
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
src/frontend/src/icons/CometAPI/cometapi.svgis excluded by!**/*.svg
📒 Files selected for processing (11)
docs/docs/Components/bundles-cometapi.mdx(1 hunks)docs/sidebars.js(1 hunks)src/backend/base/langflow/__init__.py(1 hunks)src/frontend/src/icons/CometAPI/cometapi.jsx(1 hunks)src/frontend/src/icons/CometAPI/index.tsx(1 hunks)src/frontend/src/icons/lazyIconImports.ts(1 hunks)src/frontend/src/utils/styleUtils.ts(1 hunks)src/lfx/src/lfx/base/models/cometapi_constants.py(1 hunks)src/lfx/src/lfx/components/cometapi/__init__.py(1 hunks)src/lfx/src/lfx/components/cometapi/cometapi.py(1 hunks)src/lfx/src/lfx/services/settings/constants.py(1 hunks)
🧰 Additional context used
📓 Path-based instructions (9)
{src/backend/**/*.py,tests/**/*.py,Makefile}
📄 CodeRabbit inference engine (.cursor/rules/backend_development.mdc)
{src/backend/**/*.py,tests/**/*.py,Makefile}: Run make format_backend to format Python code before linting or committing changes
Run make lint to perform linting checks on backend Python code
Files:
src/backend/base/langflow/__init__.py
docs/sidebars.js
📄 CodeRabbit inference engine (.cursor/rules/docs_development.mdc)
Sidebar navigation must be updated in docs/sidebars.js to reflect new or reorganized documentation content.
Files:
docs/sidebars.js
src/frontend/src/**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (.cursor/rules/frontend_development.mdc)
src/frontend/src/**/*.{ts,tsx,js,jsx}: All frontend TypeScript and JavaScript code should be located under src/frontend/src/ and organized into components, pages, icons, stores, types, utils, hooks, services, and assets directories as per the specified directory layout.
Use React 18 with TypeScript for all UI components in the frontend.
Format all TypeScript and JavaScript code using the make format_frontend command.
Lint all TypeScript and JavaScript code using the make lint command.
Files:
src/frontend/src/icons/CometAPI/cometapi.jsxsrc/frontend/src/icons/lazyIconImports.tssrc/frontend/src/utils/styleUtils.tssrc/frontend/src/icons/CometAPI/index.tsx
src/frontend/src/icons/**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (.cursor/rules/frontend_development.mdc)
Use Lucide React for icons in the frontend.
Files:
src/frontend/src/icons/CometAPI/cometapi.jsxsrc/frontend/src/icons/lazyIconImports.tssrc/frontend/src/icons/CometAPI/index.tsx
src/frontend/src/icons/*/*.@(js|jsx|ts|tsx)
📄 CodeRabbit inference engine (.cursor/rules/icons.mdc)
Create a new directory for your icon in
src/frontend/src/icons/YourIconName/and add your SVG as a React component (e.g.,YourIconName.jsx). The SVG component must use theisDarkprop to support both light and dark mode.
Files:
src/frontend/src/icons/CometAPI/cometapi.jsxsrc/frontend/src/icons/CometAPI/index.tsx
src/frontend/src/icons/lazyIconImports.ts
📄 CodeRabbit inference engine (.cursor/rules/icons.mdc)
Add your icon to the
lazyIconsMappingobject insrc/frontend/src/icons/lazyIconImports.tswith a key that matches the backend icon string exactly.
Files:
src/frontend/src/icons/lazyIconImports.ts
docs/docs/**/*.{md,mdx}
📄 CodeRabbit inference engine (.cursor/rules/docs_development.mdc)
docs/docs/**/*.{md,mdx}: All documentation content must be written in Markdown or MDX files located under docs/docs/, following the prescribed directory structure for guides, reference, how-to, concepts, and API documentation.
All documentation Markdown and MDX files must begin with a frontmatter block including at least title and description fields.
Use admonitions (:::tip, :::warning, :::danger) in Markdown/MDX files to highlight important information, warnings, or critical issues.
All images referenced in documentation must include descriptive alt text for accessibility.
All code examples included in documentation must be tested and verified to work as shown.
Internal links in documentation must be functional and not broken.
Content must follow the style guide: professional but approachable tone, second person voice, present tense, short paragraphs, sentence case headers, inline code with backticks, bold for UI elements, italic for emphasis, and parallel structure in lists.
Use consistent terminology: always capitalize Langflow, Component, Flow, and uppercase API and JSON.
Files:
docs/docs/Components/bundles-cometapi.mdx
src/frontend/src/utils/**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (.cursor/rules/frontend_development.mdc)
All utility functions should be placed in the utils directory.
Files:
src/frontend/src/utils/styleUtils.ts
src/frontend/src/icons/*/index.tsx
📄 CodeRabbit inference engine (.cursor/rules/icons.mdc)
Create an
index.tsxin your icon directory that exports your icon usingforwardRefand passes theisDarkprop.
Files:
src/frontend/src/icons/CometAPI/index.tsx
🧠 Learnings (9)
📚 Learning: 2025-07-21T14:16:14.125Z
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/testing.mdc:0-0
Timestamp: 2025-07-21T14:16:14.125Z
Learning: Applies to src/backend/tests/**/*.py : Test backward compatibility across Langflow versions in backend Python tests by mapping component files to supported versions using 'VersionComponentMapping'.
Applied to files:
src/backend/base/langflow/__init__.py
📚 Learning: 2025-07-18T18:26:42.027Z
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/docs_development.mdc:0-0
Timestamp: 2025-07-18T18:26:42.027Z
Learning: Applies to docs/sidebars.js : Sidebar navigation must be updated in docs/sidebars.js to reflect new or reorganized documentation content.
Applied to files:
docs/sidebars.js
📚 Learning: 2025-06-23T12:46:52.420Z
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/icons.mdc:0-0
Timestamp: 2025-06-23T12:46:52.420Z
Learning: Custom SVG icon components in React should always support both light and dark mode by accepting an 'isdark' prop and adjusting colors accordingly.
Applied to files:
src/frontend/src/icons/CometAPI/cometapi.jsx
📚 Learning: 2025-07-28T15:56:47.865Z
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/icons.mdc:0-0
Timestamp: 2025-07-28T15:56:47.865Z
Learning: Applies to src/frontend/src/icons/*/*.@(js|jsx|ts|tsx) : Create a new directory for your icon in `src/frontend/src/icons/YourIconName/` and add your SVG as a React component (e.g., `YourIconName.jsx`). The SVG component must use the `isDark` prop to support both light and dark mode.
Applied to files:
src/frontend/src/icons/CometAPI/cometapi.jsxsrc/frontend/src/icons/CometAPI/index.tsx
📚 Learning: 2025-07-28T15:56:47.865Z
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/icons.mdc:0-0
Timestamp: 2025-07-28T15:56:47.865Z
Learning: Applies to src/frontend/src/icons/*/index.tsx : Create an `index.tsx` in your icon directory that exports your icon using `forwardRef` and passes the `isDark` prop.
Applied to files:
src/frontend/src/icons/CometAPI/cometapi.jsxsrc/frontend/src/icons/CometAPI/index.tsx
📚 Learning: 2025-07-28T15:56:47.865Z
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/icons.mdc:0-0
Timestamp: 2025-07-28T15:56:47.865Z
Learning: Applies to src/frontend/src/icons/lazyIconImports.ts : Add your icon to the `lazyIconsMapping` object in `src/frontend/src/icons/lazyIconImports.ts` with a key that matches the backend icon string exactly.
Applied to files:
src/frontend/src/icons/lazyIconImports.ts
📚 Learning: 2025-06-23T12:46:52.420Z
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/icons.mdc:0-0
Timestamp: 2025-06-23T12:46:52.420Z
Learning: Export custom icon components in React using React.forwardRef to ensure proper ref forwarding and compatibility with parent components.
Applied to files:
src/frontend/src/icons/CometAPI/index.tsx
📚 Learning: 2025-06-16T11:14:04.200Z
Learnt from: dolfim-ibm
PR: langflow-ai/langflow#8394
File: src/frontend/src/icons/Docling/index.tsx:4-6
Timestamp: 2025-06-16T11:14:04.200Z
Learning: The Langflow codebase consistently uses `React.PropsWithChildren<{}>` as the prop type for all icon components using forwardRef, rather than `React.SVGProps<SVGSVGElement>`. This is an established pattern across hundreds of icon files in src/frontend/src/icons/.
Applied to files:
src/frontend/src/icons/CometAPI/index.tsx
📚 Learning: 2025-07-18T18:27:12.609Z
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/frontend_development.mdc:0-0
Timestamp: 2025-07-18T18:27:12.609Z
Learning: Applies to src/frontend/src/icons/**/*.{ts,tsx,js,jsx} : Use Lucide React for icons in the frontend.
Applied to files:
src/frontend/src/icons/CometAPI/index.tsx
🧬 Code graph analysis (1)
src/frontend/src/icons/CometAPI/index.tsx (1)
src/frontend/src/icons/CometAPI/cometapi.jsx (1)
SvgCometAPI(1-29)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (21)
- GitHub Check: Run Frontend Tests / Playwright Tests - Shard 5/11
- GitHub Check: Run Frontend Tests / Playwright Tests - Shard 3/11
- GitHub Check: Run Frontend Tests / Playwright Tests - Shard 9/11
- GitHub Check: Run Frontend Tests / Playwright Tests - Shard 10/11
- GitHub Check: Run Frontend Tests / Playwright Tests - Shard 4/11
- GitHub Check: Run Frontend Tests / Playwright Tests - Shard 7/11
- GitHub Check: Run Frontend Tests / Playwright Tests - Shard 11/11
- GitHub Check: Run Frontend Tests / Playwright Tests - Shard 1/11
- GitHub Check: Run Frontend Tests / Playwright Tests - Shard 8/11
- GitHub Check: Run Frontend Tests / Playwright Tests - Shard 6/11
- GitHub Check: Run Frontend Tests / Playwright Tests - Shard 2/11
- GitHub Check: Run Backend Tests / Unit Tests - Python 3.10 - Group 4
- GitHub Check: Run Backend Tests / Unit Tests - Python 3.10 - Group 1
- GitHub Check: Run Backend Tests / Unit Tests - Python 3.10 - Group 5
- GitHub Check: Run Backend Tests / Unit Tests - Python 3.10 - Group 3
- GitHub Check: Test Docs Build / Test Docs Build
- GitHub Check: Run Backend Tests / Unit Tests - Python 3.10 - Group 2
- GitHub Check: Test Starter Templates
- GitHub Check: Run Backend Tests / Integration Tests - Python 3.10
- GitHub Check: Update Starter Projects
- GitHub Check: Optimize new Python code in this PR
🔇 Additional comments (5)
src/frontend/src/utils/styleUtils.ts (1)
261-261: CometAPI icon mapping and export are in place. Verified thatsrc/frontend/src/icons/lazyIconImports.tsincludes theCometAPIentry andsrc/frontend/src/icons/CometAPI/index.tsxexportsCometAPIIcon.src/backend/base/langflow/__init__.py (1)
108-108: Mapping addition LGTM.Forwarding langflow.base.models.cometapi_constants → lfx.base.models.cometapi_constants looks correct and matches existing patterns.
docs/docs/Components/bundles-cometapi.mdx (1)
19-44: Internal doc links verified: the frontmatter slugs/data-typesand/components-modelsare present, so the links resolve correctly.docs/sidebars.js (1)
301-303: Sidebar entry addition LGTM.Entry matches the new doc id Components/bundles-cometapi and placement under Bundles is consistent.
src/frontend/src/icons/lazyIconImports.ts (1)
56-57: Icon key matches backend and lazy import shape is correctKey “CometAPI” aligns with backend icon string; dynamic import targets the index module and named export.
github-actions
Bot
added
enhancement
github-actions
Bot
added
enhancement
github-actions
Bot
added
enhancement
There was a problem hiding this comment.
Pull Request Overview
This PR adds comprehensive CometAPI integration to Langflow, enabling users to access 500+ AI models through a unified API interface. The integration includes both backend components for model interaction and frontend UI elements for a seamless user experience.
- Added CometAPI backend component with dynamic model fetching and OpenAI-compatible API integration
- Created frontend icon components and UI integration for CometAPI in sidebars and documentation
- Implemented comprehensive documentation explaining CometAPI usage, supported models, and configuration
Reviewed Changes
Copilot reviewed 11 out of 12 changed files in this pull request and generated no comments.
Show a summary per file
| File | Description |
|---|---|
| src/lfx/src/lfx/services/settings/constants.py | Added COMETAPI_KEY environment variable support |
| src/lfx/src/lfx/components/cometapi/cometapi.py | Main CometAPI component with model fetching and ChatOpenAI integration |
| src/lfx/src/lfx/components/cometapi/init.py | Lazy loading module for CometAPI components |
| src/lfx/src/lfx/base/models/cometapi_constants.py | Model constants and fallback definitions |
| src/frontend/src/utils/styleUtils.ts | Added CometAPI to sidebar bundles list |
| src/frontend/src/icons/lazyIconImports.ts | Lazy loading configuration for CometAPI icon |
| src/frontend/src/icons/CometAPI/index.tsx | TypeScript icon component wrapper |
| src/frontend/src/icons/CometAPI/cometapi.jsx | SVG icon implementation with dark mode support |
| src/backend/base/langflow/init.py | Compatibility module mapping for CometAPI constants |
| docs/sidebars.js | Documentation sidebar entry for CometAPI |
| docs/docs/Components/bundles-cometapi.mdx | Comprehensive CometAPI documentation |
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
github-actions
Bot
added
enhancement
aimurphy
left a comment
aimurphy
left a comment
There was a problem hiding this comment.
Thank you for including documentation with your PR! I have reviewed the documentation changes and left some comments for your consideration, @tensornull
Co-authored-by: April I. Murphy <36110273+aimurphy@users.noreply.github.com>
Co-authored-by: April I. Murphy <36110273+aimurphy@users.noreply.github.com>
Co-authored-by: April I. Murphy <36110273+aimurphy@users.noreply.github.com>
github-actions
Bot
added
enhancement
|
Please run the following command locally and commit the changes: make build_component_indexOr alternatively: LFX_DEV=1 uv run python scripts/build_component_index.pyThen commit and push the updated |
|
Please run the following command locally and commit the changes: make build_component_indexOr alternatively: LFX_DEV=1 uv run python scripts/build_component_index.pyThen commit and push the updated |
|
Please run the following command locally and commit the changes: make build_component_indexOr alternatively: LFX_DEV=1 uv run python scripts/build_component_index.pyThen commit and push the updated |
|
Please run the following command locally and commit the changes: make build_component_indexOr alternatively: LFX_DEV=1 uv run python scripts/build_component_index.pyThen commit and push the updated |
|
@tensornull @HimavarshaVS can you check the playwright tests? |
|
Please run the following command locally and commit the changes: make build_component_indexOr alternatively: LFX_DEV=1 uv run python scripts/build_component_index.pyThen commit and push the updated |
|
Please run the following command locally and commit the changes: make build_component_indexOr alternatively: LFX_DEV=1 uv run python scripts/build_component_index.pyThen commit and push the updated |
|
Please run the following command locally and commit the changes: make build_component_indexOr alternatively: LFX_DEV=1 uv run python scripts/build_component_index.pyThen commit and push the updated |
No modifications to source files were detected in this change set. This is a no-op commit used to record a checkpoint; no behavior, dependencies, or tests were altered. Files changed: 0
|
Please run the following command locally and commit the changes: make build_component_indexOr alternatively: LFX_DEV=1 uv run python scripts/build_component_index.pyThen commit and push the updated |
Hello, @edwinjosechittilappilly |
This was indeed related to the PR . It was one of the tests failing due to component indexing. I fixed it and the tests pass now. |
|
Please run the following command locally and commit the changes: make build_component_indexOr alternatively: LFX_DEV=1 uv run python scripts/build_component_index.pyThen commit and push the updated |
|
Summary by CodeRabbit
New Features
Documentation