Skip to content

feat: integrate helicone as a bundle and as an agent provider #10433

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
H2Shami wants to merge 4 commits into from
Closed

feat: integrate helicone as a bundle and as an agent provider #10433

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
c8b7d37
integrate helicone as a bundle and as an agent provider
H2Shami Oct 28, 2025
985c231
coderabbit comment addressed
H2Shami Nov 3, 2025
7571ded
resolve merge conflicts + revert tool opt-in
H2Shami Nov 26, 2025
79cf80d
[autofix.ci] apply automated fixes
autofix-ci[bot] Dec 8, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 36 additions & 0 deletions docs/docs/Components/bundles-helicone.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
---
title: Helicone
slug: /bundles-helicone
keywords: [helicone, heli, helic, helict, helico, lico, cone, icone, elic]
description: Helicone integration bundle for Langflow components, models, and routing.
---

import Icon from "@site/src/components/icon";
import PartialParams from '@site/docs/_partial-hidden-params.mdx';

<Icon name="Blocks" aria-hidden="true" /> [**Bundles**](/components-bundle-components) contain custom components that support specific third-party integrations with Langflow.

This page describes the components that are available in the **Helicone** bundle.

For more information about Helicone features and functionality used by Helicone components, see the [Helicone documentation](https://docs.helicone.ai).

## Helicone text generation

This component generates text using Helicone's AI routing and observability platform with unified access to multiple AI models from different providers.

It can output either a **Model Response** ([`Message`](/data-types#message)) or a **Language Model** ([`LanguageModel`](/data-types#languagemodel)).

Use the **Language Model** output when you want to use a Helicone model as the LLM for another LLM-driven component, such as an **Agent** or **Smart Function** component.

For more information, see [Language model components](/components-models).

### Helicone text generation parameters

<PartialParams />

| Name | Type | Description |
|------|------|-------------|
| api_key | SecretString | Input parameter. Your Helicone API key for authentication. |
| model_name | String | Input parameter. The specific model to use for chat completion. |
| temperature | Float | Input parameter. Controls randomness in the output. Range: [0.0, 2.0]. Default: 0.7. |
| max_tokens | Integer | Input parameter. The maximum number of tokens to generate. |
1 change: 1 addition & 0 deletions docs/sidebars.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -322,6 +322,7 @@ module.exports = {
"Components/bundles-glean",
"Components/bundles-google",
"Components/bundles-groq",
"Components/bundles-helicone",
"Components/bundles-huggingface",
"Components/bundles-ibm",
"Components/bundles-icosacomputing",
Expand Down
1 change: 1 addition & 0 deletions src/backend/base/langflow/initial_setup/starter_projects/Instagram Copywriter.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2090,6 +2090,7 @@
"options": [
"Anthropic",
"Google Generative AI",
"Helicone",
"OpenAI",
"IBM watsonx.ai",
"Ollama"
Expand Down
1 change: 1 addition & 0 deletions src/backend/base/langflow/initial_setup/starter_projects/Invoice Summarizer.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1262,6 +1262,7 @@
"options": [
"Anthropic",
"Google Generative AI",
"Helicone",
"OpenAI",
"IBM watsonx.ai",
"Ollama"
Expand Down
1 change: 1 addition & 0 deletions src/backend/base/langflow/initial_setup/starter_projects/Market Research.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1658,6 +1658,7 @@
"options": [
"Anthropic",
"Google Generative AI",
"Helicone",
"OpenAI",
"IBM watsonx.ai",
"Ollama"
Expand Down
1 change: 1 addition & 0 deletions src/backend/base/langflow/initial_setup/starter_projects/News Aggregator.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1286,6 +1286,7 @@
"options": [
"Anthropic",
"Google Generative AI",
"Helicone",
"OpenAI",
"IBM watsonx.ai",
"Ollama"
Expand Down
1 change: 1 addition & 0 deletions src/backend/base/langflow/initial_setup/starter_projects/Nvidia Remix.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -918,6 +918,7 @@
"options": [
"Anthropic",
"Google Generative AI",
"Helicone",
"OpenAI",
"IBM watsonx.ai",
"Ollama"
Expand Down
1 change: 1 addition & 0 deletions src/backend/base/langflow/initial_setup/starter_projects/Pokédex Agent.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1347,6 +1347,7 @@
"options": [
"Anthropic",
"Google Generative AI",
"Helicone",
"OpenAI",
"IBM watsonx.ai",
"Ollama"
Expand Down
1 change: 1 addition & 0 deletions src/backend/base/langflow/initial_setup/starter_projects/Price Deal Finder.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1714,6 +1714,7 @@
"options": [
"Anthropic",
"Google Generative AI",
"Helicone",
"OpenAI",
"IBM watsonx.ai",
"Ollama"
Expand Down
1 change: 1 addition & 0 deletions src/backend/base/langflow/initial_setup/starter_projects/Research Agent.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2687,6 +2687,7 @@
"options": [
"Anthropic",
"Google Generative AI",
"Helicone",
"OpenAI",
"IBM watsonx.ai",
"Ollama"
Expand Down
1 change: 1 addition & 0 deletions src/backend/base/langflow/initial_setup/starter_projects/SaaS Pricing.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -976,6 +976,7 @@
"options": [
"Anthropic",
"Google Generative AI",
"Helicone",
"OpenAI",
"IBM watsonx.ai",
"Ollama"
Expand Down
1 change: 1 addition & 0 deletions src/backend/base/langflow/initial_setup/starter_projects/Search agent.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1053,6 +1053,7 @@
"options": [
"Anthropic",
"Google Generative AI",
"Helicone",
"OpenAI",
"IBM watsonx.ai",
"Ollama"
Expand Down
3 changes: 3 additions & 0 deletions src/backend/base/langflow/initial_setup/starter_projects/Sequential Tasks Agents.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -465,6 +465,7 @@
"options": [
"Anthropic",
"Google Generative AI",
"Helicone",
"OpenAI",
"IBM watsonx.ai",
"Ollama"
Expand Down Expand Up @@ -1226,6 +1227,7 @@
"options": [
"Anthropic",
"Google Generative AI",
"Helicone",
"OpenAI",
"IBM watsonx.ai",
"Ollama"
Expand Down Expand Up @@ -2758,6 +2760,7 @@
"options": [
"Anthropic",
"Google Generative AI",
"Helicone",
"OpenAI",
"IBM watsonx.ai",
"Ollama"
Expand Down
1 change: 1 addition & 0 deletions src/backend/base/langflow/initial_setup/starter_projects/Simple Agent.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1038,6 +1038,7 @@
"options": [
"Anthropic",
"Google Generative AI",
"Helicone",
"OpenAI",
"IBM watsonx.ai",
"Ollama"
Expand Down
1 change: 1 addition & 0 deletions src/backend/base/langflow/initial_setup/starter_projects/Social Media Agent.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1396,6 +1396,7 @@
"options": [
"Anthropic",
"Google Generative AI",
"Helicone",
"OpenAI",
"IBM watsonx.ai",
"Ollama"
Expand Down
3 changes: 3 additions & 0 deletions src/backend/base/langflow/initial_setup/starter_projects/Travel Planning Agents.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1771,6 +1771,7 @@
"options": [
"Anthropic",
"Google Generative AI",
"Helicone",
"OpenAI",
"IBM watsonx.ai",
"Ollama"
Expand Down Expand Up @@ -2525,6 +2526,7 @@
"options": [
"Anthropic",
"Google Generative AI",
"Helicone",
"OpenAI",
"IBM watsonx.ai",
"Ollama"
Expand Down Expand Up @@ -3279,6 +3281,7 @@
"options": [
"Anthropic",
"Google Generative AI",
"Helicone",
"OpenAI",
"IBM watsonx.ai",
"Ollama"
Expand Down
1 change: 1 addition & 0 deletions src/backend/base/langflow/initial_setup/starter_projects/Youtube Analysis.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -867,6 +867,7 @@
"options": [
"Anthropic",
"Google Generative AI",
"Helicone",
"OpenAI",
"IBM watsonx.ai",
"Ollama"
Expand Down
11 changes: 8 additions & 3 deletions src/frontend/src/components/core/dropdownComponent/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -98,7 +98,12 @@ export default function Dropdown({

const sourceOptions = dialogInputs?.fields ? dialogInputs : externalOptions;
const { firstWord } = formatName(name);
const fuse = new Fuse(validOptions, { keys: ["name", "value"] });
// Prepare Fuse for string-based search over option values.
// validOptions is a string[], so we index under a uniform `value` field.
const fuse = useMemo(() => {
const items = validOptions.map((v) => ({ value: v }));
return new Fuse(items, { keys: ["value"], threshold: 0.3 });
}, [validOptions]);
Comment on lines -107 to +106

@H2Shami H2Shami Oct 28, 2025

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

made this change to give users more detailed information about a model in a tooltip

it'll fallback to displaying the model id for most providers

const PopoverContentDropdown =
children || editNode ? PopoverContent : PopoverContentWithoutPortal;
const { helperText, hasRefreshButton } = baseInputProps;
Expand Down Expand Up @@ -143,9 +148,9 @@ export default function Dropdown({
return;
}

// Search existing options
// Search existing options (map back to raw string values)
const searchValues = fuse.search(value);
let filtered = searchValues.map((search) => search.item);
let filtered = searchValues.map((res) => res.item.value);

// If the search value exactly matches one of the custom options, include it
const customOptions = filteredOptions.filter(
Expand Down
82 changes: 82 additions & 0 deletions src/frontend/src/icons/Helicone/HeliconeIcon.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,82 @@
const SvgHelicone = ({ isDark, ...props }) => (
<svg
width="1000"
height="1000"
viewBox="0 0 1000 1000"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<path
d="M512.259 82.0808C503.242 78.136 492.988 78.136 483.971 82.0808L75.8928 260.615L403.33 403.869L498.115 445.337L807.242 310.094L920.337 260.615L512.259 82.0808Z"
fill={isDark ? "#F8FEFF" : "#F8FEFF"}

Copilot AI Nov 21, 2025

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The ternary operator isDark ? "#F8FEFF" : "#F8FEFF" always returns the same value. Either remove the ternary and use a static fill value, or provide different colors for dark and light modes.

Suggested change
fill={isDark ? "#F8FEFF" : "#F8FEFF"}
fill="#F8FEFF"

Copilot uses AI. Check for mistakes.
/>
<path
d="M75.8928 260.615V641.369L403.33 403.869L75.8928 260.615Z"
fill="#F8FEFF"
/>
<path
d="M807.242 310.094L498.115 445.337V486.806V784.623L807.242 310.094Z"
fill="#F8FEFF"
/>
<path
d="M498.115 784.623V924.107L592.361 884.557L920.337 358.631V260.615L807.242 310.094L498.115 784.623Z"
fill="#F8FEFF"
/>
<path
d="M498.115 924.107V784.623V486.806L113.591 762.744L498.115 924.107Z"
fill="#F8FEFF"
/>
<path
d="M75.8928 641.369V723.464C75.8928 737.677 84.4199 750.503 97.5257 756.003L113.591 762.744L498.115 486.806V445.337L403.33 403.869L75.8928 641.369Z"
fill="#F8FEFF"
/>
<path
d="M592.361 884.557L898.704 756.003C911.81 750.503 920.337 737.677 920.337 723.464V358.631L592.361 884.557Z"
fill="#F8FEFF"
/>
<path
d="M75.8928 260.615L483.971 82.0808C492.988 78.136 503.242 78.136 512.259 82.0808L920.337 260.615M75.8928 260.615V641.369M75.8928 260.615L403.33 403.869M920.337 260.615L807.242 310.094M920.337 260.615V358.631M498.115 924.107V784.623M498.115 924.107L592.361 884.557M498.115 924.107L113.591 762.744M498.115 445.337L807.242 310.094M498.115 445.337L403.33 403.869M498.115 445.337V486.806M498.115 784.623L807.242 310.094M498.115 784.623V486.806M592.361 884.557L898.704 756.003C911.81 750.503 920.337 737.677 920.337 723.464V358.631M592.361 884.557L920.337 358.631M75.8928 641.369V723.464C75.8928 737.677 84.4199 750.503 97.5257 756.003L113.591 762.744M75.8928 641.369L403.33 403.869M113.591 762.744L498.115 486.806"
stroke="#F8FEFF"
stroke-width="30.1587"
stroke-linecap="round"
stroke-linejoin="round"
Comment on lines +41 to +43

Copilot AI Nov 21, 2025

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

SVG attributes in JSX should use camelCase. Replace stroke-width with strokeWidth and stroke-linecap with strokeLinecap and stroke-linejoin with strokeLinejoin to follow React conventions.

Suggested change
stroke-width="30.1587"
stroke-linecap="round"
stroke-linejoin="round"
strokeWidth="30.1587"
strokeLinecap="round"
strokeLinejoin="round"

Copilot uses AI. Check for mistakes.
/>
<path
d="M505.498 116.609C501.993 115.076 498.007 115.076 494.502 116.609L115.919 282.24L413.778 412.553L500 450.275L781.203 327.249L884.081 282.24L505.498 116.609Z"
fill="#0CA5E9"
/>
<path
d="M115.919 282.24V628.599L413.778 412.553L115.919 282.24Z"
fill="#0CA5E9"
/>
<path
d="M781.203 327.249L500 450.275V487.997V758.912L781.203 327.249Z"
fill="#0CA5E9"
/>
<path
d="M500 758.912V885.796L585.732 849.819L884.081 371.401V282.24L781.203 327.249L500 758.912Z"
fill="#C2FCF6"
/>
<path
d="M500 885.796V758.912V487.997L150.212 739.01L500 885.796Z"
fill="#F8FEFF"
/>
<path
d="M115.919 628.599V715.499C115.919 721.024 119.233 726.01 124.328 728.148L150.212 739.01L500 487.997V450.275L413.778 412.553L115.919 628.599Z"
fill="#F8FEFF"
/>
<path
d="M585.732 849.819L875.672 728.148C880.767 726.01 884.081 721.024 884.081 715.499V371.401L585.732 849.819Z"
fill="#F8FEFF"
/>
<path
d="M115.919 282.24L494.502 116.609C498.007 115.076 501.993 115.076 505.498 116.609L884.081 282.24M115.919 282.24V628.599M115.919 282.24L413.778 412.553M884.081 282.24L781.203 327.249M884.081 282.24V371.401M500 885.796V758.912M500 885.796L585.732 849.819M500 885.796L150.212 739.01M500 450.275L781.203 327.249M500 450.275L413.778 412.553M500 450.275V487.997M500 758.912L781.203 327.249M500 758.912V487.997M585.732 849.819L875.672 728.148C880.767 726.01 884.081 721.024 884.081 715.499V371.401M585.732 849.819L884.081 371.401M115.919 628.599V715.499C115.919 721.024 119.233 726.01 124.328 728.148L150.212 739.01M115.919 628.599L413.778 412.553M150.212 739.01L500 487.997"
stroke="#1E1E1E"
stroke-width="27.4344"
stroke-linecap="round"
stroke-linejoin="round"
Comment on lines +76 to +78

Copilot AI Nov 21, 2025

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

SVG attributes in JSX should use camelCase. Replace stroke-width with strokeWidth and stroke-linecap with strokeLinecap and stroke-linejoin with strokeLinejoin to follow React conventions.

Suggested change
stroke-width="27.4344"
stroke-linecap="round"
stroke-linejoin="round"
strokeWidth="27.4344"
strokeLinecap="round"
strokeLinejoin="round"

Copilot uses AI. Check for mistakes.
/>
</svg>
);
export default SvgHelicone;
18 changes: 18 additions & 0 deletions src/frontend/src/icons/Helicone/helicone.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
10 changes: 10 additions & 0 deletions src/frontend/src/icons/Helicone/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
import type React from "react";
import { forwardRef } from "react";
import SvgHelicone from "./HeliconeIcon";

export const HeliconeIcon = forwardRef<
SVGSVGElement,
React.PropsWithChildren<{}>
>((props, ref) => {
return <SvgHelicone ref={ref} {...props} />;
});
4 changes: 4 additions & 0 deletions src/frontend/src/icons/lazyIconImports.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -270,6 +270,10 @@ export const lazyIconsMapping = {
default: mod.HackerNewsIcon,
})),
HCD: () => import("@/icons/HCD").then((mod) => ({ default: mod.HCDIcon })),
Helicone: () =>
import("@/icons/Helicone").then((mod) => ({
default: mod.HeliconeIcon,
})),
HomeAssistant: () =>
import("@/icons/HomeAssistant").then((mod) => ({
default: mod.HomeAssistantIcon,
Expand Down
1 change: 1 addition & 0 deletions src/frontend/src/utils/styleUtils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -277,6 +277,7 @@ export const SIDEBAR_BUNDLES = [
{ display_name: "Gmail", name: "gmail", icon: "Gmail" },
{ display_name: "Google", name: "google", icon: "Google" },
{ display_name: "Groq", name: "groq", icon: "Groq" },
{ display_name: "Helicone", name: "helicone", icon: "Helicone" },
{
display_name: "Home Assistant",
name: "homeassistant",
Expand Down
2 changes: 1 addition & 1 deletion src/lfx/src/lfx/_assets/component_index.json
View file
Open in desktop

Large diffs are not rendered by default.

Loading
Loading