Forem: Vedant Khairnar

Building Your First AI Agent: Tavily X LangGraph

Vedant Khairnar — Mon, 22 Sep 2025 19:19:40 +0000

Building Your First AI Agent: Tavily X LangGraph

The Challenge: When Static Knowledge Meets Dynamic Reality

Picture this: You're a developer at a fintech startup. Your CEO bursts into the office on Monday morning with excitement. "I just saw ChatGPT answer questions about current market conditions! Can we build something like that for our trading platform?"

You think for a moment. Your current system is smart, but it's trapped in time—limited to whatever data it was trained on. The markets change every second, but your AI is stuck in the past.

Sound familiar? You're not alone. This is the moment thousands of developers face: the gap between static AI knowledge and dynamic real-world information.

"My AI model is perfectly fine... it just thinks it's still 2023"

🎬 Watch the full tutorial:

Click above to watch the 10-minute coding walkthrough, or continue reading for the complete guide!

The Revelation: From Scripts to Intelligent Systems

The moment you realize the difference between scripts and agents

What Makes Something "Intelligent"?

💡 What is an AI Agent?

An AI agent is a software system that can perceive its environment, make decisions, and take actions to achieve specific goals. Unlike simple scripts that follow fixed steps, AI agents can adapt their behavior based on the situation, maintain context across interactions, and handle unexpected scenarios intelligently.

Let's start with a fundamental question that might be on your mind:

🤔 "What's the difference between a regular script that calls APIs and an 'intelligent agent'?"

Imagine you're planning a dinner party. A script would be like following a rigid recipe— step 1, step 2, step 3, done. But an intelligent agent? That's like having a chef who can:

Adapt to what ingredients are available
Make decisions based on dietary restrictions
Remember preferences from last time
Handle unexpected situations gracefully

An AI agent doesn't just follow instructions— it processes information, makes decisions, and maintains context throughout a conversation.

The Architecture of Intelligence

Here's where most developers get stuck. You start thinking: "I need to call an API, process the response, format it nicely..." But that's thinking like a script, not like an agent.

The paradigm shift: Instead of sequential function calls, think of independent processing nodes that communicate through shared state. Each node has one job, does it well, and passes information forward.

LangGraph Workflow Visualization:

[Question] → [Search Node] → [Process Node] → [Answer]
     ↓             ↓              ↓           ↓
   State      State Update   State Update  Final State

This is where LangGraph comes in—it's the framework that turns your collection of functions into an intelligent workflow.

💡 What is LangGraph?

LangGraph is an opensource framework for building stateful, multi-step applications with Large Language Models (LLMs). Think of it as a workflow orchestrator that lets you create AI agents by connecting different processing steps (called "nodes") through a shared state. Instead of writing linear scripts, you build intelligent systems that can make decisions, handle errors, and scale gracefully.

The Journey Begins: Meet Your Tools

Chapter 1: The Search Intelligence Layer

First, let's talk about the star of our show: Tavily.

💡 What is Tavily?

Tavily is an AI-optimized search and data-extraction API designed specifically for AI applications. Unlike traditional search APIs that return raw HTML and links, Tavily intelligently processes web content, extracts relevant information, and provides clean, structured data that your AI systems can immediately use. Think of it as having a smart research assistant built into your code.

🤔 "Why not just use Google Search API or call ChatGPT directly?"

Great question! Let me tell you a story.

Remember the last time you asked someone to "research" something for you? If you asked your intern, they might come back with a pile of printed web pages and say "here you go!" But if you asked an experienced analyst, they'd come back with a clean summary, key insights, and relevant sources.

That's the difference between traditional search APIs and Tavily:

Traditional Search APIs are like your intern:

Give you raw HTML that needs parsing
Return results in unpredictable formats
Require extensive filtering and processing
No understanding of what information is actually useful

Tavily is like your experienced analyst:

Intelligently extracts and processes content from multiple sources
Understands context and relevance
Delivers clean, structured information ready for AI consumption
Provides built-in analysis and synthesis

Chapter 2: The Workflow Orchestrator

Now, let's talk about LangGraph in more detail.

🤔 "Can't I just write regular Python functions that call each other?"

Absolutely! You could write something like this:

def simple_agent(question):
    search_results = search_web(question)
    answer = format_answer(search_results)
    return answer

But here's what happens in the real world:

Your CEO wants to add fact-checking: "Rewrite everything!"
Your CTO wants error handling: "Rewrite everything!"
Your PM wants to save results to a database: "Rewrite everything!"

With LangGraph, adding new capabilities means adding new nodes, not rewriting your entire system. It's like building with LEGO blocks instead of carving from stone.

Building Our First Agent: The Step-by-Step Story

Setting the Stage

Let's create something practical: an AI agent that can answer questions about current events with verified sources. But here's the key - we'll build this in two stages to show you the progression from simple concept to production-ready system.

The Learning Path:

Hello World: 4 lines that demonstrate the core concept
Production Agent: Full workflow with proper architecture

This approach mirrors how you should think about building AI systems - start simple, understand the fundamentals, then add sophisticated orchestration.

Step 1: Hello World - The Foundation (2 minutes)

Before we build a complex agent, let's understand what makes Tavily special with the simplest possible example:

# hello_tavily.py - Your first intelligent search in 4 lines
"""
Hello World: Your First Tavily Search in 4 Lines
This is the simplest possible example to get started with Tavily.
"""

import os
from dotenv import load_dotenv
from tavily import TavilyClient

# Load your API key
load_dotenv()

# Initialize Tavily client  
tavily = TavilyClient(api_key=os.getenv("TAVILY_API_KEY"))

# Make a search request & print it - This is the magic!
response = tavily.search("What are the latest Python features?", include_answer=True)
print(response.get("answer", "No answer found"))

Run this and you'll see:

Python 3.13 features a revamped interactive interpreter with multi-line editing and an experimental free-threaded mode. It also includes improved type hints and better error messages.

"It just works!" - The developer's dream

🤔 "Why start so simple?"

Because this minimal example demonstrates the fundamental breakthrough: Tavily doesn't give you search results - it gives you intelligence.

Look at what just happened:

You asked a question in plain English
Tavily searched multiple sources
AI analyzed and synthesized the information
You got back a coherent, intelligent answer

No HTML parsing. No result filtering. No complex data processing. Just intelligence.

💡 What does include_answer=True do?

This parameter tells Tavily to not just return search results, but to analyze and synthesize the information using AI. Instead of getting back URLs and snippets, you get a coherent, intelligent answer that combines information from multiple sources. It's like having a research analyst read everything and give you a summary.

The include_answer=True parameter is what makes this magical - it tells Tavily "don't just find information, understand it and give me a smart answer."

Step 2: The Environment Setup

# Our simple dependency list
tavily-python    # The AI-optimized search layer
langgraph        # The workflow orchestration framework  
python-dotenv    # Secure environment management

🤔 "Only three dependencies? Seems too simple!"

That's the beauty of using specialized tools. You're not building a search engine or a workflow framework— you're building intelligence on top of existing, optimized infrastructure.

Think of it like building a house. You don't manufacture bricks; you use bricks to build something amazing.

Step 3: From Simple to Sophisticated - The Production Agent

Now that you understand the core concept, let's build a production-ready agent that adds proper workflow orchestration:

The State Blueprint

from typing import TypedDict

class AgentState(TypedDict):
    question: str
    search_results: dict  
    answer: str

💡 What is TypedDict?

TypedDict is a Python feature that lets you define the structure of a dictionary with specific key names and types. It's like creating a contract that says "this dictionary will always have these exact keys with these specific data types." This helps prevent bugs and makes your code self-documenting.

This innocent-looking piece of code is actually profound. You're defining the "memory" of your agent— what information it carries as it moves through its thinking process.

State Flow Visualization:

Initial State:           After Search Node:        After Answer Node:
{                       {                         {
  question: "...",        question: "...",          question: "...",
  search_results: {},     search_results: {...},   search_results: {...},
  answer: ""              answer: ""                answer: "Final answer"
}                       }                         }

     ↓                       ↓                         ↓
[Search Node] ────────→ [Answer Node] ────────→ [END]

🤔 "Why use TypedDict instead of a regular dictionary?"

Type safety! Your agent's state is like a contract— each node knows exactly what data it can expect and what it should provide. This prevents bugs and makes your code self-documenting.

The Intelligence Nodes

Now comes the fun part— defining how your agent thinks.

Node 1: The Research Phase

def search_web(state: AgentState):
    """
    Node 1: Intelligent Web Search

    Uses Tavily's AI-optimized search to find and process web information.
    Behind the scenes: Tavily searches multiple sources, extracts relevant content,
    and uses AI to synthesize the information into a coherent answer.
    """
    print(f"🔍 Searching: {state['question']}")

    search_results = tavily.search(
        query=state["question"],
        max_results=3,           # Number of sources to aggregate
        include_answer=True      # Get AI-generated answer, not just links!
    )

    return {"search_results": search_results}

🤔 "What exactly happens when I set include_answer=True?"

This is where Tavily's intelligence shines. Behind this simple parameter, Tavily is:

Searching across multiple high-quality sources
Extracting relevant content from each source
Analyzing the context and relevance
Synthesizing information from multiple sources
Generating a coherent answer with proper attribution

It's like having a research team that can read hundreds of articles and give you a smart summary in seconds.

Node 2: The Synthesis Phase

