Uses of LangGraph

 LangGraph is used to build stateful, reliable, and complex multi-agent applications, offering benefits like persistence, human-in-the-loop oversight, and controllable, iterative workflows. Key use cases include advanced AI agents, research bots, complex chatbots, and coding assistants. Synonyms for its use cases include agentic workflows, stateful orchestration, graph-based AI, and multi-agent systems. 

Key Use Cases of LangGraph:

• Multi-Agent Systems: Creating complex workflows where specialized agents collaborate, such as a researcher agent and a writer agent.
• Human-in-the-loop Workflows: Allowing agents to pause, request human approval, or take feedback before proceeding with actions.
• Complex Research and Summarization: Developing AI research assistants that can browse the web, extract data, and generate reports.
• Customer Support Agents: Building conversational agents that hold context over long interactions and use tools to solve user problems.
• Code Generation and Refinement: Enabling iterative coding workflows where an LLM writes code, tests it, and iterates on errors.
• Router Workflows: Directing tasks through specific paths in a graph, allowing for high adaptability and conditional logic.
• Data Extraction Pipelines: Using structured graph nodes for tasks like text cleaning, data extraction, and processing.
• Long-Running Agents: Maintaining state over extended periods, useful for complex, multi-turn tasks that persist over time. 

Examples of Use Cases in Action:

• Research Assistant: A bot that uses a to search the web, evaluate sources, and generate a final report.
• Customer Support Chatbot: Using and to maintain user context over long conversations.
• Autonomous Agent: Systems that plan, act, and observe, repeating the cycle to solve complex problems.
• Data Analysis Agents: Agents that read data, generate insights, and update a shared state. 

Companies Utilizing LangGraph:

• Uber, Klarna, J.P. Morgan, and Cisco use LangGraph to build robust AI agents.
• GitLab, Replit, and Qodo leverage it for complex coding tasks. 

Key Features Powering Use Cases:

• State Management: Tracks the state of the conversation and workflow.
• Persistence: Resumes operations from a specific point.
• Streaming: Provides real-time visibility into the agent's thought process. 

For more, you can read the case studies on the official LangChain documentation.

RAG Links

 

1. 

Build an AI Agent in 5 Minutes | Google Colab + LangChain Tutorial  link

2. 

RAG Demystified: The Only Guide You Need to Build Real-World RAG Modals link

2.1 link  

How I Learned Agentic AI by Building a Real System

3. mrd bouke  simple local rag link

4. 

Build Production-Ready AI Agents for DevOps with Strands & Temporal 🔥  link

AI Agents For DevOps | Let's Talk the Future of DevOps Engineering  link

Generative AI For DevOps | Unleash the Power of Future 🔥  link

5. https://www.datacamp.com/tutorial/langgraph-tutorial?utm_cid=19589720824&utm_aid=157098106775&utm_campaign=230119_1-ps-other~dsa-tofu~all_2-b2c_3-apac_4-prc_5-na_6-na_7-le_8-pdsh-go_9-nb-e_10-na_11-na&utm_loc=9301674-&utm_mtd=-c&utm_kw=&utm_source=google&utm_medium=paid_search&utm_content=ps-other~apac-en~dsa~tofu~tutorial~artificial-intelligence&gad_source=1&gad_campaignid=19589720824&gbraid=0AAAAADQ9WsGe7tTE3K1eGRWvxbvuJw8Lh&gclid=CjwKCAjwqazPBhALEiwAOuXqdBKvo8TFAS8CF3pM8BcDT_hWcHnUoP3Xy7Y_xJfrFAray1RZbDW8mxoC8o8QAvD_BwE

LangGraph Tutorial: What Is LangGraph and How to Use It?

link

6.  Vectorless RAG link 

7. krsish 

Step By Step Process To Build MultiModal RAG With Langchain(PDF And Images)

link

https://github.com/krishnaik06/Agentic-LanggraphCrash-course  




  

Comparing CrewAI with LangGraph

 The distinction between CrewAI and LangGraph lies in their core philosophies: CrewAI prioritizes autonomous role-based collaboration (agent-centric), while LangGraph focuses on deterministic, state-based workflows (graph-centric). 

LangGraph is considered more controllable because it operates as a state machine where you explicitly define every node, edge, and state transition. CrewAI is considered "uncontrollable" in the same context because it abstracts away these details, allowing agents to decide how to collaborate, which can lead to unpredictable intermediate steps. 

How CrewAI is "Uncontrollable" (Abstracted & Autonomous) 

CrewAI is designed to get agents working together quickly using high-level abstractions.

• Black-Boxed Internal Steps: CrewAI hides the internal dialogue between agents. You define roles and goals, but the framework decides how to orchestrate the tasks.
• Dynamic, Less Predictable Flow: Because agents are designed for autonomy, their collaboration path can vary between runs, making strict control difficult.
• Limited State Visibility: It is challenging to inspect intermediate steps if a task goes wrong.
• Reliance on LLM for Logic: The LLM manages how information is passed, leading to variability in output. 

How LangGraph is "Controllable" (Deterministic & Explicit)

LangGraph treats multi-agent workflows as a cyclic graph (nodes and edges).

• Explicit State Machine: You precisely define the nodes (functions or agents) and edges (logic). You know exactly where the data is and where it is going next.
• Granular Debugging: Because state is updated at every step, you can pause, inspect, and debug any part of the workflow.
• Conditional Routing: LangGraph makes it easy to implement complex logic—such as routing, human-in-the-loop intervention, or specific loopbacks.
• Persistence Layer: LangGraph has built-in persistence, which is vital for long-running, stateful agentic workflows. 

