Add Langflow example (minimal + advanced flows) by gabeoliveira · Pull Request #64 · twilio/twilio-agent-connect-typescript

gabeoliveira · 2026-06-09T21:00:31Z

Summary

Adds a Langflow example under getting_started/examples/ — use a Langflow flow as the agent "brain" while Twilio Agent Connect owns the channels (Voice, SMS, WhatsApp), memory, streaming voice, and conversation continuity. The integration is ~100 lines in src/index.ts.

It ships in two tiers, both driven by the same index.ts (flow.run / flow.stream) — switching tiers is just LANGFLOW_FLOW_ID:

Minimal flow (flow/tac-langflow-example.json) — Chat Input → Prompt → Language Model (streaming) → Chat Output. The smallest thing that streams a Langflow flow to ConversationRelay for voice and replies on SMS/WhatsApp.
Advanced flow (flow/tac-langflow-advanced.json) — an Agent wired to three custom Twilio components that give back the tools you otherwise lose when the brain moves into Langflow:
- Twilio Knowledge Search — RAG over a Twilio Enterprise Knowledge base
- Twilio Memora Observation Writer — writes observations to the caller's Memora profile
- Twilio Live Agent Handoff — hands off to a human via a Studio Flow

Voice streams token-by-token via ConversationRelay; SMS/WhatsApp use the auto-send pattern. A configurable default voice language (VOICE_LANGUAGE) is included for multi-language deployments.

The custom components' Python source is embedded in the flow JSON (they use only requests + stock Langflow deps), so importing the flow is enough to run them — no extra files or pip install. They're also provided as readable source in flow/components/ for review and reuse. Component credentials resolve from Langflow global variables; nothing secret is in the flow JSON.

What's included

getting_started/examples/langflow/ — src/index.ts, package.json, tsconfig.json, README.md, and flow/ (two flow JSONs + three component .py files)
getting_started/examples/.env.example — adds LANGFLOW_* and optional VOICE_LANGUAGE / WELCOME_GREETING
getting_started/README.md — links the example under "Other Examples"

Type of Change

Checklist

Tests added/updated
Documentation updated
Tested E2E

Tested end-to-end against a local Langflow 1.9.2 instance: voice (streaming TTS), SMS, and WhatsApp; plus the advanced flow's Knowledge search, Memora observation writes, and live-agent handoff. Both flow JSONs were validated by round-trip import into a fresh Langflow.

SDK Parity

This is the TypeScript SDK. This change is an example + documentation and does not affect shared SDK functionality.

Change is TypeScript-specific (no Python update needed)
Python SDK PR created:

Use a Langflow flow as the agent brain while TAC owns the channels (Voice, SMS, WhatsApp), memory, streaming voice, and conversation continuity. The integration is ~100 lines in src/index.ts and drives both flows unchanged. - Minimal flow: Chat Input -> Prompt -> Language Model (streaming) -> Chat Output - Advanced flow: an Agent with custom Twilio components (Enterprise Knowledge search, Memora observation writer, live-agent handoff), shipped both embedded in the flow JSON and as readable .py under flow/components/. Component credentials resolve from Langflow global variables; nothing secret in the JSON. - Voice streams token-by-token to ConversationRelay; SMS/WhatsApp auto-send. Configurable default voice language via VOICE_LANGUAGE. - Wire LANGFLOW_* + VOICE_LANGUAGE/WELCOME_GREETING into examples/.env.example and link the example from getting_started/README.md Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

ryanrishi · 2026-06-10T14:20:43Z

+from langflow.custom import Component
+from langflow.inputs import StrInput, SecretStrInput, IntInput
+from langflow.template import Output
+from langflow.field_typing import Tool


How does this Python code get run? How do we know that the version of langflow being used it safe (no CVEs etc.) if there is no explicit installation pinning a version, verifying checksums, etc.?

The example never installs or executes Python itself — the component source rides inside the flow JSON and is run by whatever Langflow server the operator already runs. So Langflow version-pinning, patching, and CVE management are the operator's responsibility for their own deployment, exactly like any other Langflow flow; this example doesn't bundle or pin Langflow. The components depend only on requests + stock Langflow. I'll make the "tested against Langflow 1.9.2" note more prominent and link Langflow's install/security docs.

Co-authored-by: Ryan Rishi <ryan@ryanrishi.com>

…gflow trust boundary - Rename the observation-writer component from "Memora" to "Conversation Memory" everywhere: README, component source + filename, and the advanced flow JSON (node type, embedded class/name, and the encoded edge handle/id/dataType). Re-validated by importing the flow into a fresh Langflow. - Add a "Versions & security" note: the example doesn't bundle or install Langflow; the components run in the operator's own Langflow and depend only on requests + stock Langflow. Keep Langflow patched. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Copilot

Pull request overview

Adds a new Langflow “brain” example under getting_started/examples/langflow/, demonstrating how to drive Twilio Agent Connect channels (Voice streaming via ConversationRelay + SMS/WhatsApp auto-send) using a Langflow flow, with both a minimal and advanced (tools-enabled) Langflow flow configuration.

Changes:

Introduces a new Langflow example app (TypeScript) that maps TAC conversationId to Langflow session_id and streams tokens on voice.
Adds two Langflow flow JSONs (minimal + advanced) plus readable Python sources for custom Twilio tool components.
Updates getting-started docs and shared .env.example with Langflow-related configuration.

Reviewed changes