def generate_answer(state: AgentState):
    """
    Node 2: Answer Synthesis and Formatting

    Takes the search results from Tavily and formats them into a clean,
    user-friendly response with proper source attribution.
    """
    print("🤖 Formatting answer...")

    # Extract Tavily's AI-generated answer (the smart synthesis)
    ai_answer = state["search_results"].get("answer", "No answer found")

    # Extract source URLs for transparency and verification
    sources = [f"- {result['title']}: {result['url']}" 
              for result in state["search_results"]["results"]]

    # Combine the intelligent answer with source attribution
    final_answer = f"{ai_answer}\n\nSources:\n" + "\n".join(sources)

    return {"answer": final_answer}

🤔 "Why separate this into its own node instead of doing it in the search function?"

Modularity! Each node has a single responsibility:

Search node: Get information
Answer node: Format and present

Tomorrow, when you want to add a fact-checking node between them, you just insert it. No rewriting required.

Step 4: The Workflow Architecture

💡 What is StateGraph?

StateGraph is LangGraph's core class for building workflows. It's like a flowchart for your code where each box (node) is a function, and arrows (edges) show how data flows between them. The "state" is the shared memory that gets passed and updated as it moves through each node.

def create_agent():
    """
    Build the AI Agent Workflow

    This creates a StateGraph where:
    - Each node is an independent function that can read/update shared state
    - LangGraph handles orchestration, state management, and execution flow
    - Easy to extend: just add more nodes and define their connections
    """
    # Create the workflow graph
    workflow = StateGraph(AgentState)

    # Define our processing nodes
    workflow.add_node("search", search_web)        # Step 1: Gather information  
    workflow.add_node("answer", generate_answer)   # Step 2: Process and format

    # Define the flow of intelligence
    workflow.set_entry_point("search")      # Start here
    workflow.add_edge("search", "answer")   # After search, go to answer
    workflow.add_edge("answer", END)        # After answer, we're done

    return workflow.compile()

LangGraph Architecture:

    START
      ↓
 ┌─────────────┐
 │ search_web  │ ← Node 1: Web Intelligence
 │ (Tavily)    │
 └─────────────┘
      ↓
 ┌─────────────┐
 │generate_    │ ← Node 2: Format & Sources
 │answer       │
 └─────────────┘
      ↓
     END

State flows through each node:
• Each node reads current state
• Each node returns state updates  
• LangGraph manages the transitions

This is where your collection of functions becomes an intelligent agent. You're not just calling functions— you're orchestrating a thinking process.

🤔 "What does workflow.compile() actually do?"

It optimizes your graph for execution! LangGraph analyzes your workflow, optimizes the execution path, and creates a runtime engine that can handle state management, error recovery, and parallel processing when possible.

The Moment of Truth: Bringing Intelligence to Life

When your code actually works on the first try

Let's see our progression in action:

The Simple Version First:

python hello_tavily.py

Output:

Python 3.13 features a revamped interactive interpreter with multi-line editing and an experimental free-threaded mode. It also includes improved type hints and better error messages.

This is profound! In two lines of code, you asked a question and got back synthesized intelligence from multiple web sources. No parsing, no filtering, no complexity.

When two lines of code gives you web intelligence

The Production Agent:

python langgraph_agent.py

Question: "What are the latest developments in AI regulation?"

Agent's Process:

🔍 Research Phase: Tavily searches current sources, finds recent articles about AI regulation
🤖 Synthesis Phase: Formats the intelligent summary with sources

Result: A comprehensive answer about recent AI regulation developments with links to the actual sources.

🤔 "How is this different from just asking ChatGPT?"

Key differences:

Real-time information: Your agent has access to current information
Programmable: You can integrate this into applications, APIs, automation
Transparent: You see exactly which sources were used
Extensible: You can add custom processing, validation, or formatting
Cost-effective: You pay for what you use, not general AI model costs
Progressive complexity: You started simple and built sophistication step by step

The Path Forward: From Simple to Sophisticated

What We Built vs. What's Possible

Our simple agent has just two nodes, but you've built something profound:

Intelligent information gathering
Automated synthesis and formatting
Source attribution and transparency
Extensible architecture for future enhancements

The Natural Evolution

Here's where your agent can grow:

Level 2: Adding Memory

# Add a memory node
workflow.add_node("remember", save_to_memory)
workflow.add_edge("answer", "remember")

Level 3: Adding Validation

# Add fact-checking
workflow.add_node("validate", fact_check)
workflow.add_edge("search", "validate")
workflow.add_edge("validate", "answer")

Level 4: Adding Conditional Logic

# Add decision-making
def should_search_more(state):
    confidence = analyze_confidence(state["search_results"])
    return "search_more" if confidence < 0.8 else "answer"

workflow.add_conditional_edges("search", should_search_more)

Common Questions and Real Answers

Technical Questions

🤔 "How does LangGraph handle errors if one node fails?"

LangGraph provides built-in error handling. You can define fallback paths, retry logic, and error recovery strategies. For example:

workflow.add_node("fallback_search", backup_search_method)
# If primary search fails, try backup

🤔 "Can I run multiple nodes in parallel?"

Absolutely! LangGraph automatically identifies nodes that can run in parallel and executes them concurrently when possible.

🤔 "How do I debug what's happening inside the workflow?"

LangGraph provides excellent introspection. You can log state at each step, visualize the execution graph, and even step through execution for debugging.

Business Questions

🤔 "What are the real-world applications of this pattern?"

The possibilities are endless:

Customer Support: Agents that can access current documentation and policies
Market Analysis: Real-time competitive intelligence systems
Content Creation: Research assistants that gather current information
Compliance: Systems that check against current regulations
Sales Intelligence: Tools that provide current company information

🤔 "How much does this cost compared to using ChatGPT API?"

The economics are different:

ChatGPT: You pay per token for general intelligence
Tavily + LangGraph: You pay for specific, optimized search operations
Your Agent: Often more cost-effective for high-volume, specific use cases

🤔 "Is this production-ready?"

The patterns we've shown are absolutely production-ready. Companies are running similar architectures at scale. The key is starting simple (like we did) and evolving based on your specific needs.

Your Next Steps: The Developer's Action Plan

Immediate Actions (Next 30 minutes)

Start with the absolute basics: Run hello_tavily.py - just 2 lines of core logic!
Understand the magic: See how include_answer=True transforms search into intelligence
Build complexity: Try langgraph_agent.py to see workflow orchestration
Get your free Tavily API key (1000 requests/month) at tavily.com
Compare the approaches: Notice how both use the same intelligence foundation

Short-term Exploration (This week)

Add inline comments to understand each line of code
Modify parameters (try different max_results values in both examples)
Integrate with your existing project (API endpoint, database storage)
Try different types of questions (current events, technical topics, market data)
Explore the enhanced README for callout boxes and expected outputs

Long-term Mastery (This month)

Build a production application using the LangGraph patterns
Add conditional logic and error handling to your workflow
Implement memory and personalization features
Scale your agent for your specific use case
Study the progression from simple to sophisticated architecture

The Bigger Picture: The Future of Intelligent Applications

What you've built today isn't just a demo—it's a glimpse into the future of software development. We're moving from static applications to intelligent systems that can:

Adapt to changing information
Make contextual decisions
Learn from interactions
Integrate seamlessly with human workflows

Your simple AI agent is a building block in this larger transformation. Every great system starts with understanding the fundamentals, and you now understand how to build intelligence that connects to the real world.

The tools are here. The patterns are proven. The only question left is: What will you build?

Resources for Your Journey

Code Repository

Main Demo: Simple agent we built in this tutorial
Advanced Examples: Production-ready patterns and complex workflows
Documentation: Detailed API references and guides

Learning Path

Start Here: Run the basic demo
Understand: Read through the code with fresh eyes
Experiment: Modify parameters and add simple features
Build: Create your own agent for a real problem
Scale: Add production features and deploy

Community

GitHub Issues: For technical questions and bug reports
Documentation: Comprehensive guides and API references
Examples: Real-world implementations and use cases

Remember: Every expert was once a beginner. Every complex system started with a simple "Hello, World." You've just built your first AI agent. Where you take it next is limited only by your imagination.

Happy building! 🚀

Appendix: Complete Code Reference

"""
Complete AI Agent Implementation
A production-ready foundation for intelligent applications
"""
import os
from dotenv import load_dotenv
from tavily import TavilyClient
from langgraph.graph import StateGraph, END
from typing import TypedDict

# Load environment
load_dotenv()
tavily = TavilyClient(api_key=os.getenv("TAVILY_API_KEY"))

# Define agent state
class AgentState(TypedDict):
    question: str
    search_results: dict  
    answer: str

# Intelligence nodes
def search_web(state: AgentState):
    """Research phase: Gather intelligent information"""
    print(f"🔍 Researching: {state['question']}")

    search_results = tavily.search(
        query=state["question"],
        max_results=3,
        include_answer=True
    )

    return {"search_results": search_results}

def generate_answer(state: AgentState):
    """Synthesis phase: Create intelligent response"""
    print("🤖 Synthesizing answer...")

    ai_answer = state["search_results"].get("answer", "No answer found")
    sources = [f"- {result['title']}: {result['url']}" 
              for result in state["search_results"]["results"]]

    final_answer = f"{ai_answer}\n\nSources:\n" + "\n".join(sources)

    return {"answer": final_answer}

# Workflow orchestration
def create_agent():
    """Build the intelligent workflow"""
    workflow = StateGraph(AgentState)

    workflow.add_node("search", search_web)
    workflow.add_node("answer", generate_answer)

    workflow.set_entry_point("search")
    workflow.add_edge("search", "answer") 
    workflow.add_edge("answer", END)

    return workflow.compile()

# Simple interface
def ask_agent(question: str):
    """Ask the agent a question"""
    agent = create_agent()

    result = agent.invoke({
        "question": question,
        "search_results": {},
        "answer": ""
    })

    return result["answer"]

# Interactive demonstration
if __name__ == "__main__":
    print("🤖 AI Agent Ready! Ask me about current events.")
    print("Type 'quit' to exit.\n")

    while True:
        question = input("❓ Your question: ")
        if question.lower() in ['quit', 'exit']:
            print("👋 Goodbye!")
            break

        try:
            answer = ask_agent(question)
            print(f"\n📝 {answer}\n")
            print("-" * 50)
        except Exception as e:
            print(f"❌ Error: {e}")

This complete implementation is your starting point for building intelligent, real-world applications.

🎉 Congratulations! You're Now an AI Agent Developer

You did it! You built actual web intelligence

You've just:
✅ Built web intelligence in 4 lines of code

✅ Created a production-ready agent architecture

✅ Learned the difference between scripts and agents

✅ Discovered AI-optimized search infrastructure

✅ Implemented modular, extensible workflows

What's next? Take your newfound powers and build something amazing. The world needs more intelligent applications, and now you know how to create them.

Getting Started with SuprSend Inbox in Your Next.js App

Vedant Khairnar — Mon, 22 Sep 2025 19:19:38 +0000

Picture this: You're a business owner, and it's time for a big product sale — or maybe an important update that your customers absolutely need to know. You hit "Send," confident it’ll reach your audience.
Hours later, reality sets in — your users didn’t even notice it. The result? Missed opportunities and disengaged customers.

This is a problem that every business faces at some point, and it can be solved with the right tools. That’s where SuprSend Inbox comes in.

In this post, let's walk through on what is SuprSend Inbox and how it can boost your business. We'll also dive into a step-by-step guide on how to seamlessly integrate SuprSend Inbox into your Next.js application, so you can keep your users engaged and informed — every time.
You'll also get an introduction to Headless Inbox and how to leverage it for custom notifications.

By the end of this article, you'll have a working notification center in your app and a deeper understanding of how to personalize and extend it to meet your needs.

1. What is SuprSend Inbox?

SuprSend is a notification stack as a service platform for easily creating, managing and delivering notifications to your end users. SuprSend has all the features set which enable you to send notifications in a reliable and scalable manner, as well as take care of end-user experience, thereby eliminating the need to build any notification service in-house.

2. Benefits of Using SuprSend Inbox

Effortless Integration: Minimal setup, easy to embed into React/Next.js apps without backend complexity.
Real-time Engagement & Personalization: Deliver instant notifications directly to users, enhance the user experience by organizing them neatly in a persistent inbox, and personalize messaging based on user behavior and preferences.
Scalable: SuprSend Inbox can handle notifications for both small and large applications as your user base grows.
Headless Mode: Full control over notification display and design via API for a custom UI.

Whether you're working on a large-scale enterprise application or a smaller personal project, integrating a notification inbox provides a unified and user-friendly way to interact with your users.

3. Steps to Integrate SuprSend Inbox into Your Next.js App

Let's integrate SuprSend Inbox into your Next.js project in some simple steps:

Step 1: Sign Up and Set Up Your Workspace

Sign Up: Visit the SuprSend Dashboard and create your account.
If your company account is already set up, request your admin to invite you to the team.
We'll use the sandbox environment for demonstration purposes. A sample user will be created automatically for testing purposes during the workspace setup.

Step 2: Create a Notification Template

Navigate to the Templates section in the SuprSend Dashboard.
Click on New Template, and provide a name. This creates a draft template.
Open the newly created template and enable the Inbox channel.
Fill in the required details for the template, such as the header and text content. Once complete, click Publish Draft, and provide a version name for your internal tracking.

Step 3: Create a Workflow

Go to the Workflows section and click on New Workflow. Provide a name for the workflow and select the Notification Category to create a draft workflow. Alternatively, you can use one of SuprSend's pre-configured workflow templates.

Open the draft workflow and drag-and-drop the Inbox node from Delivery section into the workflow canvas, placing it between the Trigger and Exit nodes. You can also explore other nodes and functions as needed.

Select the Inbox node, configure it by linking the notification template you created earlier, and save the configuration.

Commit the workflow to make it live.

Step 4: Create a New Project and Install SuprSend

Here’s the GitHub repository containing the codebase we’ll be working on today. Feel free to refer to it alongside our session for better understanding.

Get started by creating a Next.js project and adding the SuprSend Inbox SDK:
Run the following commands:

# Create a new project
npx create-next-app@latest suprsend-next-inbox

# Navigate to the project directory
cd suprsend-next-inbox

# Install SuprSend React Inbox SDK using yarn
yarn add @suprsend/react-inbox

Step 5: Mount SuprSend Inbox Component in `App.jsx`

In the Next.js app, navigate to the pages directory and open the index.js file.
Here, we'll import the SuprSend Inbox component and mount it within our app.

import dynamic from "next/dynamic";
const SuprSendInbox = dynamic(() => import("@suprsend/react-inbox"), {
  ssr: false,
}); // for client side rendering

export default function Home() {
  return (
    <>
      <SuprSendInbox 
      />
    </>
  );
}

This simple step integrates the Inbox component directly into your app, ready for use. Now let's add the required props.

Step 6: Extract All Props from the SuprSend Dashboard

To get it working with your workspace in the sandbox environment, you'll need to get a few credentials from the SuprSend Dashboard.

workspaceKey: You can find it in SuprSend Dashboard inside Settings -> API Keys.
subscriberId: This is a unique string for every distinctId used for authentication to the inbox service. You can check generation docs.
distinctId: This ID uniquely identifies a user (often an email or user account ID) and can be found on the Users page.

tenantId, pageSize, pagination, and stores are some additional props that you can pass but are not mandatory.

Step 7: Passing the Appropriate Props to SuprSend Components

Now that you've got the necessary credentials, it's time to modify the index.js file like so:

import dynamic from "next/dynamic";

const SuprSendInbox = dynamic(() => import("@suprsend/react-inbox"), {
  ssr: false,
});

export default function Home() {
  return (
    <>
      <SuprSendInbox 
      workspaceKey="<workspace-key>" // Replace with your workspace key
      subscriberId="<subscriber_id_>" // Replace with your subscriber ID
      distinctId="<distinct_id>" // Replace with the user's distinct ID
      />
    </>
  );
}

For production setup, pass the necessary props through environment variables.
That's it. You don't need to initialize the SDK client separately.
This step connects your app with the SuprSend Inbox, linking it to a specific user and workspace. When you visit http://localhost:3000/, you should see a fully functional notification inbox tied to your provided values.
Missing these props would give you 401 (Unauthorized) access error.

Step 8: Triggering a Test Notification

Once everything is set up, navigate to the workflow you created and click on the Test button.
Enter the recipient details in the required fields and click on Trigger Test.
Voilà! The test notification will appear in the Inbox, verifying that your setup works perfectly.

For further customization, refer to our docs.

4. Headless Inbox: Advanced Use Case

While the default SuprSend Inbox component is easy to set up and great for most use cases, you may need more flexibility in certain situations. This is where the Headless Inbox option comes in.

Headless Inbox Setup and Overview

1. Introduction to Headless Inbox

Headless Inbox is a powerful way to integrate and manage notifications within a React app without relying on a pre-built UI for handling messages. It allows developers to manage notification data and UI elements independently, offering flexibility to build customized notification systems that fit any design or workflow.

The concept of a "headless" system means you have full control over how the notification logic works, without being tied to a specific interface or display method. This separation of concerns is particularly useful when you're building dynamic applications with personalized notifications.

2. Importance of Headless Inbox

Headless Inbox is a powerful way to integrate and manage notifications within your app without relying on a pre-built UI for handling messages. It allows you to manage notification data and UI elements independently, offering flexibility to build customized notification systems that fit any design or workflow.

Customizable UI: Unlike the traditional inbox that comes with its own visual design, you can design the notification experience exactly how you want it.
More Control: The logic for marking notifications as seen, counting unseen notifications, and triggering new notifications can be fully managed by the developer. This gives them fine-grained control over the app’s notification flow.
Decoupling of Logic: By isolating the notification logic from its display, you can change the UI without affecting the notification handling and vice versa, making the system more modular and maintainable.

In comparison to existing solutions like SuprSend inbox, Headless Inbox allows for a more scalable approach, particularly when you need to embed notifications within an existing application structure or have complex requirements for managing notifications.

3. Steps to Set Up the Headless Inbox

For demo purpose, let's set up the Headless Inbox with the following steps:

1. Clone the GitHub Repository

Start by cloning the SuprSend Headless Inbox repository from GitHub
This repository contains all the necessary code and configuration files to get started.

2. Add the Required API Keys

You will need to insert your workspaceKey, subscriberId, and distinctId into the _app.js file to authenticate your connection to the SuprSend service. These keys ensure that notifications are linked to the correct workspace and user.

3. Understanding Key Files

_app.js: This file contains the <SuprSendProvider /> component, which wraps the entire application. It initializes the connection to SuprSend using the workspace and subscriber information.
HeadlessSDKComponent.js: This component manages the core functionality of the Headless Inbox. It handles unseen counts, marks notifications as seen, and reacts to new notifications by triggering custom events (e.g., alerts when new notifications arrive).
NotificationsComponent.js: This is the customizable UI component that renders the notifications in a Material UI Card format. It displays a bell icon and a notification list, with options to toggle the card visibility. You can style and customize this component to fit the design of your app.

4. Run the App

After setting up the keys and reviewing the important files, simply run the app. The notifications should start coming through, and you'll see them in the custom notification component.

This setup provides you with a fully functional Headless Inbox without requiring you to design complex notification handling systems. You can focus on customizing the UI and extending functionality based on your needs.

Why Use the Headless Mode?

Customization: You have complete control over the notification display.
Flexibility: Pull notifications into your app in any format you like.
Integration: Integrate SuprSend into existing designs without relying on predefined UI components.

Conclusion: Effortless Notification Integration

By following these steps, you've successfully integrated SuprSend Inbox into your Next.js application, providing a rich and interactive notification experience for your users. Not only did you achieve this with minimal setup, but you also learned how to customize the inbox using headless mode to tailor the notifications to your unique needs.

To recap, here are the steps:

Set up a new Next.js project and install SuprSend.
Mount the SuprSend Inbox component in your app.
Extract the necessary props from the SuprSend Dashboard.
Pass the props to the SuprSendInbox component for a personalized experience.

Start building better user engagement today with SuprSend Inbox! Head over to SuprSend Docs for more customization options and take your app's notifications to the next level.

Because nothing says "I care" like a well-timed notification that doesn’t ghost your users! 🚀

Building Community: The Social Software

Vedant Khairnar — Thu, 05 Dec 2024 12:21:12 +0000

Ah, building a community---it's like engineering software but with fewer syntax errors and more existential dread. You'd think rallying humans would be easier than debugging a complex system, but welcome to the reality where JavaScript and human nature seem equally capricious. Let's navigate this metaphorical minefield, shall we?

1. Planning and Design: "Hello, World!"

"By failing to prepare, you are preparing to fail." -- Benjamin Franklin.

When you set out to develop software, you start with a robust project plan. You sketch out your system architecture, decide on your tech stack, and maybe even dream of your app going viral. Similarly, in community building, you need a comprehensive vision. What's your community about? Knitting enthusiasts? Dog lovers? DevOps engineers who argue over the superiority of Kubernetes versus Docker?

Real Example: Reddit started as a small community for sharing interesting links. Today, it's a behemoth of subreddits ranging from the sublime to the absolutely ridiculous. Yes, there's a subreddit for "Birds with Arms." Vision: Check.

2. Coding and Initial Development: The Beta Phase

"First, solve the problem. Then, write the code." -- John Johnson.

In software development, you write code, encounter bugs, and scream at your screen at 2 AM. Building a community is eerily similar. You create initial content, attract a few members, and then deal with the first wave of trolls who think it's hilarious to inject SQL-like disruptions into every conversation.

Real Example: Facebook started in a Harvard dorm room. Initially, it was exclusive, buggy, and, let's be honest, looked like a high school science project. But hey, even Mark Zuckerberg had to start somewhere.

3. Testing: The Human QA Department

"Any fool can write code that a computer can understand. Good programmers write code that humans can understand." -- Martin Fowler.

You test software to ensure it doesn't implode upon launch. In community building, testing means figuring out what resonates with your members. Do they like weekly AMAs or prefer daily memes? Spoiler: Memes win, always.

Real Example: Stack Overflow had to figure out how to manage reputation scores and moderation. It took a lot of iteration, user feedback, and probably a few thousand expletives muttered under breath.

4. Launch: "It's Alive!"

"Release early. Release often. And listen to your customers." -- Eric S. Raymond.

You've launched your software, and now the real fun begins---watching users break it in ways you never imagined. Similarly, launching a community means watching people interact, connect, and occasionally form factions over whether pineapple belongs on pizza (it doesn't, fight me).

Real Example: Discord launched as a platform for gamers. Today, it's used by everyone from study groups to knitting clubs, proving that even the most niche communities can grow beyond their initial scope.

5. Maintenance and Updates: The Eternal Grind

"Programs must be written for people to read, and only incidentally for machines to execute." -- Harold Abelson.

Just like software, communities need constant updates. New features, bug fixes, and occasionally, banning that one guy who keeps posting spoilers. You monitor analytics, adjust strategies, and pray to the algorithm gods for favor.

Real Example: Twitter's introduction of features like threads, polls, and the infamous 'edit' button shows how communities evolve. Every change is a mix of excitement and backlash, just like any software update.

6. Scaling: The Growth Spurt

"Make it work, make it right, make it fast." -- Kent Beck.

Scaling software is about handling more users without crashing. Scaling a community is about maintaining the vibe as you grow. You add moderators, introduce new sub-communities, and desperately try to keep things civil. Spoiler: It's like herding cats.

Real Example: Meetup started as a way for people to organize offline events. It scaled globally, catering to interests so niche that you wonder if there's a secret society for people who love pineapple on pizza (again, why?).

7. Dealing with Crashes: The Oh-No Moments

"To err is human, but to really foul things up you need a computer." -- Paul R. Ehrlich.

Crashes happen. Servers go down, and communities implode. Handling these moments with grace (and a bit of humor) can turn a disaster into a bonding experience. Think of it as a way to test your community's resilience.

Real Example: GitHub's infamous outage in 2018 had developers worldwide in panic mode. But it also led to some great memes and a reminder that even the biggest platforms are not infallible.

Conclusion: The Infinite Loop

Building a community is like developing software---it's an ongoing process that requires patience, persistence, and a sense of humor. Whether you're coding the next killer app or nurturing a group of like-minded individuals, remember: it's all about connecting the dots, one bug fix or conversation at a time.

As Steve Jobs once said, "Great things in business are never done by one person; they're done by a team of people." So gather your team, fire up your metaphorical IDE, and start building. Just remember to save your work and back up your database---both in code and in life.

RFC 003: Quantum Entangled Payment Methods

Vedant Khairnar — Mon, 01 Apr 2024 13:45:08 +0000

I. Objective

This RFC presents an approach for reducing application latency using quantum entanglement. Currently Hyperswitch is optimized for sub 30ms application overhead. By integrating advanced quantum mechanics with traditional networking principles, Hyperswitch aims to revolutionize payment processing speeds, security, and inter-dimensional commerce.

II. Proposal

Modern networking technologies have reached their limits in terms of speed and efficiency, often constrained by the limitations of spacetime. Hyperswitch proposes the use of quantum entangled wormholes to bypass these limitations entirely. This approach allows for instantaneous data transfer and transaction processing across the multiverse.

Data Transmission

In this approach, payment method data is transformed into qubits and transmitted through PCI compliant quantum entangled wormholes. These wormholes act as portals between different points in spacetime, allowing for instantaneous data transfer without the constraints of traditional networking protocols.

Payment Processing

Similarly, Hyperswitch leverages these wormholes for payment processing, enabling instant and secure transactions across multiple dimensions. Users can simply select the Hyperswitch payment option during checkout, and the transaction will be processed through a quantum entangled wormhole to the merchant's account in their respective dimension. This is made possible through Hyperswitch’s direct connection to major wormholes across dimensions.

Security and Reliability

Quantum entangled wormholes offer unparalleled security and reliability. Any attempt to intercept or tamper with the data or transaction would collapse the quantum state, rendering the information unreadable and invalidating the transaction. Additionally, the self-healing nature of the entangled wormholes ensures persistent delivery retry and automatic audit trails.

III. Open Questions

What are the ethical implications of interdimensional commerce?
How can we ensure backward compatibility with existing payment systems across different dimensions?
How will payments be routed through wormholes?
How many direct connections will be necessary?

Frame Format

Data and transactions are encoded into qubits and transmitted through quantum entangled wormholes. The bandwidth and MTU (Maximum Transmission Unit) of the wormholes are theoretically unlimited, allowing for high-speed data transfer and large-scale transaction processing across multiple dimensions.

Security Considerations

While security is inherently robust due to the principles of quantum mechanics, additional measures such as quantum encryption and multi-dimensional authentication protocols may be required to protect against advanced threats from alternate realities or parallel dimensions.

IV. Conclusion

Hyperswitch's proposal to use quantum entangled wormholes for data transmission and payment processing represents a significant leap forward in the field of networking and commerce. By overcoming the limitations of traditional spacetime-based technologies, Hyperswitch aims to create a truly interconnected and secure global marketplace across the multiverse.

Possible Implementation

Read and understand the general guidelines on contributing to Hyperswitch
Import postman collection of hyperswitch from here
Understand the implementation of all different payment flows and how to add a connector
Test the following flows - Payment, Capture, Void and Refund using postman for your local implementation and generate relevant screenshots of the test cases.

Embark on an enlightening journey through the intricate world of payments. These blogs are your compass to navigate the complexities of the payment galaxy.

As developers, we create a lot of value through the applications we build. Payments are the means to capture some of that value for ourselves. Surprisingly, the effort to set up a payments stack is often exaggerated. This is what we aim to solve at Hyperswitch by building a free and open payments switch. If you resonate with this vision, you can join the movement to help build an open payments ecosystem!

Learn more about how you can set up your own payments stack in minutes with Hyperswitch

On a serious note, Hyperswitch is Hiring:

Go to GitHub Discussions and bookmark our Hiring Challenge.

How to hire Developers for your Open Source Project?

Vedant Khairnar — Wed, 20 Mar 2024 11:22:47 +0000

Being Open Source doesn’t just mean making the code public. Being Open means believing in the Open systems strongly and showing it through your actions as well. We all want like-minded folks who share a similar vision to join our organization. Well, this happens when our hiring or team-building approach is open. Also, only the folks who are genuinely interested in the vision tend to contribute, adding depth and passion to our collaborative efforts.

"Hire for passion and intensity; There is training for everything else."
Nolan Bushnell

At Hyperswitch, our journey towards building a Linux-like infrastructure for payments took an interesting turn when we decided to innovate not just our product but also our hiring process.

🚨 BTW we are hiring for several roles, know more here.

In this blog post, we're excited to share how you can transform your hiring strategy through open source contributions and the remarkable impact it can have on your project and team.

3 Checks before you start ✅

A base Community of Contributors: Having an initial community of contributors around your product may not be a must but it adds huge advantage and a starting point for the open source hiring initiative. It serves as a solid foundation for the open source hiring initiative.
Contribution Guidelines: Clear contribution guidelines should be established beforehand, ensuring that your contributors understand the expectations and standards.
Tutorials and Blogs: Having existing resources such as tutorials and blogs help newcomers understand our project and its objectives.

Process that you can follow 🔄

Identify the Problem Statements/Issues 🎯
Defining the problem statements or issues for potential contributors is crucial. Identify non-critical challenges that align with your project goals, provide opportunities for contributors to make meaningful contributions without overwhelming them. These challenges not only serve as tasks for contributors but also act as a filter to attract the right talent for your organization.

By presenting specific problems aligned with the project objectives, you will be able to identify individuals who not only possess the technical skills but also share your passion and vision for open collaboration. This approach ensures that the community of contributors is composed of individuals who are genuinely invested in advancing your project's mission.
Creating Onboarding Materials for Hiring 📚
It's obvious to have a clear and structured onboarding process for potential contributors. Develop onboarding materials that explain the hiring process, including how to get involved, where to find resources, and how to contribute effectively.
Promote the Hiring Plan 📢
Promoting the hiring plan is essential to attract talented individuals who share your vision for open collaboration. You can leverage various channels, including social media, developer forums, and industry events, to spread the word about the open positions and the benefits of joining the community.
Providing Constant Support and Feedback 🤝
The essence of open source is collaboration. Integrate this principle into your hiring process by providing ongoing support and feedback to contributors. Mentor contributors at every step, offer them assistance, answer their queries, and provide constructive feedback on contributions to help them improve their skills and understanding of your project.
Review and Merge Contributions 🔄
Regularly reviewing and merging contributions is essential to maintain the quality and relevance of your project. Establish a systematic review process, ensuring that all contributions meet your standards and contribute to your project's objectives.
Recognize and Reward Contributors 🏅
Acknowledging the efforts of your contributors is vital to foster a sense of appreciation and belonging within the community. Recognize their contributions publicly through badges, mentions in project announcements, and exclusive rewards, motivating them to continue their involvement.

Well, this award is for you because you are taking the next step towards improved hiring.
Monitoring and Iterating 🔄
Continuous monitoring and iteration will allow you to refine your open source hiring process based on feedback and evolving project needs. Regularly take inputs from contributors and stakeholders, identifying areas for improvement and implementing changes to enhance the overall experience.
Scaling and Expanding 🌍
As the project and community grows, scale and expand your open source hiring efforts to accommodate the increasing demand for talent. Explore collaborations with other open source projects and organizations, broadening your reach and impact while prioritizing diversity and inclusion initiatives to ensure a welcoming and inclusive environment for all contributors.
See how you can accommodate different time zones and geographies to be inclusive.

In conclusion, the journey towards open source hiring will be transformative for both- the product and the community of contributors. By embracing open collaboration and innovation, you can not only build a robust product but also cultivate a vibrant ecosystem of talent and creativity. We're excited to continue pushing the boundaries of open source development and shaping the future of payments together. Join us on this journey, and let's make a difference.

🌠 Embark on an enlightening journey through the intricate world of payments. These blogs are your compass to navigate the complexities of the payment galaxy.

🎉 Learn more about how you can set up your own payments stack in minutes with Hyperswitch

Want to contribute? Check out some of our good first issues here.
Try Hyperswitch. Get your API keys here. Happy reading!

What is Hyperswitch

Vedant Khairnar — Fri, 15 Mar 2024 13:23:07 +0000

As your business expands, it's essential to have a payment infrastructure that can handle larger transaction volumes and support local and alternate payment methods required by newer geographies.

A single payment processor might not fulfil your requirements, so you must integrate additional payment processors. But here's the catch: integrating additional payment processors involves a lot of dev effort, which makes it costly and time-consuming.

This is where a payment orchestrator like Hyperswitch comes in. A payment orchestrator pre-integrates multiple payment processors so that businesses don't have to go through the tedious integration process.

A payment orchestrator allows businesses to:

Reduce dev efforts
Increase conversion rates
Optimize processing fees
Reduce dependency on a single processor
Customize checkout experience

Embark on an enlightening journey through the intricate world of payments. These blogs are your compass to navigate the complexities of the payment galaxy.

Learn more about how you can set up your own payments stack in minutes with Hyperswitch

Want to contribute? Check out some of our good first issues here.
Try Hyperswitch. Get your API keys here. Happy reading!

What happens when you click pay now?

Vedant Khairnar — Thu, 14 Mar 2024 11:57:11 +0000

This chapter will cover the payment flows available with Hyperswitch. Please reach out to us to learn more about the payment flows supported!

Payments flow

There are multiple stages in a Payment flow depending on the payment methods that are involved. Considering an one-time payment method where there was no redirection involved, the following stages form the Payment flow:

a. Creating a Payment: When your customer wants to checkout, create a payment by hitting the payments/create endpoint. Fetch and store the payment_id and client_secret

b. Loading the SDK: After your customer checks out, load the Hyperswitch SDK by initiating it with the client_secret and publishable_key

c. SDK being rendered: After you initiate the SDK, the SDK makes several API calls involving the /sessions and /payment_methods endpoints to load relevant payment methods and any saved cards associated with the customer

d. Customer enters the payment method data: After the SDK is fully rendered, your customer would choose a payment method and enter the relevant information and click pay

e. Confirming the payment: After the customer clicks pay, the SDK calls the payments/confirm endpoint with the customer's payment method details and post response, it displays the payment status

Here's a more detailed version of the payment flow:

How does Payment flow vary across Payment methods?

Customer Action	Direct/Redirect flows	Payment - finalized immediately	Payment - finalized later
Customer action required before payments/ confirm	Within Hyperswitch SDK	Non 3DS Cards	Bank Debits like ACH Debit, BACS Debit, SEPA Debit
Customer action required before payments/ confirm	3rd party Redirect/SDK	- Wallets like Apple Pay, Google pay, Paypal, AliPay - BNPL like Klarna, Afterpay, Affirm
Customer action required after payments/ confirm	3rd party Redirect	- 3DS cards - Bank Redirects like iDeal, Giropay, eps	- Bank Transfers like ACH Transfer, SEPA Transfer, BACS Transfer, Multibanco - Crypto wallets like Cryptopay

Use-cases supported by Hyperswitch

Accept online payments Get started with accepting one time payments globally on your online store
Store mandates & recurring payments Setup payments for a future date or charge your customers on a recurring basis
Manage payouts Facilitate payouts for global network of partners and service providers
Save a card during payment Learn how you can save your customers' cards in a secure PCI compliant manner
Manage payments on your platform/marketplace Accept payments from your customers and process payouts to the sellers on your marketplace
Accept payments on your e-commerce platform Give your Wordpress store a lightweight an embedded payment experience with the Hyperswitch WooCommerce plugin
Create payment links Accept payments for your products through reusable links without writing any code

What are `PaymentIntent` and `PaymentAttempt` objects and how do they work in Hyperswitch?

Hyperswitch uses the PaymentIntent object to track the status of a payment initiated by you. Since, Hyperswitch enables retrying a single payment multiple times across different processors until a successful transaction, we track each of these payment attempts through separate PaymentAttempt objects.

While PaymentIntent and PaymentAttempt have their own state machines, the various states in PaymentAttempt are also constrained by their respective mapping to the PaymentIntent statuses.

PaymentIntent state machine

The following is an abridged version of the PaymentIntent state machine flow that covers majority of the above payment use-cases.

PaymentAttempt state machine

The following is an abridged version of the PaymentAttempt state machine flow that covers majority of the above payment use-cases.

Embark on an enlightening journey through the intricate world of payments. These blogs are your compass to navigate the complexities of the payment galaxy.

Learn more about how you can set up your own payments stack in minutes with Hyperswitch

Want to contribute? Check out some of our good first issues here.
Try Hyperswitch. Get your API keys here. Happy reading!

Hyperswitch by Juspay

Vedant Khairnar — Wed, 13 Mar 2024 11:39:38 +0000

"With Hyperswitch, our vision is to enable every digital business to get access to the best payments infrastructure, which they need to run their business efficiently - focusing on their core, not on the complexity of payments," says Sheetal Lalwani, Chief Operating Officer, Juspay.

We, at Juspay have transformed the payment landscape by providing comprehensive solutions to leading global enterprises and major banks in India.

