DEV Community: K Om Senapati

Building Janus: An AI-Powered Helpdesk That Makes Customer Support Smarter

K Om Senapati — Tue, 28 Oct 2025 05:34:49 +0000

Enterprise helpdesks spend hours triaging repetitive requests, categorizing tickets, and responding to the same issues repeatedly.

This leads to delayed responses, inconsistent resolutions, and wasted agent hours.

Janus solves this problem through automation, intelligent classification, and generative AI.

It’s an AI-powered helpdesk system that allows users to raise tickets, receive instant AI replies, and enables admins to manage everything from a unified dashboard.

Powered by MindsDB AI Agents and a Knowledge Base, Janus automates classification, conversation, and analytics to deliver faster, more consistent support.

The Use Case

The goal was to automate the helpdesk lifecycle.

Users submit tickets and chat with an AI support agent in real time
The system automatically classifies each ticket by intent, priority, and category
Admins get a single dashboard to track trends, promote solved tickets into the Knowledge Base, and search historical data

The outcome is faster response cycles, consistent answers, and actionable insights.

Key Features

1. AI-Driven Ticket Classification

Each ticket is processed by a dedicated MindsDB AI Agent that predicts its type, category, tags, and priority.

The model learns from past tickets to improve accuracy over time.

Ticket metadata schema:

   {
     "type": "str",
     "category": "str",
     "priority": "str",
     "tag_1": "str",
     "tag_2": "str"
   }

2. AI Chat Support
A second agent handles real-time conversations, providing instant solutions by leveraging the existing Knowledge Base for context.

3. Admin Dashboard
Admins can view analytics, approve solved cases into the Knowledge Base, and filter data by type, priority, or category.

4. Knowledge Base Management
The Knowledge Base (KB) is managed by MindsDB. It stores both content and metadata for retrieval and reasoning.
KB schema:

   content_columns = ["subject", "body", "answer"]
   metadata_columns = ["type", "priority", "category", "tag_1", "tag_2"]

5. Search and Insights
Admins can visualize ticket trends, most common tags, and distribution of categories directly within the dashboard.

How It Works

Below is the high-level workflow of Janus.

Architecture diagram:

The Ticket Classifier Agent predicts structured metadata in JSON format which can be parsed directly in python using json.loads()
The Support Agent handles ongoing chat with context from the Knowledge Base
Both AI Agents are powered by MindsDB which manages the AI and KB layers.

For more information about the architecture of Janus, visit here.

Demo

How I Built It

Tech Stack

UI: Streamlit
AI & KB Layer: MindsDB
Vector Database: ChromaDB
LLM Provider: Nebius
Programming Language: Python

The connection between Streamlit and MindsDB is handled via the MindsDB Python SDK.

AI Setup

MindsDB integrates with external AI providers (having OpenAI compatible APIs) for model inference.

For this project, Nebius was used as the provider endpoint.
The LLM used is Qwen/Qwen3-235B-A22B-Thinking-2507, and the embedding model is Qwen/Qwen3-Embedding-8B.

Two MindsDB AI Agents power the workflow:

Ticket Classifier – Predicts metadata such as type, category, and priority.
Support Agent – Generates AI responses using the Knowledge Base for context.

The Knowledge Base combines a vector database (ChromaDB) with embedding model for contextual retrieval.

“If you’d like to see my rough work including KB creation, AI agent logic, querying, and some files database operations check out the notebook here.”

Development Insights

The most challenging part was preparing the prompt for the Ticket Classifier so that it outputs a valid JSON structure directly parsable with json.loads().

This allowed seamless integration with Streamlit components and minimized post-processing.

Example output:

{
  "type": "Login Issue",
  "category": "Authentication",
  "priority": "high",
  "tag_1": "password",
  "tag_2": "reset"
}

MindsDB integration was straightforward, with its Python SDK providing simple APIs for agent calls and KB management.

Streamlit pages (for user and admin) are modular and can be accessed through the sidebar.

Impact

Reduced response time as users get immediate AI replies
Consistent ticket classification ensuring better routing and tracking
Visual insights on ticket categories, priorities, and tag trends
Easier management of historical tickets through the Knowledge Base

AI acts as the first responder, handling repetitive issues and freeing human agents for complex cases.

Future Enhancements

Web Search Integration: Adding real-time data retrieval would make the AI agent more dynamic
Backend Upgrade: Creating a FastAPI backend for production scalability
Third-Party Integrations: Utilizing MindsDB data integrations such as Jira, Slack, or Gmail for enterprise integration

Final Thoughts

Janus demonstrates how combining Streamlit’s simplicity with MindsDB’s AI and Knowledge Base capabilities can automate customer support end-to-end.

It showcases a modular architecture that can evolve into a production-ready multi-channel support system.

Support by starring the repo.

k0msenapati / janus

AI-powered helpdesk system

Janus

Janus is an AI-powered helpdesk system that makes customer support faster and smarter. It helps users raise support tickets, get instant AI replies, and lets admins manage everything from one simple dashboard.

Use Case

Enterprise helpdesks spend hours triaging and responding to repetitive support requests Janus automates the lifecycle:

Users submit tickets and chat with an AI support agent in real time.
The system classifies intent, priority, and category automatically.
Admins can visualize ticket trends, approve high-value cases into the Knowledge Base, and run searches across historical data.

Result: Reduced response time, consistent resolutions, and actionable insights.

Features

🎟️ User Portal

Submit new support tickets.
Get an instant AI-generated first response.
Chat with the AI about your issue.
View all your previous tickets in one place.

🧠 Admin Portal

View visual dashboards showing ticket trends.
Review and manage tickets — approve useful ones for the Knowledge Base or delete…

View on GitHub

If you found this article useful, share it with your peers and community to spread the word about this.

Follow me for more content like this!

Twitter | GitHub | YouTube

Real-Time Voice Meets RAG: Building a Domain-Specific AI Chatbot

K Om Senapati — Wed, 23 Jul 2025 15:37:42 +0000

This is a submission for the AssemblyAI Voice Agents Challenge

What I Built

Built a small side project recently: a voice-based chatbot that answers sociology questions using a domain-trained RAG agent. It’s called Sociopal.

It’s powered by LangGraph, does corrective RAG, and can also search the web when it doesn’t have the answer. AssemblyAI handles speech-to-text, and ElevenLabs takes care of the speech output.

You ask a sociology-related question using your voice. The app transcribes your voice to text, queries a backend agent trained on sociology docs, and gives a response. If the answer isn’t found in the vector DB, it falls back to web search and tries again.

The final response is both displayed and spoken aloud using ElevenLabs.

Demo

Not deployed yet, but here’s a short demo video:

GitHub Repository

⭐ Github 👇

k0msenapati / sociopal

Sociopal

A domain expert AI voice agent for sociology.

Learn more about Sociopal

Sociopal is a Corrective RAG (CRAG) agent powered by a vectorDB containing curated sociology information and web search. It is designed to answer questions and provide detailed explanations related to sociology.

Technology Stack

Frontend:

Next.js
AssemblyAI (speech-to-text)
ElevenLabs (text-to-speech)

Backend:

FastAPI
LangGraph
Groq
ChromaDB
DuckDuckGo (web search)

Getting Started

1. Clone the Repository

git clone https://github.com/k0msenapati/sociopal.git

2. Navigate to the Project Directory

cd sociopal

Frontend Setup

cd ui
bun i
cp .env.example .env.local

Fill in your ElevenLabs and AssemblyAI API keys in .env.local.

Start the development server:

bun dev

Backend Setup

cd ../agent-py
uv sync
source .venv/bin/activate
cp .env.example .env

Fill in your Groq API key in .env.

Index the Data

uv run --active -m sociology_agent.index

Run the Server

uv run --active uvicorn sociology_agent.server:app --reload

View on GitHub

Installation steps are included in the README.

Technical Implementation

AssemblyAI Integration

I’m using AssemblyAI’s Universal-Streaming API to handle real-time voice input. Here’s the rough flow:

1. Getting a Temporary Token

There's an API route (/api/token) that fetches a temporary token:

const url = `https://streaming.assemblyai.com/v3/token?expires_in_seconds=60`

2. Connecting via WebSocket

Once the token is ready, a WebSocket connection is opened to stream audio:

wss://streaming.assemblyai.com/v3/ws?sample_rate=16000&formatted_finals=true&token=${token}

On the frontend, I use getUserMedia() to access the mic, then convert the audio to 16-bit PCM and send it over the socket. AssemblyAI returns transcripts in real time, which I display as the user speaks.

It works smoothly with low latency, and transcripts are surprisingly accurate even with casual speech.

Backend Agent

The backend runs a FastAPI app with a /query route. It accepts user queries, passes them to the LangGraph agent, and returns the response.

The agent uses corrective RAG, so if the first answer is incomplete or irrelevant, it will retry with a refined query. It’s also hooked up to a web search tool in case the answer isn’t in the vectorDB.

Final Thoughts

Building this was a fun way to explore how voice can enhance AI agents. Using real-time transcription with AssemblyAI and natural-sounding speech with ElevenLabs made the voice interface smooth to implement.

While this one is trained on sociology data, the setup is actually domain-agnostic. You can swap out the vector database with any other domain-specific content, and the agent will still work just as well.

Definitely worth trying if you're into voice UIs or building smarter assistants.

Thanks for reading, and I look forward to connecting with you again soon!

Follow me for more content like this!

Twitter | GitHub | YouTube

Building a Dashboard People Actually Want to Use

K Om Senapati — Sat, 19 Jul 2025 12:43:38 +0000

This is a submission for Frontend Challenge: Office Edition sponsored by Axero, Holistic Webdev: Office Space

What I Built

I built this responsive intranet dashboard for the fictional "Acme" company. My main idea was that a dashboard should be dynamic; it shouldn't be a boring static page where you already know what's there.

To make it feel fresh, I added a big welcome **screen with a cool office photo, the current weather, and the time. Below that, I created different news sections to keep things lively: internal updates from the **Company and Executives, Learning announcements, and even the latest Industry News from outside sources.

And since knowing your schedule is super important, I made sure to include sections for My Calendar and My Tasks right on the dashboard.

Demo

You can visit to this GitHub Pages deployment for a full screen experience:
Live Site

⭐ GitHub Repo 👇

k0msenapati / company-intranet

A company intranet dashboard UI created with HTML and CSS (+ Bootstrap).

Company Intranet Dashboard

A company intranet dashboard UI created with HTML and CSS (+ Bootstrap).

Built with

View on GitHub

Journey

I started with the sidebar and the top navbar first. The trickiest part was making it responsive. I’m happy with how I moved the user's profile icon out of the navbar and into the sidebar for the desktop view, it just felt cleaner.

For the main dashboard, I got ideas from different templates (from dribble, axero, etc) and decided on this cards layout. I built it layer by layer, starting with finding that cool office photo for the background.

Creating the info cards was the fun part. Using Bootstrap made it so much easier.

Thanks for reading, and I look forward to connecting with you again soon!

Follow me for more content like this!

Twitter | GitHub | YouTube

Office Desk - CSS Art Edition

K Om Senapati — Thu, 17 Jul 2025 06:55:12 +0000

This is a submission for Frontend Challenge: Office Edition sponsored by Axero, CSS Art: Office Culture.

Inspiration

I wanted to make a small, neat digital workspace. Something that looks calm, clean, and a bit personal. I enjoy plants and simple art, so I added those. I kept everything light and minimal so it's easy on the eyes and feels good to look at.

Demo

You can visit to this GitHub Pages deployment for a full screen experience:
Live Site

⭐ GitHub Repo 👇

k0msenapati / office-art

A simple office desk created with HTML and CSS.

CSS Office Art

A simple office desk created with HTML and CSS.

Built with

Credits

Lamp: CodePen by hungry_ameteur
Plant Pot: CodePen by Iam_DeepaliP
Font: Englebert on Google Fonts
GitHub Badge: add-github-badge by ArnavK-09
Images: Pexels

View on GitHub

Journey

I started with a basic desk and added each item one by one:

First, I added the computer, keyboard, and mouse.
Then I placed a water bottle and a small stack of papers with a pen.
I added a lamp to use during late-night work.
Finally, I put a plant in a pot. I really like plants, so I had to include one.
After that, I made a simple animated background. I added two posters from Pexels, one with leaves and one with clouds. The font I used for the title is called Englebert. I found it on Google Fonts and liked how it looked.

I also checked CodePen for ideas and used parts from two pens to help with the lamp and plant. There are many other things I could add like a chair, bookshelf, or headphones, but I wanted to keep it simple.

Each thing has a reason. The papers are for quick notes, the bottle is to stay hydrated, the lamp is for focus, and the plant is just something I enjoy having around.

Credits

Lamp: CodePen by hungry_ameteur
Plant Pot: CodePen by Iam_DeepaliP
Font: Englebert on Google Fonts
GitHub Badge: add-github-badge by ArnavK-09
Images: Pexels

Thanks for reading, and I look forward to connecting with you again soon!

Follow me for more content like this!

Twitter | GitHub | YouTube

Building a Smart Knowledge Platform with MindsDB

K Om Senapati — Sun, 22 Jun 2025 13:58:29 +0000

Working with structured data like CSVs or JSON often means writing queries, managing schemas, and building pipelines just to answer simple questions. If you want to make that data interactive like asking natural language questions or building an AI agent on top of it, things get complicated fast. You usually need to write code, understand vector stores, manage embeddings, and stitch tools together.

That’s the problem I faced.

I wanted a simple way to:

Upload structured data
Turn it into something queryable with natural language
Build an AI agent that could talk about that data

The Solution: MindsDB

That’s where MindsDB came in.

MindsDB recently added support for Knowledge Bases (KBs). You can now ingest structured data into a KB, use an embedding model (cloud or local), and build multi-step workflows or AI agents on top of it without writing code.

This release immediately clicked with me. I had already used MindsDB’s AI Table feature to build a quiz app. It lets you interact LLMs so I was familiar with the platform and trusted its approach.

With this KBs + Agents integration, I no longer needed to code the whole pipeline. I just wrote a couple of SQL queries in the MindsDB GUI, and voilà — I had an AI agent ready to go.

MindsDB Philosophy

What I especially liked is how MindsDB thinks about data and intelligence. Their philosophy is:

Connect: Connect data from hundreds of data sources
Unify: Unify data from multiple (structured and unstructured) data sources within MindsDB, enabling federated queries as if all data resides in a single database
Respond: Use agents to give intelligent, context-aware responses from that unified data

Dive into MindsDB 👉 MindsDB Docs

As a Python, and SQL guy, this felt like the right mix of practicality and power.

About Agent Hub

Agent Hub works with structured data: CSV and JSON, Knowledge Bases, and AI Agents.

Features:

User can upload structured data.
User can create a KB and ingest the data into it using any OpenAI-compatible API embedding model (cloud/local) or Ollama models.
User can query/summarize the KB and also evaluate it from test_data.
User can add JOBS to ingest data from a data source into the KB.
User can create AI Agents and chat with them.

For structured data, I needed a database. I found out that MindsDB has a files database, which is perfect for storing user-uploaded data files.

Then I created a mini MindsDB package to encompass all the MindsDB logic using the MindsDB Python SDK and SQL queries to do all the operations:

Create a project for each user
Prefix files with the username
Create KBs
Ingest data into KBs
Delete KBs
Query and summarize the KB using AI Table
Evalauate KBs
Setup JOB for data ingestion
Create and use AI Agents

Then I created a simple Flask app which used a SQLite database and SQLAlchemy as the ORM. I used HTML Jinja2 templates. Yeah, no frontend framework.
Python is 💖.

k0msenapati / agent-hub

Agent Hub is an AI collaboration platform designed to transform your data into intelligent AI agents.

🤖 Agent Hub

Note

Agent Hub is an AI collaboration platform designed to transform your data into intelligent AI agents. With Agent Hub, you can unlock powerful insights and automate tasks effortlessly by creating tailored AI agents, building comprehensive knowledge bases, and managing your data files seamlessly.

🎬 Project Showcase

Demo Video	Blog Post

🌟 Features

Agent Hub features intro:

AI Agents – Create and manage AI agents tailored to your specific needs for intelligent responses.
Knowledge Bases – Build comprehensive knowledge bases from your data for efficient querying and insights.
File Management – Upload and organize your files to integrate seamlessly with AI processes.

💻 Installation

Follow these steps to set up and run Agent Hub:

Setup MindsDB and Ollama with Docker (docker-compose.yml is provided):
```
docker-compose up -d
```

Install nomic-embed-text in Ollama container:

docker exec ollama ollama pull nomic-embed-text

Create KB Summarizer Model and Connect Pgvector in MindsDB…

View on GitHub

Challenges

I ran into an issue with MindsDB when performing operations on a KB using an embedding model from Ollama. It would throw an "Event Loop Closed" error on the first attempt. Strangely, repeating the same operation a second time worked just fine. So, I handled that in the app using a simple try-catch with a retry.
For the frontend, I kind of vibe-coded the Jinja2 templates. But hey, the idea is mine 😜

Building this was fairly easy as all the heavy lifting is done by MindsDB.
I just had to trigger the right queries from the Flask backend.

Use Cases

Upload structured data like logs, reports, or exports
Query or summarize data with natural language
Create intelligent agents trained on your data

Final Thoughts

This is just an MVP, but it opens up a lot of possibilities.

Right now, it works with structured data like CSV and JSON but it can easily be extended to handle other formats like web pages, PDFs, or Word docs. MindsDB’s Connect layer also makes it easy to bring in data from external databases and APIs, so the potential to scale and integrate is built-in.

What I’ve built is a starting point: a way to turn raw, structured data into something intelligent. It’s simple, but powerful. And with MindsDB handling the heavy lifting, it’s also surprisingly easy to build.

If you found this article useful, share it with your peers and community to spread the word about this.

Follow me for more content like this!

Twitter | GitHub | YouTube

Building Dissi with Agno and MCP

K Om Senapati — Sat, 19 Apr 2025 06:22:51 +0000

Why AI agents are hot right now ?

I'm sure you've heard about AI agents at least once in 2025. They're gaining popularity due to their ability to make decisions, automate tasks, and collaborate with humans or other agents—leading to higher productivity.

I built Dissi, an AI agent that can manage your Discord server. It can also perform web searches and post the findings to specific channels or forum posts.

What Are AI Agents?

Credits go to Abhishek Reddy (Medium)

An Ai agent is a software system that autonomously performs tasks on behalf of a user. It uses a Large Language Model (LLM) at its core for understanding, decision-making, and interacting with external environments.

Ai agents are capable of reasoning, acting, and learning in real time.

There are several key components in an Ai agent like:

Tools - functions that an Agent can run like searching the web, running SQL, sending an email or calling APIs.
Storage - help us save Agent sessions and state to a database or file.
Knowledge - domain-specific information that the Agent can search at runtime to make better decisions and provide accurate responses.

What is MCP?

Credits go to Avi Chawla (dailydoseofds)

MCP stands for Model Context Protocol. It is a standardized framework designed to enhance the capabilities of AI agents by enabling them to securely and efficiently access a wide range of external tools such as applications, databases, APIs, and processes.

MCP bridges agents and tools via:

MCP Clients: Interface embedded in AI applications (e.g., IDEs, chatbots) to connect with servers.
MCP Servers: Backend programs that provide tools, data, and context to agents. For example, a Discord MCP server enables server management and sending messages to a discord server.

Tools vs MCP Servers

Developers typically create tools manually to give agents access to external services. This process is tedious and language-dependent.

MCP servers, on the other hand, are easier to build and work with all MCP-compatible agents.

Here’s a quick comparison:

Aspect	Individual Tools	MCP Servers
Scope	Single functionality (e.g., search)	Centralized hub for multiple tools
Integration	Manual coding per tool	Standardized protocol for all tools
Scalability	Complex to add new tools	Add tools via configuration files
Execution Model	Agent directly invokes tools	Server handles tool chaining/autonomy

Currently MCP servers can be built using Python, Typescript, C#, Java and Kotlin.

There are already many MCP servers built by community - List of MCP servers. Maybe check this list before creating your own MCP server!

How to Build Your Own AI Agent?

You might be thinking: "This sounds hard! How do I build my own AI agent as a dev?"
That’s where AI agent frameworks come in.

An AI agent framework is a development toolkit that simplifies the process of building LLM-powered systems.

Meet Agno

Agno is a lightweight library for building Agents with memory, knowledge, tools and reasoning.
Agno provides feature for implementing all the aspects of ai agents. You can add your favorite LLM, storage, knowledge base, tools and even attach MCP servers to ai agents.

It has amazing documentation for building AI agents. Check it out now: Agno Documentation

They also have an amazing community in discord. Make sure to join: Agno Discord

One of my favorite things about Agno is the Agent UI.

It provides a beautiful interface for interacting with your AI agents. You can simply create your AI agent and start using it through Agent UI!

Dissi

Let me introduce Dissi again

Dissi is an AI agent that interacts with your discord servers. It has ability of sending or deleting messages, forum posts, reactions and much more. And it also has access to web search and news tools provided by duckduckgo.

You might be wondering how I got access to so many Discord tools.
Well, here is the secret MCP server I used for Dissi. It provided me a vast array of discord tools.

Of course I used Agent UI to interact with Dissi.

Here’s a simple flowchart to give you a better idea:

You can check out the GitHub repository here:

k0msenapati / dissi

Dissi is a high-performance, real-time communication agent powered by Groq and built with Agno, designed to interact with Discord servers using natural language.

💬 Dissi – Real-Time Discord Agent with Web Search

