DEV Community: Aromal

[Boost]

Aromal — Tue, 02 Sep 2025 10:20:40 +0000

Dark-Light Mode in Next Js

Muhammed Sabith ・ Sep 2

#webdev #javascript #programming #tutorial

How to create your own websearch agent using langchain

Aromal — Mon, 01 Sep 2025 03:48:30 +0000

When you ask ChatGPT or other AI models something like “What’s the latest news?”, they often reply with outdated information.

Why? Because most language models are trained on past data and don’t have real-time internet access.

That’s where LangChain agents + search tools come in.

In this tutorial, we’ll build a search-powered conversational agent that can:

Use an LLM for reasoning
Fetch real-time web data (via DuckDuckGo search)
Remember the context of the conversation

Think of it as your personal AI assistant with live web access. 🔥

Why Use a Search Agent?

Here are some real-world use cases:

Latest news & trends → “What’s happening in AI research today?”
Market/Stock updates → “What’s the current price of Tesla stock?”
Research assistant → “Find me recent articles on climate change policies.”
Productivity tools → A chatbot that pulls fresh answers instead of relying only on training data.

In short, this bridges the gap between static AI knowledge and the dynamic internet.

Prerequisites

Before starting, make sure you have:

Python 3.9+
An OpenRouter API key (free/paid options available)
Installed dependencies:

pip install langchain langchain-openai langchain-community duckduckgo-search

Step 1: Import Required Libraries

We’ll need LangChain’s LLM wrapper, a search tool, and agent utilities.

from langchain_openai import ChatOpenAI
from langchain_community.tools import DuckDuckGoSearchRun
from langchain.tools import Tool
from langchain.memory import ConversationBufferMemory
from langchain.agents.agent_types import AgentType
from langchain.agents import initialize_agent

Step 2: Initialize the LLM (via OpenRouter)

Here we use the DeepSeek model served via OpenRouter.
You can swap this with gpt-4, gpt-3.5-turbo, or other supported models.

llm = ChatOpenAI(
    model="deepseek/deepseek-chat-v3-0324:free",
    base_url="https://openrouter.ai/api/v1",
    api_key="your_openrouter_api_key_here",
)

Why OpenRouter?

It supports multiple models (DeepSeek, Mistral, GPT, etc.)
You don’t have to lock into one vendor
Some models are free!

Step 3: Add a Search Tool

To fetch live results, we’ll use DuckDuckGoSearchRun.

search = DuckDuckGoSearchRun()

tool = [
    Tool(
        name="search",
        func=search.run,
        description="When you want real time data use this",
    )
]

Why DuckDuckGo?

It’s lightweight and privacy-friendly
Works well for quick factual lookups
No API key required

Step 4: Add Memory (for Conversations)

Without memory, the agent forgets past messages.
We’ll use ConversationBufferMemory so it can keep context.

memory = ConversationBufferMemory(memory_key="chat_history" return_errors=True)

Step 5: Initialize the Agent

Now, we combine everything into a conversational agent.

agent = initialize_agent(
    llm=llm,
    tools=tool,
    agent=AgentType.CONVERSATIONAL_REACT_DESCRIPTION,
    memory=memory,
    verbose=True,
    handle_parsing_errors=True
)

Final Code

from langchain_openai import ChatOpenAI
from langchain_community.tools import DuckDuckGoSearchRun
from langchain.tools import Tool
from langchain.memory import ConversationBufferMemory
from langchain.agents.agent_types import AgentType
from langchain.agents import initialize_agent

from dotenv import load_dotenv
import os


load_dotenv()

def webSearchAgent(question):

    llm = ChatOpenAI(
        model = "deepseek/deepseek-chat-v3-0324:free",
        base_url = "https://openrouter.ai/api/v1",
        api_key = os.getenv("OPENROUTER_API_KEY"),
    )

    search = DuckDuckGoSearchRun()

    tool = [
        Tool  (
            name = "search",
            func = search.run,
            description = "When you want real time data use this",
        )
    ]

    memory = ConversationBufferMemory(memory_key = "chat_history")

    agent = initialize_agent(
        llm = llm,
        tools = tool,
        agent = AgentType.CONVERSATIONAL_REACT_DESCRIPTION,
        memory = memory, 
        verbose = True,
        handle_parsing_errors = True
    )

    result = agent.run(question)
    print(f"Agent:\n\n {result}")

webSearchAgent("Give me some latest news about Ai")

Step 6: Run the Agent 🎉

Finally, let’s test it out!

    result = agent.run(question)
    print(f"Agent:\n\n {result}")

webSearchAgent("Give me the latest news")

Example Run

Making real-time AI search assistant using LangChain!
This way is powerful because it combines:

Reasoning power of LLMs
Real-time knowledge via search
Conversation memory

With just ~40 lines of code, you’ve got the foundation for an AI research assistant, news bot, or productivity tool.

💡 Did you find this useful?
Drop a ⭐ on this repo and follow me on github
https://github.com/DeveloperAromal/Websearch-Agent

Happy coding

[Boost]

Aromal — Sat, 30 Aug 2025 05:13:32 +0000

Muhammed Sabith

Aug 30 '25

Create Awesome Link Effect

#npm #programming #javascript #webdev

Comments 1

4 min read

LinkLens – A Lightweight React Package for Link Detection & Previews

Aromal — Sat, 30 Aug 2025 04:35:42 +0000

Hey React developers! 👋 Tired of manually handling URLs, hashtags, and mentions in chat apps, blogs, or social media platforms?

Meet LinkLens, a lightweight React npm package that makes link detection, rich previews, and interactive content effortless. In this 2025-ready tutorial, we’ll explore how to enhance your app’s functionality, interactivity, and user engagement with LinkLens.

🔗 Why LinkLens is a Game-Changer

Building React chat apps, comment systems, forums, or social feeds often involves dynamic content like:

URLs
Mentions (@username)
Hashtags (#topic)

Manually handling these with regex or fetching metadata for previews is tedious and error-prone.

LinkLens automates this, saving you time while improving:

SEO: Crawlers can index links, mentions, and hashtags efficiently.
Social Media Sharing: Rich previews with thumbnails, titles, and descriptions.
User Experience: Hover previews, interactive links, and custom styling.

Features Include:

Automatic detection of URLs, mentions, hashtags, and custom patterns.
Rich previews compatible with Open Graph and Twitter Card protocols.
Hover previews for subtle interactivity.
Customizable link colors, container classes, and HTML tags.
Accessibility support (ARIA-compliant).
Fully optimized for React 18+ SPAs.

Check out the source code: GitHub

Install from npm: LinkLens

📦 Installation

npm install linklens --force

The --force flag ensures smooth installation in React 18+ projects even with minor dependency conflicts.

Once installed, you’re ready to enhance link handling, SEO, and social media previews in your app. ✨

Example 1: Highlighting Links for Better SEO

Automatically detect and highlight URLs in text:

"use client";
import LinkLens from "linklens";

export default function SimpleLinkHighlight() {
  return (
    <main className="p-4">
      <LinkLens
        content="Check out my portfolio at https://github.com/DeveloperAromal"
        highlightLink={true}
      />
    </main>
  );
}

Explanation:

content: The text to parse for links, hashtags, or mentions.
highlightLink: Makes detected URLs clickable and search engine crawlable.
Use case: Chat messages, blog comments, or social feeds.

Example 2: Styling Links to Match Your Brand

Customize link colors for branding:

<LinkLens
  content="Follow my journey at https://github.com/DeveloperAromal"
  highlightLink={true}
  linkColor="#ff4500" // Vibrant orange
/>

Explanation:

linkColor: Any CSS color for link styling.
Use case: Branded chat apps, social media feeds, or CMS platforms.

Example 3: Rich Link Previews for Social Media Sharing

Create Twitter-style previews:

<LinkLens
  content="Loving this article: https://github.com/DeveloperAromal"
  previewCard={true}
/>

Explanation:

previewCard: Displays a card with thumbnail, title, and description.
Use case: Forums, messaging apps, news feeds.

Optimized for Open Graph/Twitter Card protocols, boosting shareability and SEO.

Example 4: Hover Previews for Subtle Interactivity

Enable previews only on hover:

<LinkLens
  content="Hover over this link: https://github.com/DeveloperAromal"
  hoverPreview={true}
/>

Explanation:

hoverPreview: Displays metadata on hover instead of always showing a card.
Use case: Forums or chat apps with limited space.

Improves user engagement while keeping the interface clean.

Example 5: Detecting Mentions and Hashtags with Custom Regex

Highlight mentions and hashtags:

<LinkLens
  content="Mentioned @aromal in a post"
  customRegex={true}
  pattern="@\\w+|#\\w+"
  tag="span"
  customTagColor="purple"
/>

Explanation:

customRegex: Enables custom regex detection.
pattern: Regex for matching @username or #topic.
tag: HTML tag wrapping matched text.
customTagColor: Color for highlighted text.
Use case: Social media clones or chat apps.

Improves content interactivity and SEO visibility.

Example 6: Styling the Container for Seamless Integration

<LinkLens
  content="Check this out: https://github.com/DeveloperAromal"
  classname="p-4 bg-gray-100 rounded-lg shadow-md"
/>

Explanation:

classname: Add Tailwind or custom CSS classes to style the container.
Use case: Chat bubbles, cards, or modals.

Explanation:

Combines link highlighting, rich previews, hover previews, and hashtag detection.
Use case: Social feeds or messaging apps with full-featured interactive content.

LinkLens Props Reference

Prop	Type	Default	Description
`content`	`string`	`""`	Text containing URLs, mentions, or hashtags
`highlightLink`	`boolean`	`true`	Highlights links for SEO-friendly URLs
`linkColor`	`string`	`"blue"`	CSS color for highlighted links
`previewCard`	`boolean`	`false`	Shows Open Graph/Twitter Card previews
`hoverPreview`	`boolean`	`false`	Displays preview tooltip on hover
`customRegex`	`boolean`	`false`	Enables custom regex for mentions/hashtags
`pattern`	`string`	`""`	Regex for custom matches (e.g., @username, #topic)
`tag`	`string`	`"a"`	HTML tag for matched content
`customTagColor`	`string`	`""`	Color for custom-matched text
`classname`	`string`	`""`	CSS classes for container styling

❤️ Why I Built LinkLens

Lightweight: Keeps bundle size small for faster load times.
Flexible: Customize links, previews, and regex patterns.
Accessible: ARIA support for inclusive apps.
React 18+ Ready: Optimized for modern SPAs.

Links:

npm: LinkLens
GitHub: Source Code

🚀 Ready to Supercharge Your React App?

Install LinkLens today and enhance your React apps with interactive links, rich previews, and seamless user experiences. Build chat apps, blogs, forums, and social feeds that are dynamic, accessible, and highly engaging.

Happy coding! ✨

Have you published your very own NPM package yet?

Aromal — Mon, 25 Aug 2025 17:03:04 +0000

I've created an npm package called linklens

I’d love to help you if you have any doubts about creating your own package – teaching and helping others also helps me learn even more! 💡