Comparison Summary

Feature	CrewAI	LangGraph
Philosophy	"Model the team" (Agent-centric)	"Model the workflow" (Graph-centric)
Control Level	High abstraction, less visibility	Low-level, explicit, high visibility
Workflow	Primarily Sequential/Hierarchical	Arbitrary cycles and branching
Debugging	Difficult (black box)	Excellent (state-based)
Best For	Quick prototyping, research, writing	Production systems, RAG, complex logic

Note: Recent additions like "Flows" in CrewAI are bringing more explicit control to the framework, allowing developers to define steps more explicitly, similar to LangGraph. 

React : Event handlers with parameters in functional components

 Read with this post

In React, you cannot directly pass a parameter to a handler like because this executes the function immediately during rendering. Instead, you must pass a reference to a function that will execute later. 

1. Using Arrow Functions (Recommended)

The most common and readable way to pass parameters is by wrapping the handler call in an anonymous arrow function.

• Standard Argument: .
• With Event Object: If you also need the React event object (e.g., to call ), pass it explicitly through the arrow function:. 

2. Using the Method

You can use the JavaScript Function.prototype.bind() method to create a new function with the arguments pre-filled.

• Syntax: .
• Note: In class components, is required as the first argument to maintain context. In functional components, you can pass as the first argument. The React event object is automatically forwarded as the final argument. 

3. Using Data Attributes

For performance-critical lists, you can store data in

HTML data-* attributes

and retrieve them from the event object.

• Implementation:
• JSX: .
• Handler: .
• Advantage: Avoids creating a new function instance on every render, which is useful for very large lists. 

4. Function Currying

Currying involves creating a function that returns another function. This keeps your JSX cleaner.

• Handler Definition: .
• JSX Usage: . 

Method	Primary Use Case	Performance Impact
Arrow Function	Most common, standard applications	Minimal (creates new function on render)
.bind()	Class components	Minimal (same as arrow function)
Data Attributes	High-performance lists	Best (uses a single function reference)
Currying	Clean JSX syntax	Minimal (same as arrow function)

Caution: Creating functions inside the method (via arrow functions or ) can sometimes cause unnecessary re-renders in child components that use React.memo. 

CSS Flex

 In CSS, Flexbox (Flexible Box Layout) is a one-dimensional layout model designed for arranging elements in rows or columns. It allows child elements (flex items) to "flex" their sizes—growing to fill unused space or shrinking to fit smaller containers—without the need for complex positioning or floats. 

The term "flex" is commonly used in two ways in CSS: 

1. The Property

Applying to a parent element (the flex container) automatically makes all its direct children flex items.

• Main Axis & Cross Axis: Items are laid out along a main axis (horizontal by default) and a perpendicular cross axis.
• Container Control: You can control the container using properties like (main-axis alignment) and (cross-axis alignment). 

2. The Shorthand Property

Used on individual flex items, the property is a shorthand for three sub-properties that determine how that specific item occupies space:

• : Defines how much an item should grow relative to its siblings if there is extra space.
• : Defines how much an item should shrink if the container is too small to fit everything.
• : Defines the initial size of the item before any growing or shrinking occurs. 

Common Shorthand Values:

• : Equivalent to . The item will grow and shrink to fill available space equally with other items marked .
• : Equivalent to . The item grows and shrinks based on its initial content size.
• : Equivalent to . The item becomes fully inflexible, neither growing nor shrinking. 

Key Benefits

• Responsiveness: Items adjust dynamically to different screen sizes and orientations.
• Alignment: Easily center content vertically and horizontally with a few lines of code.
• Order: You can change the visual order of items using the property without changing the underlying HTML. 

CSS : Elements that collapse to 0px

 

1. Elements that collapse to 0px

In CSS, almost any Block-level or Inline-block element will collapse to 0px height if it contains no children, no text, and no fixed dimensions.

Common examples include:

• Containers: <div>, <section>, <article>, <main>, <header>, <footer>.
• Layout Elements: <span> (if set to display: block or inline-block), <aside>, <nav>.
• Lists: <ul> and <ol> (if they have no <li> children).
• Flex/Grid Items: If a container is display: flex, its children will still collapse unless they have content or a specific flex-basis.

Note: Elements like <img>, <input>, or <button> are "Replaced Elements." They usually have default browser dimensions even when "empty."

---

2. Attributes that require a Parent Reference

The "100% of auto is 0" rule applies to several CSS properties. If the parent’s size is determined by its own content (dynamic), these attributes will fail to calculate:

• height: As you discovered, 100% height requires the parent to have a fixed height (px, vh, etc.) or also be a percentage child of a fixed-height container.
• min-height / max-height: Percentage values here follow the exact same rule as height.
• margin (Top/Bottom): If you use percentages for vertical margins, they are actually calculated based on the width of the parent, not the height (a common CSS "gotcha").
• padding (Top/Bottom): Like margins, vertical padding percentages are also based on the parent's width.
• top / bottom: When using position: absolute, these percentages relate to the height of the nearest "positioned" (relative/absolute) ancestor.
• flex-basis: If set to a percentage, it depends on the parent flex container’s main axis size.

The Logic Tip

In CSS, Width is "infinite" (it defaults to 100% of the screen/parent), but Height is "finite" (it defaults to 0 and grows with content). This is why width: 100% almost always works, while height: 100% usually feels "broken."

Inline styles in React in jsx

 The attribute declaration and naming changes in jsx. 

HTML : 

<table style="border-collapse : collapse" > </table>

JSX: 

<table style={{ borderCollapse : "collapse" }} > </table>