Dissi is a high-performance, real-time communication agent powered by Groq and built with Agno, designed to interact with Discord servers using natural language. Equipped with Discord tools and DuckDuckGo search, it allows you to control server actions like reading/sending messages, managing threads, reactions, and more — all from a simple chat UI.

Demo Video	Blog Post

🚀 Installation & Running

1. Setup Environment Variables

Create a .env file based on .env.example and fill in:

GROQ_API_KEY – Your Groq API key
DISCORD_BOT_TOKEN – Your Discord bot token

2. Clone MCP Discord Server Integration

git clone https://github.com/barryyip0625/mcp-discord.git
cd mcp-discord

# Install dependencies
npm install

# Compile TypeScript
npm run build

3. Prepare Python Environment

uv venv
uv sync

4. Clone & Run the Agent UI

npx create-agent-ui@latest
# Enter 'y' when prompted to create a new project
# Follow the CLI to

…

View on GitHub

Make sure to ⭐ it.

📺 Demo

Also you can vote for this project in Quira.
Voting link

Note: This link may not work properly. So you can first login at quira.sh then click the voting link!

Building Dissi was a fun way to explore what AI agents can really do. With tools like Groq, Agno, and MCP, creating helpful, real-time assistants is more possible than ever.

There’s still a lot to improve, but this is just the beginning. I hope Dissi shows how AI can make everyday tools like Discord more powerful and fun to use.

Let me know if you have any other ideas or if you have built any agents before.

Thanks for reading, and I look forward to connecting with you again soon!

Join the Quira discord community. Quira Discord

Participate in Quira Quest 25

Follow me for more content like this!

Twitter | GitHub | YouTube

Building Talk-to-Page: Chat or Talk with Any Website

K Om Senapati — Mon, 06 Jan 2025 04:32:16 +0000

Ever thought of chatting with a webpage or literally talking to it? Well, I built an app that does just that! It’s called Talk-to-Page. You simply input a URL, and you can start a conversation with the page.

Here’s a quick demo of how it works:

Why Did I Build This?

Chatbots are cool, but they’re not perfect. Most don’t understand the specific details of a web page. If you build a chatbot with Retrieval Augmented Generation (RAG), it often feels limited. You set it up for one page, and it’s stuck with that static content.

So, I thought: Why not make it dynamic?

What if you could give the chatbot any URL and let it adapt on the go?

That’s how Talk-to-Page was born!

How It Came Together

I used my coagents-starter kit as the foundation. It’s a setup I built for creating full-stack apps with AI agents using LangGraph and CopilotKit.

Here’s the starter kit, in case you want to check it out:

k0msenapati / coagents-starter

🤖 Starter kit for building agentic full-stack apps

CoAgents Starter

This example contains a simple starter project.

These instructions assume you are in the coagents-starter/ directory

Running the Agent

First, install the dependencies:

cd agent
poetry install

Then, create a .env file inside ./agent with the following:

GROQ_API_KEY=...

Then, run the demo:

poetry run demo

Running the UI

First, install the dependencies:

cd ./ui
pnpm i

Then, create a .env file inside ./ui with the following:

GROQ_API_KEY=...

Then, run the Next.js project:

pnpm run dev

Usage

Navigate to http://localhost:3000.

LangGraph Studio

Run LangGraph studio, then load the ./agent folder into it.

Make sure to create teh .env mentioned above first!

Troubleshooting

A few things to try if you are running into trouble:

Make sure there is no other local application server running on the 8000 port.
Under /agent/my_agent/demo.py, change 0.0.0.0 to 127.0.0.1 or to localhost

View on GitHub

The backend uses FastAPI for deploying the LangGraph agent, while the frontend is built with Next.js.

Building the Agent

The first step was to create the agent. I followed a modular approach, breaking it into smaller parts like state, nodes, and edges. You can see the folder structure here:

Agent Code

I renamed my_agent to rag_agent. This meant updating the name everywhere—folders, files (like demo.py), and config (like langgraph.json and pyproject.toml).

Url Updating stuff:

Node: I added a new node called update_url that updates the agent’s retriever whenever the URL changes.
Edge: Created an edge called new_url that listens for a "URL UPDATED" message and triggers the update_url node to update the retriever.

Except that it's a self-RAG agent. You can check out its tutorial and code here.

Here’s what the final agent graph looks like:

Building the UI

The UI was fairly straightforward, but I wanted to make it interesting. Instead of using CopilotKit’s built-in copilot, I built a custom chat-bot interface.

You can find the code here:

Custom Chat Interface

For backgrounds, I added a retro grid background using Magic UI’s Retro Grid. I also implemented a Matrix Rain background using v0.dev which remained active for 5s when the URL was updated.

Voice Interaction:

For a better experience than that of a normal chatbot, I added the following:

Speech-to-text for user input.
Text-to-speech for AI responses.

So now, you can literally talk to a webpage. Cool, right? 😉

Getting It All Working

The starter kit comes pre-configured with Tailwind CSS, Shadcn, and CopilotKit. For the agent to work, I just updated the agent name in ui/app/layout.tsx.

My Experience

Building this app was a fun and rewarding experience. Learning LangGraph and LangChain took some time, but the CopilotKit integration was surprisingly smooth.

Big thanks to the CopilotKit documentation for making things easy to follow!

That’s how I built Talk-to-Page!

What do you think about this project? Would you build something similar? Let me know!

Have a great day! Till next time!

If you loved this, please star CopilotKit and talk-to-page :)

Star CopilotKit ⭐

Star talk-to-page 🤝

Follow me for more content like this!

Integrate Daytona in your NextJS app

K Om Senapati — Thu, 05 Dec 2024 15:03:26 +0000

Introduction

Daytona is a secure and open-source development environment manager that simplifies your workflow. Imagine starting development on a Next.js app without the usual setup hassle. On average, developers lose 56% of their time setting up environments. Daytona eliminates that wasted time and lets you focus directly on coding.

Daytona - Secure Infrastructure for Running AI-Generated Code

Deploy AI code with confidence using Daytona's lightning-fast infrastructure. 200ms environment creation, stateful operations, and enterprise-grade security. Try now with $100 credit.

daytona.io

Why Use Daytona?

Daytona works with:

Any Git platform: GitHub, GitLab, Bitbucket
Any IDE: Vim, VS Code, JetBrains IDEs
Anywhere: Localhost, AWS, Azure, GCP, Digital Ocean

The biggest advantage?

You get a pre-configured environment ready in seconds. Just run this command:

daytona create <REPO_URL>

That's it! Your environment is ready. Now you can focus on building features 📈 and fixing bugs 🐛.

Using Daytona for Recipe Genie

1️⃣ Install Daytona using this guide.

2️⃣ Configure Daytona

Step 1: Connect Daytona to Your Git Repositories
To manage your code with version control, link Daytona to your Git provider like Github. Run this command in your terminal:

daytona git-providers add

Step 2: Install a Cloud Provider
If you need to create or manage cloud environments (like AWS, Azure, or GCP), install a provider using this command:

daytona provider install

Step 3: Set a Target
A "Target" is where your development environment will run, like Docker (local or remote), AWS, GCP, or others. To choose one, use this command:

daytona target set

Step 4: Choose Your IDE
Daytona can connect to many IDEs like VS Code, IntelliJ, and more. To set your default IDE, run:

daytona ide

3️⃣ Add devcontainer.json to the repository.

Create a .devcontainer/devcontainer.json file.

You can generate one with ai.

Here's the devcontainer.json I used for Recipe Genie:

{
  "name": "Recipe Genie Dev Container",
  "image": "mcr.microsoft.com/devcontainers/javascript-node",
  "forwardPorts": [3000],
  "customizations": {
    "vscode": {
      "settings": {
        "terminal.integrated.defaultProfile.linux": "bash",
        "files.autoSave": "onWindowChange",
        "editor.formatOnSave": true,
        "editor.defaultFormatter": "esbenp.prettier-vscode"
      },
      "extensions": [
        "ms-azuretools.vscode-docker",
        "ms-vscode-remote.remote-containers",
        "dbaeumer.vscode-eslint",
        "esbenp.prettier-vscode",
        "dsznajder.es7-react-js-snippets",
        "formulahendry.auto-rename-tag",
        "bradlc.vscode-tailwindcss",
        "christian-kohler.path-intellisense",
        "ms-vscode.vscode-typescript-next"
      ]
    }
  },
  "postCreateCommand": "npm i"
}

4️⃣ Create your workspace and project

daytona create <REPO_URL>

That's it! Your environment is ready.

To start development, simply run the following:

npm run dev

Some highlights of `devcontainer.json` file:

Pre-configured environment: Uses the javascript-node devcontainer image from Microsoft.
Post-setup commands: Automatically runs npm i to install dependencies.
VS Code settings: Includes useful VSC settings and extensions for productive development, like Prettier, ESLint, and React/Next.js tools.
PORT forwarding: Automatically forwards port 3000 to access the development server from the host machine.

Conclusion

Daytona simplifies development by automating environment setup. Try Daytona today and experience the difference!

If you like this blog, show some love for Recipe Genie and Daytona.

daytonaio / daytona

The Open Source Dev Environment Manager.

Set up a development environment on any infrastructure using a single command

Documentation · Report Bug · Request Feature · Join Our Slack · Connect On X

Open Source Development Environment Manager

For detailed/manual setup steps click here

Mac / Linux

curl -sfL get.daytona.io | sudo bash && daytona server -y && daytona

Windows

powershell -Command "irm https://get.daytona.io/windows | iex; daytona serve"

Create your first dev environment by opening a new terminal, and running:

daytona create

Start coding.

Features

Quick Setup: Activate a fully configured development environment with a single command - daytona create.
Runs everywhere: Spin up your development environment on any machine; local, remote, cloud-based, physical server or a VM & on any architecture; x86 or ARM.
Various Providers Support: Choose popular providers like AWS, GCP, Azure, DigitalOcean & more or use Docker on bare metal.
IDE Support : Seamlessly supports…

View on GitHub

kom-senapati / Recipe-Genie-Daytona

🧞‍♂️ Ultimate cooking companion powered by TheMealDB for discovering delightful recipes and categories

Sample Recipe Genie

Recipe Genie is your go-to app for exploring delicious recipes, powered by TheMealDB. Discover a variety of dishes, surprise yourself with random recipes, or browse through different categories. With Recipe Genie, enjoy a fun and easy cooking adventure! It's a simple Next.js app built using TheMealDB.

🚀 Getting Started

Open Using Daytona

Install Daytona: Follow the Daytona installation guide.

Create the Workspace:

daytona create https://github.com/kom-senapati/Recipe-Genie-Daytona.git

Start the Application:
```
npm run dev
```

🤔 Why Use DevContainer and Daytona?

DevContainer

Simplifies development environment setup in VS Code.
Perfect for team collaboration in open-source projects.
Eliminates the hassle of creating dev environments for contributors.
Automatically configures extensions and settings for a consistent experience.

Daytona

Works with any Git platform: GitHub, GitLab, Bitbucket.
Compatible with any IDE: Vim, VS Code, JetBrains IDEs.
Runs anywhere: Localhost, AWS, Azure, GCP, Digital Ocean.
Flexible and efficient…

View on GitHub

Deploy a bento to GitHub Pages

K Om Senapati — Sat, 09 Nov 2024 14:05:30 +0000

Hi fellas 👋

In this article, we will create a stunning bento-like portfolio like this and deploy it to GitHub Pages so that you can share it with the world.

So, are you ready to create yours?

1️⃣.. 2️⃣.. 3️⃣.. Let's go 🚀

Grab your laptop, open up your IDE and start crafting 😉

Here is my bento 🙂

It's built using React, Typescript, framer-motion and tailwind CSS.

Here is the original reveal bento grid code by @tomisloading

hover.dev Reveal Bento

I got inspiration from the component, customized it, and deployed it to GitHub Pages.

Create your bento 🪄

Here's how you can create such bento in 4 easy steps:

Step 1️⃣

Clone this repository.

Step 2️⃣

Run npm install to install all the required packages.

Step 3️⃣

Edit the src/data/profile.json file to personalize the bento to your needs.

Step 4️⃣

Run npm start and see it in action.

Deploy it to Github Pages 🚀

We can use the gh-pages package to deploy the bento.
Here is a step-by-step guide for deployment:

Create Repository 🪽
- For a user page: Create a repository named username.github.io.
- For a project page: Create a repository named username.github.io/project.
Add React App Code ➕
- Follow the guide above to create your bento, then add the code to your repository.

Edit the homepage Key in package.json ✏️

Add the homepage key:

 "homepage": "https://username.github.io/"

 "homepage": "https://username.github.io/bento"

Change Remote Repository 💻
- Link your local repository to the GitHub repository:
```
 git remote add origin https://github.com/username/repository-name.git
```
Push React App ⬆️
- Build and deploy the app:
```
 npm run build
 npm run deploy
```
Configure GitHub Pages ⚙️
- Go to the repository settings on GitHub.
- Under the "GitHub Pages" section, set the source to the gh-pages branch.

This will deploy your Bento to GitHub Pages.

That’s a wrap! You’ve now built and deployed a custom bento portfolio to GitHub Pages – great job! 🔥🔥

Don't forget to share your bento portfolio in the comments below and on social media – it’s a great way to get noticed! 😏

Hacktoberfest 2024: A Journey of Learning and Contribution

K Om Senapati — Sat, 02 Nov 2024 17:00:30 +0000

Introduction 👋

Hello, Dev Community!
I am K Om Senapati, a fellow Python dev and open-source enthusiast! I have contributed to open source and participated in Hacktoberfest for 2 years (via GitHub).
But this year it was special as I participated in Quira Hacktoberfest and Devfest as well 😉.

I also participated in some other events 🕺 like

Target 🎯

This year I targeted for more meaningful contributions than last year. Previously I contributed to DSA and RESOURCES repos mostly but this time I tried to contribute to actual projects used in the real world. 📈

I also had a target for getting into the AI domain through open source. 😉
I think it was partially achieved as I learnt about cool projects like

LLMware
Julep
minds (by Mindsdb)

October Contributions Roundup

🪁 Hacktoberfest Demos for CopilotKit

🤖 Added GROQ API Support

🔧 Docsgpt: Pull Request #1246
🔧 json-translator: Pull Request #74
✨ GROQ AI Integration Proposal: Pull Request #9807

🧠 MindsDB Contributions (Pending Merge)

📥 Three Additional PRs for mindsdb-js-sdk

Bot Verse Maintainer 🤖

I was a project admin for GSSOC and opened my project Bot Verse for Hacktoberfest. Around 22 contributors worked on it, and here’s the commit graph:

It was a great experience collaborating with the community to improve this project. 🤓

Learning 🧠

Some of my major learnings this October:

Adding AI copilots and Generative UI to your web apps with Copilotkit
Creating AI agents with memory via Julep
Interacting with your databases via Chartdb and minds

Conclusion

October was an amazing month of growth for me. I’m excited to dive deeper into open source and give back even more.

Fun is over but hustle begins now! 💪

If you loved this, please follow me for more 💖

kom-senapati (K Om Senapati ) · GitHub

Open Source Contributor | Python, JS/TS Developer | CSE '27 - kom-senapati

github.com

Twitter | LinkedIn

Create a Movie Suggestion Bot

K Om Senapati — Sun, 13 Oct 2024 07:28:54 +0000

Movie Suggestion Bot Tutorial

This tutorial will guide you through setting up a movie suggestion bot that uses natural language to detect your mood and genre preferences to suggest movies accordingly.

1. Set Up a Next.js Project

You can set up a Next.js project and then add Shadcn on top of that, or you can use the command:

npx shadcn@latest init

This will initialize both the Next.js project and Shadcn. 😉

2. Set Up CopilotKit

Use the following commands to install the required packages:

npm install @copilotkit/react-core @copilotkit/react-ui @copilotkit/runtime
npm install groq-sdk

Next, add the /api/copilotkit backend endpoint with the following code:

import {
    CopilotRuntime,
    GroqAdapter,
    copilotRuntimeNextJSAppRouterEndpoint,
} from "@copilotkit/runtime";
import { NextRequest } from "next/server";
import Groq from "groq-sdk";

// eslint-disable-next-line @typescript-eslint/no-explicit-any
const groq = new Groq({ apiKey: process.env.GROQ_API_KEY }) as any;

const copilotKit = new CopilotRuntime();

const serviceAdapter = new GroqAdapter({ groq, model: "llama3-groq-8b-8192-tool-use-preview" });

export const POST = async (req: NextRequest) => {
    const { handleRequest } = copilotRuntimeNextJSAppRouterEndpoint({
        runtime: copilotKit,
        serviceAdapter,
        endpoint: "/api/copilotkit",
    });

    return handleRequest(req);
};

3. Add a Server Action

To complete the backend setup, we just need to add one server action. Create the following file:

// src/actions/movies.ts
"use server"

export async function fetchMovies({ query }: { query: string }) {
    const API_KEY = process.env.OMDB_API_KEY;
    const URL = `https://www.omdbapi.com/?apikey=${API_KEY}&s=${encodeURIComponent(
        query
    )}`;

    try {
        const response = await fetch(URL);
        const result = await response.json();

        if (result && result.Search) {
            return result.Search;
        } else {
            return [];
        }
    } catch (error) {
        console.error("Error fetching movies:", error);
        return [];
    }
}

4. Build the Frontend

With the backend ready, we now need to build the frontend for this app.

Add Shadcn Components

Run the following command to add necessary components:

npx shadcn@latest add card badge

Also, add the spinner component.

Update the Page Component

Now, in src/app/page.tsx, import the necessary components and hooks:

import { fetchMovies } from "@/actions/movies";
import { Spinner } from "@/components/ui-expansions/spinner";
import { Badge } from "@/components/ui/badge";
import { Card, CardContent, CardFooter } from "@/components/ui/card";
import { useCopilotAction } from "@copilotkit/react-core";
import { CopilotChat } from "@copilotkit/react-ui";
import "@copilotkit/react-ui/styles.css";
import { Film } from "lucide-react";
import Link from "next/link";

Define the Movie Type

Next, define the Movie type:

type Movie = {
  Title: string;
  Year: string;
  imdbID: string;
  Poster: string;
};

Implement the Page Component

Use the useCopilotAction hook to enable AI to fetch movies and display them to the user. Return the following JSX:

<div className="w-full h-screen">
      <CopilotChat
        className="w-full h-full"
        labels={{
          title: "Movie Suggestion Bot",
          initial: "Hello! 👋 What type of movie are you in the mood for?",
        }}
        instructions="No need to provide movie names unless no results are found. If the API returns movies, only those will be shown."
      />
</div>

Hurray! 🎉 The Movie Suggestion Bot is complete.

If you liked the project, show some support to the project by starring the repository.

⭐ Star movie-suggestion-bot

Also you can follow Copilotkit on their X handle and star their repo as well.

⭐ Star Copilotkit

🤝 Follow Copilotkit

Recipe Genie: Powered by AI 🤖

K Om Senapati — Sun, 15 Sep 2024 05:39:36 +0000

In Quira Quest 16, I took my project Recipe Genie (earlier submitted to Quira Quest 12) and added more features including AI recipe generation and more to make it accessible to users.

Let's take a look at the new features:

1️⃣ Text to Speech

I created a component text-to-speech that takes some text to be converted to speech and renders buttons like play/resume, pause, and stop to control the audio.

You can take a look at this component here:

Code

const TextToSpeech = ({ text }) => {
  const [isPaused, setIsPaused] = useState(false);
  const [utterance, setUtterance] = useState(null);

  useEffect(() => {...}, [text]);
  const handlePlay = () => {...};
  const handlePause = () => {...};
  const handleStop = () => {...};

  return (
    <div className="flex flex-row-reverse gap-5 py-2">
      <button onClick={handleStop}>
        <StopIcon />
      </button>
      <button onClick={handlePause}>
        <PauseIcon />
      </button>
      <button onClick={handlePlay}>
        {isPaused ? <ResumeIcon /> : <PlayIcon />}
      </button>
    </div>
  );
};

export default TextToSpeech;

See the full source code.

2️⃣ AI-Generated Recipe

For generating recipes with AI, I choose to use Vercel AI SDK as it's easy to use and also gives a lot of features like structured outputs from LLMs(I am using this feature to generate recipes for users) out of the box and GROQ API as it's free.

I created a route /api/generate-recipe which has a POST route which takes in inputs like userPrompt, dishType, and dietaryRestrictions and creates a prompt for passing into LLM.

Then using generateObject() of Vercel AI SDK, it creates the recipe object and returns it as a response.

See the full source code for this route.

I integrated this into a form and attached the form, along with the recipe rendering component, to the /ai route of the application.

3️⃣ Ai Recipe Image Generation

I also added AI image generation for these recipes using the recipe name and user prompt. I used https://pollinations.ai/'s free API to do it.

See the full source code for this route.

4️⃣ Speech to Text

I implemented a speech-to-text feature for the input field of the above-discussed form, allowing users to speak their prompt, which is then captured automatically.

See the full source code for this component.

🧑‍💻 Developer Experience/Findings

First I started with zod schema without any description then it gave some error that it couldn't generate the recipe object. Then I added a description for the schema using describe() method of zod and it worked. You can see the schema here.
I found out that the Meta Llama 3 8B model performs better than the Mixtral 8x7b model.
Also as I was using Vercel AI SDK, I didn't have to use any external tooling as I had access to generateObject().
Groq API is very fast and it works like a charm.

If you enjoyed 💖 this project, I’d appreciate your support! You can vote 🗳️ for my submission in the quest and star ⭐ the repo.

Vote 🙏

Star Recipe Genie AI ⭐

That’s all for today—thanks so much for reading! If you have any thoughts or questions, feel free to reach out.

Feel free to connect with me on X as well!