During this time, we have cleared several engineering challenges, and we are applying our expertise and learnings to make Hyperswitch a fast, reliable, and affordable payment switch.

We are also utilizing 🦀 Rust to ensure type safety and leverage its robust features in our development process.

Join our co-founder as he talks about how our team leveraged insights gained from building Juspay to develop HyperSwitch, an end-to-end global payment solution that addresses the complex challenges in the payment ecosystem, allowing businesses to prioritize their core capabilities.

Learn more about how you can set up your own payments stack in minutes with Hyperswitch

Want to contribute? Check out some of our good first issues here.
Try Hyperswitch. Get your API keys here. Happy reading!

SEO 101 for a Developer

Vedant Khairnar — Wed, 21 Feb 2024 09:44:37 +0000

Mastering SEO: Crafting a Search Engine-Friendly Website

Welcome back, fellow web enthusiasts! Today, we're delving into the intricate world of Search Engine Optimization (SEO) – the magic wand that can elevate your website to the top of Google's search rankings. So, grab a cup of coffee and let's dive in!

Rule #1: Content is King 👑

The very first rule in the SEO playbook is a timeless classic – create fantastic content. From pagerank to machine learning, Google now prioritizes user experience and valuable content. Think of it like a blockbuster movie; if your audience isn't engaged, neither is Google. It's not just about keywords anymore; it's about providing real value that keeps users glued to your pages.

Evolution of SEO 🌀

Remember the good ol' days of stuffing keywords into every nook and cranny? Well, those days are past considering other factors that we have today. SEO has evolved into a sophisticated game, focusing on user experience and content usefulness. Over 200 factors now influence a site's ranking, mainly revolving around user engagement.

Understanding Web Metrics in SEO

Web metrics in SEO encompass various measures like organic traffic, keyword rankings, backlinks, and user behavior, providing insights into a website's performance and its effectiveness in attracting, engaging, and converting visitors.

Organic Traffic:

Definition: The number of visitors that come to your site through organic (non-paid) search engine results.
Importance: Indicates the overall visibility and appeal of your content to search engine users.

Keyword Rankings:

Definition: The position of your website for specific keywords in search engine results.
Importance: Shows how well your site is optimized for targeted keywords and its competitiveness.

Backlinks:

Definition: The number and quality of external websites linking to your site.
Importance: Influences the authority and trustworthiness of your site in search engine algorithms.

Page Load Speed:

Definition: The time it takes for a page to fully load.
Importance: Google considers page speed as a ranking factor, and faster-loading pages provide a better user experience.

Bounce Rate:

Definition: The percentage of visitors who navigate away from the site after viewing only one page.
Importance: A high bounce rate may indicate issues with content relevance or user experience.

Click-Through Rate (CTR):

Definition: The percentage of users who click on a link compared to the total number of users who see it.
Importance: Measures the effectiveness of your titles and meta descriptions in attracting clicks.

Conversion Rate:

Definition: The percentage of website visitors who complete a desired action (e.g., making a purchase or filling out a form).
Importance: Indicates how well your site converts visitors into customers or leads.

Mobile-Friendly:

Definition: Assesses how well a website performs on mobile devices.
Importance: With the mobile-first indexing approach, mobile-friendliness is crucial for SEO.

Crawl Errors:

Definition: Issues encountered by search engine crawlers when accessing your site.
Importance: Identifying and fixing crawl errors ensures search engines can properly index your content.

Domain Authority:

Definition: A metric developed by Moz that predicts a site's ability to rank in search engine results.
Importance: Reflects the overall strength and authority of a website's domain.

The SEO Commandments ✅

When it comes to SEO, the structure of your HTML plays a crucial role. Let's break it down, including ARIA tags, anchor elements, and authorship details.

HTML Structure🏗️:

Use semantic HTML elements like <article> for main content.
Employ ARIA tags for accessibility, such as alt for images.
Utilize <head> for metadata, including title, description, and canonical URL.
Optimize the <body> with meaningful tags like <main> and <article>.
Enhance content organization with schema.org markup like itemprop and itemscope.

Metadata Magic✨:

Craft a captivating <title> for your page displayed in search engine results.
Incorporate meta tags for description, featured image, and author information.
Leverage outbound anchor elements (<a>) to authoritative sites, signaling content relevance.
Utilize schema.org markup for articles and authors to enhance search engine understanding.
Consider adding schema.org markup for FAQ or Q&A sections to align with modern SEO trends, recognizing the significance of user intent.

By incorporating these HTML practices, you not only enhance your site's SEO but also contribute to a more accessible and user-friendly web experience.

Backlinking and Guest Posting

Backlinking:

Backlinking involves the process of acquiring hyperlinks from one webpage to another, enhancing a website's visibility and credibility by establishing connections with external sources.

It's not the quantity but the VIP guest list that matters in the world of backlinks.

Quality Matters: Get linked from top-notch sites for SEO magic!
Diverse Anchors: Mix up your anchor texts; it's like seasoning for links.

Guest Posting:

Guest posting refers to the practice of creating and publishing content on someone else's website, often accompanied by a hyperlink leading back to the author's site, fostering collaboration and mutually beneficial relationships in the digital realm.

Your content should be the kind that not only engages readers but also winks at search engines, saying, 'I'm worth ranking!

Research Niche Platforms: Find your online party and bring good content gifts.
Quality Content: Write posts that make readers nod and search engines smile.
Optimized Author Bio: Show off, but keep it profesh – your link deserves the spotlight.
Build Relationships: Make friends online; it's not just about links, it's about connections.

Rendering Techniques✍:

Now, here's where it gets interesting. Client-side rendering, pre-rendering, and server-side rendering each have their pros and cons. It's like choosing your favorite ice cream flavor – everyone's got a preference.

Choose your flavor🍬:

Client-Side Rendering (CSR): This approach loads and runs the app on the user's browser, offering fast and interactive experiences. However, it relies on the user's device to render content, which may result in outdated data.
Pre-rendering: Ideal for static content like blogs, pre-rendering generates and stores HTML pages in advance. This ensures quick loading times and improved performance, especially for content that doesn't change frequently.
Server-Side Rendering (SSR): SSR involves the server sending fully rendered HTML pages to the user's browser. This is beneficial for dynamic content, providing users with up-to-date information directly from the server.
Incremental Static Regeneration (ISR): ISR combines the benefits of static site generation with the ability to update content. It refreshes pages in the background, allowing you to maintain the advantages of static sites while ensuring data remains current.
Hybrid Rendering: This approach allows you to mix different rendering methods based on specific page requirements. For instance, using CSR for interactive components and SSR for dynamic content, providing a flexible solution tailored to diverse page needs.

Solution: Incremental Static Regeneration💡:

Incremental Static Regeneration (ISR): The Best of Both Worlds!

The cool kid on the block! Imagine having the best of both worlds – static pages with fresh data. Incremental Static Regeneration (ISR) is a cutting-edge approach in web development that strikes a balance between the benefits of static site generation and the need for up-to-date content.

Explanation:

Incremental Static Regeneration allows you to generate static pages during build time and then refresh them incrementally in the background as new data becomes available. This means that your users experience the speed and efficiency of static pages, while the content is dynamically updated without the need for a full rebuild. ISR essentially combines the advantages of static sites, such as rapid loading times and scalability, with the flexibility to keep content current.

Benefits of using ISR:

Speed and Performance: Users enjoy the quick loading times associated with static sites, providing a seamless and responsive experience.
Fresh Data: Unlike traditional static sites, ISR ensures that your content stays up-to-date. New data triggers background updates, keeping your site dynamic without sacrificing speed.
Scalability: ISR is particularly useful for large-scale websites as it allows you to leverage the benefits of static site generation without compromising on real-time data updates.
Improved User Experience: By offering a balance between static content delivery and dynamic data updates, ISR enhances the overall user experience, meeting the demands of modern web applications.

Overall, Incremental Static Regeneration is a powerful tool for developers seeking the speed and efficiency of static sites, coupled with the ability to serve fresh and updated content. It's the perfect solution for projects that demand both performance and dynamic data.

Example:

Consider an e-commerce site using ISR to update product availability without redeploying the entire site. A win-win for performance and real-time data.

Some Terminologies📖:

Click Through Rate (CTR): The percentage of users who click on a link; higher is better for optimal engagement.
Bounce Rate: The percentage of users who leave a site after viewing only one page; lower is better for user retention.
Dwell Time: The duration a user spends on a page before returning to search results; longer is better, aiming for infinity is the ultimate goal.
Session Duration: The total time a user spends on a website during a single visit; longer durations signify deeper engagement.
Pages per Session: The average number of pages a user views during a single session; higher values indicate more extensive exploration.

Enhance Engagement💬:

Enhance your content with engaging components like gifs to captivate users and boost interaction.

SEO is no longer a black box; it's an evolving science that demands creativity and adaptability. So, as you embark on the SEO journey, remember these rules, embrace the changes, and watch your website soar to new heights in the vast digital landscape.

Happy optimizing! 🚀✨

If you found these insights valuable, share your thoughts and experiences below. Let's continue this SEO conversation together!

Unnecessary Git Quiz

Vedant Khairnar — Mon, 19 Feb 2024 15:54:40 +0000

Welcome to the Git quiz!

Here's a quick litmus test for anyone looking to contribute to Hyperswitch or any open source repository in general. This quiz encapsulates basic concepts that you'd need to get started. Haffun!

In a recent commit someone created a new file, and moved functions from random files into this file (because modularity). Now it seems that there might be a bug in one of these functions, and the dev that created the file doesn't know the underline logic present in the functions, how can you quickly know who authored it?

[a] git blame

[b] git blame -C

[c] git blame -C -C

[d] git blame -C -C -C

Answer!

git blame -C -C         # This is the right
git blame -C -C -C      # But, this isn't wrong! (why?)

Which of the following commands are used to go to a different existing branch?

[a] git branch <branch-name>

[b] git switch <branch-name>

[c] git branch -c <branch-name>

[d] git checkout -b <branch-name>

Answer!

git switch <branch-name>

Consider, if you have to raise a PR to a external open source repo, what are the steps that you will follow? (Consider the OSS repo is on github, mention the steps that are performed locally as git commands and that performed on github & anything else as simple points)

Answer!

Following are the steps of contributing to OSS repos
  1. Find issue and communicate about possible solution.
  2. Fork the repository
  3. Clone it to your local setup.
  4. Configure components mentioned in the `README.md`s 
  5. `git checkout -b <branch-name>` create a new branch for development
  6. complete the development, commit the changes following the guidelines for commits as mentioned in their repository
  7. add your personal forks origin, if you cloned before forking. `git remote add my-origin <your repo link>`
  8. push to the repository, either `git push origin <branch-name>` or `git push my-origin <branch-name>`
  9. raise a PR to their repository, (Optionally, run CI tests on your local fork, and then raise a PR)

You have made a few changes and added a few new files, turns out you have to start working on something else, so you need to keep everything that you have done aside, how will you do that?

Answer!

`git stash -u`

You are reading a file in your local git repository, and you wish to know more about a certain function you saw in it, but there is no documentation, how can you get information about it?

Answer!

`git blame /path/to/file` and ask the author about more details

What’s the difference between git merge and git rebase?

Answer!

git merge, ands a new commit to your new branch which gets the branch up-to-date with the branch that your are merging. git rebase on the other hand rebases the commits on top of the other branch. The following diagram explains it.
     U----V----W----X----      (your current branch)
    /              / <---  (the merge)
  -A----B----C----D----F       (branch to be merged)

  git merge
                     U----V----W       (branch after rebase)
     U----V----W    /                  (branch before rebase)
    /              /
  -A----B----C----D----F               (branch to be merged)

  git rebase

Oops, someone accidentally pushed a commit to your main branch and that’s breaking quite a few things, what would you do, if you want to get the main branch stable again?

Answer!

`git revert HEAD`

You have done some changes to your branch, you want to view those changes before committing them, what would you do to view what new code you have added.

[a] git log

[b] git show

[c] git diff

[d] git status

Answer!

`git diff`

You are working on a new feature, while testing you found out that the application isn’t showing any logs. Luckily, a collaborator mentioned she added a commit just to enable logging in her own branch, but it was a long time back and she had added more commits after that, what would you do?

Answer!

`git cherrypick`

You are getting ready for deploying your project on cloud, but the server configuration file in your branch is amiss, once again a collaborator to the rescue, lets you know that he has a proper config in one of his commit but unfortunately the commit also has other changes. you want to do a dry-run of the config by getting the changes from that single file into your current branch, which git command can accomplish this?

Answer!

`git checkout branc-name:/path/to/file`

You have added a commit to your branch, the commit message looks something like, feat(db): add new tabel to customre database seems like it there are a few spelling mistakes, how can you fix the commit message?

Answer!

`git commit --amend`

You are maintaining a rust project on GitHub, and someone raised a PR to it with the binaries for the compiled rust project, but those are huge and we don’t need them. What can you do, so that now one in the future is able to commit /target directory to the repo?

Answer!

Add the folder in `.gitignore`

You had cloned your friends repository, and were working on it. You came up with a solid feature and committed it to your local branch, instead of sending the branch to his repository, you want to send it to your own fork of his repository on GitHub, list exactly 2 commands that will which when run in succession will allow this to happen.

Answer!

Do the following
  1. Add remote `git remote add my-origin `
  2. Push change `git push my-origin `

You are working on a branch and want to incorporate the changes made to the main branch. What command do you use to do this?

Answer!

`git pull origin main`

How will you make sure that your name and email appears on every commit that you make?

Answer!

adding them to `git config` entries will be `user.name` and `user.email`

Embark on an enlightening journey through the intricate world of payments. These blogs are your compass to navigate the complexities of the payment galaxy.

Learn more about how you can set up your own payments stack in minutes with Hyperswitch

Want to contribute? Check out some of our good first issues here.
Try Hyperswitch. Get your API keys here. Happy reading!

Top 10 Blogs of Hyperswitch from 2023

Vedant Khairnar — Fri, 05 Jan 2024 14:01:57 +0000

Welcome to our collection of standout blogs from 2023 at Hyperswitch, where we dive into the fascinating world of payments. Think of these blogs as your friendly guides, walking you through the twists and turns of payment technology and strategy. Whether you're a seasoned pro or just getting started, get ready for some eye-opening insights that these articles have to offer.

Payments 101 for a Developer
Grab a gist of the various payment terminologies that you might encounter. This blog is an attempt to simplify the core concepts you need to know and bring you up to speed with payments. Understand the different stakeholders and stages involved in the payment process.
Read more >>
Ask not what the compiler can do for you
When we talk about Rust being very secure, there comes a point where one must ponder about just how much responsibility we can leave on the compiler. Even with all the brilliant features that the compiler provides there are always some things that the compiler might not catch. This blog covers our experience in the same situation.
Read more >>
No code payments automation is a lie
Dive deep into the novel concept to eliminate code from accepting payments and managing payments lifecycle. This blog meticulously breaks down the concept of no-code payments automation, revealing how businesses can streamline workflows without the reliance on complex programming. Witness the power of automation in simplifying intricate payment processes.
Read more >>
What the hell is Payment Orchestration?
Delve into the world full of payment processors and the evolving nature of the payments ecosystem and how payment orchestration helps simplify the world for everyone. This blog unveils the orchestration processes that ensure a flawless and efficient transactional experience for businesses and consumers alike. Gain insights into the orchestration of diverse payment methods and systems and how you can choose the ideal payment orchestrator for you.
Read more >>
How to run Apple Pay inside iFrames
Improve user experience by integrating Apple Pay seamlessly into your app. You would it's a bit of a challenge if you have tried it. Well it's not difficult anymore. This blog provides step-by-step guidance on incorporating Apple Pay, the major problem in the process and it's solution as well.
Read more >>
Everything you need to know about setting up your WordPress site
WordPress, the powerhouse of content management systems, opens doors for everyone, from seasoned developers to eager beginners.
In this comprehensive guide, we unravel the intricacies of WordPress, the renowned content management system that empowers users to create stunning websites without the need for extensive technical knowledge.
Read more >>
Why I won't pay on your website?
Step into the shoes of a user and explore the intricacies of the payment experience. This blog provides a user-centric perspective, uncovering the reasons users might hesitate to make payments on your website. Gain actionable insights into building trust and optimizing the user payment journey.
Read more >>
Add PayPal to your Stripe Integration | Hyperswitch
Get best of both worlds- Stripe's developer experience ad PayPal's user reach among your customer base. Expand your payment horizons by seamlessly integrating PayPal into your existing Stripe setup using hyperswitch. This blog mentions the advantages the Stripe-Paypal integration brings to you , ensuring a smooth and hassle-free experience for your users. Overall explore the benefits of offering multiple payment options to your users.
Read more >>
Wire vs ACH: What's the Difference
Demystify the concepts behind wire transfers and ACH transactions and their differences in this comprehensive exploration. Gain insights into when to use each method, optimizing your financial transactions for efficiency and cost-effectiveness. This blog is your guide to navigating the intricacies of two essential payment avenues.
Read more >>
Everything you need to know about Open Banking
Peek into the future of finance with this in-depth exploration of open banking. Understand how this transformative trend is reshaping the financial landscape, providing both challenges and opportunities for businesses and consumers alike. Stay ahead of the curve with a comprehensive guide to the open banking revolution.
Read more >>

If you have come this far, then you are loving these. Here are some bonus blogs for you!

An Open Source Payments Switch with virtually zero overhead
Explore the revolutionary concept of an open-source payments switch and how Hyperswitch brought it into reality. This blog delves into how the virtually zero overhead was achieved and , offering insights into cost-effectiveness and enhanced customization.
Read more >>
Realtime analytics with ClickHouse
The complexity around PCI compliance is often exaggerated, creating closed systems and walled gardens. Of course, PCI compliance is not a one-time exercise. It requires additional time and effort. But it is no rocket science either. Uncover the essential principles and practices to ensure your payment processes meet industry standards, safeguarding sensitive information and building trust with your users.
Read more >>
Payment methods: Which ones are right for your business?
With this blog, understand the importance of having multiple payment methods on your platform, on how it can improve the conversion rates, reduce processing costs and help you manage fraud and risk. From traditional credit cards to cutting-edge cryptocurrencies, this blog offers a comprehensive overview of the diverse options available. Stay ahead of the curve by understanding the nuances and implications of each payment method.
Read more >>
Explore the Tips for Checkout Optimization to Improve Conversion Rate
Unlock the secrets to optimizing your checkout experience and boosting conversion rates. This blog delves into user-centric strategies, design principles, and technological enhancements to create a seamless and frictionless checkout process for your customers with both bad and good examples for the different mentioned UX issues.
Read more >>
6 Reasons Why your business should have multiple Payment Processors
With the previous blog, you understood what is a processor and how it helps your business but there's a high need of having multiple processors. With this blog, dive into the strategic realm of payment diversification, where reliability meets innovation. Explore the myriad reasons why having multiple payment processors is not merely a choice but a strategic necessity. Uncover the benefits of redundancy, flexibility, and enhanced user experience that come with a diversified payment strategy.
Read more >>

Embark on an enlightening journey through the intricate world of payments. These blogs are your compass to navigate the complexities of the payment galaxy.

Learn more about how you can set up your own payments stack in minutes with Hyperswitch

Want to contribute? Check out some of our good first issues here.
Try Hyperswitch. Get your API keys here. Happy reading!

Adaptive Traffic Signal Control System

Vedant Khairnar — Wed, 20 Dec 2023 07:15:23 +0000

Traffic congestion is becoming a serious problem with a large number of cars on the roads. Vehicles queue length waiting to be processed at the intersection is rising sharply with the increase of the traffic flow, and the traditional traffic lights cannot efficiently schedule it.

Traffic congestion is a major problem in many cities, and the fixed-cycle light signal controllers are not resolving the high waiting time in the intersection.

We see often a policeman managing the movements instead of the traffic light. He sees road status and decides the allowed duration of each direction. This human achievement encourages us to create a smart Traffic light control taking into account the real time traffic condition and smartly manage the intersection.

So, what do we do???

Solution

The answer is to build a self adaptive traffic light control system. Disproportionate and diverse traffic in different lanes leads to inefficient utilization of same time slot for each of them characterized by slower speeds, longer trip times, and increased vehicular queuing.To create a system which enable the traffic management system to take time allocation decisions for a particular lane according to the traffic density on other different lanes with the help of cameras, image processing modules.

In fact, we use computer vision and machine learning to have the characteristics of the competing traffic flows at the signalized road intersection. This is done by a state-of-the-art, real-time object detection based on a deep Convolutional Neural Networks called You Only Look Once (YOLO). Then traffic signal phases are optimized according to collected data, mainly queue density and waiting time per vehicle, to enable as much as more vehicles to pass safely with minimum waiting time. YOLO can be implemented on embedded controllers using Transfer Learning
technique.

The Tech Side

Lets get our hands dirty with understanding why and how we can resolve this issue. To implement such a system, we need two main parts: eyes to watch the real-time road condition and a brain to process it. A traffic signal system at its core has two major tasks: move as many users through the intersection as possible doing this with as little conflict between these users as possible.

Regarding literature,this project is based on Tensornets, keras-yolov3 repository and find more detailed read on this blog for YOLO.

Code for this is available here.
The Dependencies we will be needing are mentioned in the requirements.txt
Install dependencies via pip specified by requirements.txt file.
The code is tested and run with Python 3.7.4 and Python 3.5.6 on Ubuntu 18.04.3 LTS. (Windows 10 platforms should also be able to run the project).

Coming to the core of this project structure that is the technologies we will be using

YOLO

You only look once (YOLO) is a state-of-the-art, real-time object detection
systemYOLO, a new approach to object detection. Prior work on object detection repurposes classifiers to perform detection. Instead, we frame object detection as a regression problem to spatially separated bounding boxes and associated class probabilities. A single neural network predicts bounding boxes and class probabilities directly from full images in one evaluation. Since the whole detection pipeline is a single network, it can be optimized end-to-end directly on detection performance.

The object detection task consists in determining the location on the image where certain objects are present, as well as classifying those objects. Previous methods for this, like R-CNN and its variations, used a pipeline to perform this task in multiple steps. This can be slow to run and also hard to optimize, because each individual component must be trained separately. YOLO, does it all with a single neural network.

YoloV3 Car Counter

This is a demo project that uses pretrained YoloV3 neural network to count vehicles on a given video. The detection happens every x frames where x can be specified. Other times the dlib library is used for tracking previously detected vehicles. Furthermore, you can edit confidence detection level, number of frames to count vehicle as detected before removing it from trackable list and the maximum distance from centroid (see CentroidTracker class), number of frames to skip detection (and only use tracking) and the whether to use the original video size as annotations output or the YoloV3 416x416 size.

Regarding the working, the solution can be explained in four simple steps:

Get a real time image of each lane.
Scan and determine traffic density.
Input this data to the Time Allocation module.
The output will be the time slots for each lane, accordingly.

and hence the sequence of operations performed are as follows

Camera sends images after regular short intervals to our system.
The system determines further the number of cars in the lane and hence computes its relative density with respect to other lanes.
Time allotment module takes input (as traffic density) from this system and determines an optimized and efficient time slot.
This value is then triggered by the microprocessor to the respective Traffic Lights.

Now, we have got the number of vehicles in all the lanes,
Its time for the Synchronization logic to come into action which will decide the time for all the lanes

baseTimer = 120
timeLimits = [5, 30]

timeList = [(i / sum(no_of_vehicles)) * baseTimer if timeLimits[0] < (i / sum(no_of_vehicles)) * baseTimer < timeLimits[1] else min(timeLimits, key=lambda x: abs(x — (i / sum(no_of_vehicles)) * baseTimer)) for i in no_of_vehicles]
print(timeList, sum(timeList))

Result

As a result, we get

Conclusion and Extensibility

and hence we conclude that the goal of this work is to improve intelligent transport systems by developing a Self-adaptive algorithm to control road traffic based on deep Learning. This new system facilitates the movement of cars in intersections, resulting in reducing congestion, less CO2 emissions, etc. The richness that video data provides highlights the importance of advancing the state-of-the-art in object detection, classification and tracking for real-time applications. YOLO provides extremely fast inference speed with slight compromise in accuracy, especially at lower resolutions and with smaller objects. While real-time inference is possible, applications that utilize edge devices still require improvements in either the architecture’s design or edge device’s hardware. Finally, we have proposed a new algorithm taking this real-time data from YOLO and optimizing phases in order to reduce vehicle waiting time.

Regarding Extensibility we can easily extend this project by changing the classes you are interested in detecting and tracking (see what classes does YoloV3 support and/or change the neural network used by tensornets for better speed/accuracy.

Forem: Vedant Khairnar

Building Your First AI Agent: Tavily X LangGraph

Building Your First AI Agent: Tavily X LangGraph

The Challenge: When Static Knowledge Meets Dynamic Reality

The Revelation: From Scripts to Intelligent Systems

What Makes Something "Intelligent"?

The Architecture of Intelligence

The Journey Begins: Meet Your Tools

Chapter 1: The Search Intelligence Layer

Chapter 2: The Workflow Orchestrator

Building Our First Agent: The Step-by-Step Story

Setting the Stage

Step 1: Hello World - The Foundation (2 minutes)

Step 2: The Environment Setup

Step 3: From Simple to Sophisticated - The Production Agent

The State Blueprint

The Intelligence Nodes

Step 4: The Workflow Architecture

The Moment of Truth: Bringing Intelligence to Life

The Simple Version First:

The Production Agent:

The Path Forward: From Simple to Sophisticated

What We Built vs. What's Possible

The Natural Evolution

Level 2: Adding Memory

Level 3: Adding Validation

Level 4: Adding Conditional Logic

Common Questions and Real Answers

Technical Questions

Business Questions

Your Next Steps: The Developer's Action Plan

Immediate Actions (Next 30 minutes)

Short-term Exploration (This week)

Long-term Mastery (This month)

The Bigger Picture: The Future of Intelligent Applications

Resources for Your Journey

Code Repository

Learning Path

Community

Appendix: Complete Code Reference

🎉 Congratulations! You're Now an AI Agent Developer

Getting Started with SuprSend Inbox in Your Next.js App

1. What is SuprSend Inbox?

2. Benefits of Using SuprSend Inbox

3. Steps to Integrate SuprSend Inbox into Your Next.js App

Step 1: Sign Up and Set Up Your Workspace

Step 2: Create a Notification Template

Step 3: Create a Workflow

Step 4: Create a New Project and Install SuprSend

Step 5: Mount SuprSend Inbox Component in App.jsx

Step 6: Extract All Props from the SuprSend Dashboard

Step 7: Passing the Appropriate Props to SuprSend Components

Step 8: Triggering a Test Notification

4. Headless Inbox: Advanced Use Case

Headless Inbox Setup and Overview

1. Introduction to Headless Inbox

2. Importance of Headless Inbox

3. Steps to Set Up the Headless Inbox

1. Clone the GitHub Repository

2. Add the Required API Keys

3. Understanding Key Files

4. Run the App

Why Use the Headless Mode?

Conclusion: Effortless Notification Integration

To recap, here are the steps:

Building Community: The Social Software

1. Planning and Design: "Hello, World!"

2. Coding and Initial Development: The Beta Phase

3. Testing: The Human QA Department

4. Launch: "It's Alive!"

5. Maintenance and Updates: The Eternal Grind

6. Scaling: The Growth Spurt

7. Dealing with Crashes: The Oh-No Moments

Conclusion: The Infinite Loop

RFC 003: Quantum Entangled Payment Methods

I. Objective

II. Proposal

Data Transmission

Payment Processing

Security and Reliability

Step 5: Mount SuprSend Inbox Component in `App.jsx`

What are `PaymentIntent` and `PaymentAttempt` objects and how do they work in Hyperswitch?