Copilot reviewed 10 out of 12 changed files in this pull request and generated 5 comments.

Show a summary per file

File	Description
getting_started/README.md	Links the new Langflow example from the getting-started index.
getting_started/examples/.env.example	Adds `LANGFLOW_*` vars plus optional voice language/greeting envs for the Langflow example.
getting_started/examples/langflow/tsconfig.json	Adds example-local TS config extending repo defaults.
getting_started/examples/langflow/src/index.ts	Implements TAC ↔ Langflow integration with voice streaming and messaging auto-send.
getting_started/examples/langflow/README.md	Documents setup, usage, advanced flow, and customization guidance.
getting_started/examples/langflow/package.json	Adds the example’s Node dependencies and run scripts.
getting_started/examples/langflow/package-lock.json	Locks example dependencies for reproducible installs.
getting_started/examples/langflow/flow/tac-langflow-example.json	Ships a minimal Langflow flow for streaming chat.
getting_started/examples/langflow/flow/tac-langflow-advanced.json	Ships an advanced flow with embedded custom Twilio tool components.
getting_started/examples/langflow/flow/components/twilio_live_agent_handoff.py	Readable source for the Studio/Flex handoff tool component.
getting_started/examples/langflow/flow/components/twilio_knowledge_search.py	Readable source for the Twilio Knowledge search tool component.
getting_started/examples/langflow/flow/components/twilio_conversation_memory_observation_writer.py	Readable source for the Conversation Memory observation writer tool component.

Files not reviewed (1)

getting_started/examples/langflow/package-lock.json: Generated file

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

+  const customerAddress = session.authorInfo?.address;
+  const contextParts: string[] = [];
+  if (customerAddress) contextParts.push(`Customer phone: ${customerAddress}`);
+  if (memoryContext) contextParts.push(memoryContext);


+
+Use a [Langflow](https://www.langflow.org/) flow as the agent "brain" while Twilio Agent Connect owns everything around it: the **Voice, SMS, and WhatsApp** channels, memory injection, token-by-token voice streaming via ConversationRelay, and conversation continuity.
+
+The flow owns the system prompt, tools, and any knowledge/RAG — you build it visually in Langflow. TAC handles the telephony and messaging. This example is intentionally minimal: ~80 lines in [`src/index.ts`](src/index.ts).


+
+## Customizing the experience
+
+Customization lands in one of two places: **the flow** (visual, no code) or **[`src/index.ts`](src/index.ts)** (the ~95-line handler).


+        StrInput(
+            name="account_sid",
+            display_name="Twilio Account SID",
+            info="AC...",
+            required=True,


Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

…nt_sid, stale line counts - index.ts: treat a blank LANGFLOW_API_KEY as unset (don't send an empty key and fail auth); strip the 'whatsapp:' prefix from the injected "Customer phone" line so tools receive a clean E.164 number - handoff component: drop the unused required `account_sid` input (the Studio execution uses API-key basic auth and never referenced it) — removed from the component source, the embedded flow JSON, and the README global-variable table (TWILIO_ACCOUNT_SID is no longer needed) - README: drop the stale "~80 lines" / "~95-line handler" counts Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

gabeoliveira requested review from ryanrishi, ryanrouleau and xinghaohuang91 as code owners June 9, 2026 21:00

ryanrishi reviewed Jun 10, 2026

View reviewed changes

gabeoliveira and others added 4 commits June 10, 2026 11:32

Update getting_started/examples/langflow/README.md

63202f4

Co-authored-by: Ryan Rishi <ryan@ryanrishi.com>

Update getting_started/examples/langflow/README.md

1363461

Co-authored-by: Ryan Rishi <ryan@ryanrishi.com>

Update getting_started/examples/langflow/README.md

ed4dea2

Co-authored-by: Ryan Rishi <ryan@ryanrishi.com>

ryanrishi requested a review from Copilot June 16, 2026 14:46

Copilot started reviewing on behalf of ryanrishi June 16, 2026 14:47 View session

Copilot AI reviewed Jun 16, 2026

View reviewed changes

gabeoliveira and others added 2 commits June 24, 2026 16:04

Potential fix for pull request finding

2aa02d9

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

Navigation Menu

Uh oh!

Add Langflow example (minimal + advanced flows) - #64

Add Langflow example (minimal + advanced flows)#64
gabeoliveira wants to merge 7 commits into
twilio:mainfrom
gabeoliveira:example/langflow

gabeoliveira commented Jun 9, 2026

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

ryanrishi Jun 10, 2026

Uh oh!

gabeoliveira Jun 10, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants


		Use a [Langflow](https://www.langflow.org/) flow as the agent "brain" while Twilio Agent Connect owns everything around it: the Voice, SMS, and WhatsApp channels, memory injection, token-by-token voice streaming via ConversationRelay, and conversation continuity.

		The flow owns the system prompt, tools, and any knowledge/RAG — you build it visually in Langflow. TAC handles the telephony and messaging. This example is intentionally minimal: ~80 lines in [`src/index.ts`](src/index.ts).


		## Customizing the experience

		Customization lands in one of two places: the flow (visual, no code) or [`src/index.ts`](src/index.ts) (the ~95-line handler).

Uh oh!

Conversation

gabeoliveira commented Jun 9, 2026

Summary

What's included

Type of Change

Checklist

SDK Parity

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

ryanrishi Jun 10, 2026

Choose a reason for hiding this comment

Uh oh!

gabeoliveira Jun 10, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants