DEV Community: Prakash

Open Source: A Friendly Guide for New Developers

Prakash — Sat, 27 Dec 2025 13:50:53 +0000

Open Source: A Friendly Guide for New Developers

This article is written for first-time developers — a friendly, practical introduction to help you understand open source and take your first steps.

Open source powers much of the software you use every day — from operating systems and developer tools to the websites and services you depend on. If you’re a new or first-time developer, open source is an incredible way to learn, contribute, and make real-world impact. This short guide explains what open source is, how it differs from other models, why it matters, and how you can get started.

What is Open Source?

Open source means the source code of a project is publicly available for anyone to view, modify, and distribute. This encourages transparency, peer review, and collaboration. While the code is open, projects still use licenses that define what others can do with the code.

Open Source vs Free Software vs Commercial

Before we compare them, here’s why the distinction matters: different projects have different goals and rules. Some focus on making code easy to reuse and build on, others focus on protecting users' freedoms, and some are designed mainly to make money. That changes what you are allowed to do with the code and how the project is run.

In simple words:

Open source: you can see and usually modify the code — specific rights depend on the license.
Free software: strong emphasis on the user's freedom to run, study, change, and share the software.
Commercial software: typically built to generate revenue; it may be closed-source or restricted.

Quick comparison	Open Source	Free Software	Commercial
Main idea	Code is public and reusable	User freedoms are protected	Built to make money (may be closed)
What you can do	Read and modify (depending on license)	Run, study, modify, and redistribute	Often limited unless vendor permits it
Who builds it	Community contributors + companies	Communities and activists for software freedom	Companies and paid teams
Friendly for beginners?	Yes — great for learning by reading real projects	Yes — teaches important values, but legal terms matter	Sometimes (paid support helps), but source may be hidden

These categories overlap — for example, an open source project can also be free software, and companies often offer commercial services around open source projects.

A Brief History

The culture of sharing software predates modern open source. Key milestones include:

1983: The GNU Project launched to create a free Unix-like OS.
1991: Linus Torvalds released the Linux kernel, sparking widespread collaboration.
2000s: Distributed version control and platforms like GitHub made contributing easier and more social.

Together these developments shaped the modern open source ecosystem: collaborative, distributed, and accessible.

Life-Changing Open Source Projects

Open source has produced tools and platforms that changed how we build software — and many are things you already use every day. You don't have to be a developer to benefit: many smartphones include Android components that are open source, millions of websites run on WordPress, and popular apps like VLC and Firefox are open-source projects. If you're a developer, these projects' code is public and you can read or contribute; if not, you can still help by reporting bugs, translating, or donating.

Linux — the backbone of servers, mobile devices (Android), and cloud infrastructure.
Git — the version control system used by millions of developers.
Python and Node.js — languages and runtimes powering huge swathes of applications.
Java & Android (AOSP) — Java is a ubiquitous language used for backend systems, Android apps, and games (Minecraft was originally written in Java); Android's open-source components power many phones and devices.
WordPress & Forem (dev.to) — WordPress powers a large portion of the web for blogs and sites; Forem is an open platform for developer communities and publishing — both demonstrate community-driven publishing.
VS Code (OSS core) — the editor's open-source core is used widely by developers; community extensions thrive on it.
Firefox — a modern web browser focused on privacy and extensibility; its codebase is open and accepts contributions.
VLC — a versatile media player that supports countless formats and is community-driven.
7-Zip — an open-source file archiver used for compressing and extracting files.
qBittorrent — a community-maintained BitTorrent client commonly used for peer-to-peer file sharing.
LibreOffice and GIMP — open alternatives for productivity and image editing.
OpenGL and Vulkan — graphics APIs used in games and graphics applications; they power much of the visual software you interact with.
Kubernetes and Docker — changed how we build, ship, and run applications.
Blender — open-source 3D modeling and animation software used in films and design.
OpenStreetMap — volunteer-built mapping data that powers many navigation and location services.

These projects are not just technologies; they’re products you've likely used — so the question is: if you can run them, why not read or change their code? That direct connection makes open source especially inviting for first-time contributors.

Licenses and Their Nuances

Licenses determine what others can do with your code. Choosing a license depends on your goals (encourage wide adoption, preserve freedoms, or limit certain commercial usages). Common license families:

License family	Examples	Key points	When to choose
Permissive	MIT, BSD-2/3, Apache 2.0	Minimal restrictions; Apache 2.0 adds a patent grant	When you want broad adoption and easy reuse, including commercial use
Copyleft	GPLv3, AGPLv3	Requires derivative works to use the same license (AGPL extends to network use)	When you want derivatives to remain open-source
Source-available / Custom	Business Source (e.g., MariaDB BSL), commercial dual-licensing	Limits certain uses (e.g., cloud providers); may not be OSI-approved	When you need specific commercial protections or staged openness

For a broader list of licenses see Open Source Initiative or the SPDX license list.

Each choice has trade-offs between adoption, control, and community expectations.

How Commercial Support Adds Value

Commercial offerings around open source help organizations use projects reliably at scale. Typical commercial services include:

Long-term support (LTS) and enterprise builds: stable releases with extended maintenance and security patches.
Service-level agreements (SLAs): guaranteed response times and dedicated support for critical incidents.
Managed/hosted offerings: cloud-hosted versions (e.g., MongoDB Atlas, Elastic Cloud, Redis Enterprise) that remove operational overhead.
Integration, consulting, and training: help with architectural design, migration, and bespoke integrations.
Security and compliance: coordinated security advisories, backported fixes, and assistance meeting regulatory needs.

Well-known examples include Red Hat (enterprise Linux support), MongoDB (enterprise features and Atlas), Elastic (Elastic Cloud and enterprise plugins), and Redis (Redis Enterprise and hosted services). Paid support funds maintainers and organizations, improves documentation and testing, and underwrites the work that keeps widely used projects healthy.

That said, commercial models sometimes introduce trade-offs: features may be gated behind paid tiers, or licensing changes can create tension with community expectations — so transparent governance and clear communication are important.

When Commercialization Causes Friction

Sometimes monetization strategies trigger community pushback. Here are a few concrete cases you may have heard about:

Vendor licensing shifts (Java/Oracle): Oracle changed the terms and long-term support model for its Oracle JDK binaries, which led many organizations to switch to community OpenJDK builds or paid commercial distributions. The change shows how vendor licensing can push users toward community-maintained alternatives (see OpenJDK: https://openjdk.java.net/).
Cloud-provider tensions and re-licensing (Redis, Elastic, MongoDB): Some projects moved parts of their code to more restrictive or "source-available" licenses (or SSPL-style terms) to stop cloud providers from offering managed services without sharing revenue. Those moves caused forks, ecosystem disruption, and heated debate — for example, Redis' 2024 relicensing of certain modules and the later discussions about returning to a more permissive stance (see Redis announcement and coverage: https://redis.com/blog/introducing-redis-enterprise-modules/ and https://en.wikipedia.org/wiki/Server_Side_Public_License).
Platform policy changes (Chrome Manifest V2 → V3): Platform or policy changes can also affect ecosystems. Chrome's move from Manifest V2 to Manifest V3 changed extension APIs that many ad blockers relied on, prompting privacy and developer concerns and wider discussion about platform power (see the Chromium docs and coverage: https://developer.chrome.com/docs/extensions/mv3/ and https://www.license-token.com/wiki/ublock-origin-dead-in-chrome).

These examples show why transparent governance, clear communication, and diverse funding models matter — they reduce surprises and keep communities resilient when business needs change.

How Developers Can Help Sustain Open Source

You don’t need to be a core maintainer to have high impact. Ways to help:

Contribute small fixes: docs, tests, or tiny bug fixes labeled “good first issue”.
Report clear bugs and include steps to reproduce.
Sponsor or donate to maintainers and organizations that support projects you rely on.
Help with triage and reviews to reduce maintainer burden.
Share knowledge: write blog posts, give talks, or mentor newcomers.

Together these actions make projects healthier and more sustainable.

Getting Started — A Simple Roadmap

A. Create your own project (learn by doing):

Start small: a focused utility, library, or tool solves a real problem.
Choose a license (see table above) and add a clear README.md and LICENSE file.
Add CONTRIBUTING.md, issue and PR templates, and a short roadmap to guide contributors.
Publish the repo (GitHub/GitLab) and announce it in relevant communities; welcome feedback.

B. Contribute to an existing project (learn from others):

Pick a project you use and read its contribution guide and code of conduct.
Look for labels like good first issue, help wanted, or docs.
Start with documentation, tests, or small bug fixes to build context and confidence.
Communicate clearly: describe your changes, link tests, and be open to reviewer feedback.

C. Be helpful, not a nuisance: small, respectful, well-explained contributions win friends. Avoid low-effort or noisy PRs and follow the project's contribution norms — a good reminder is this tongue-in-cheek example: https://www.reddit.com/r/ProgrammerHumor/comments/1o0iqf6/lookingclosely/.

Open source is welcoming — start small and grow your impact over time.

Conclusion

Open source offers an incredible way for new developers to learn, contribute, and shape software used around the world. Start small, be consistent, and you’ll find that helping others also accelerates your own growth.

ITG DocVerse - A Developer Knowledge Platform Powered Entirely by Redis

Prakash — Sun, 10 Aug 2025 19:40:26 +0000

This is a submission for the Redis AI Challenge: Beyond the Cache.

What I Built

Meet ITG DocVerse - an internal knowledge-sharing platform for organizations, inspired by the excellent community-driven approach of DEV.to. I wanted to create something that teams could use to document projects, share insights, and collaborate - but with the power of Redis driving everything under the hood.

The platform allows team members to:

📝 Share posts, thoughts, and auto generated documents from git repos (Work in progress)
🔍 Search content using AI-powered semantic search
💬 Engage with discussions and comments
🏷️ Organize content with tags and categories
👤 Build profiles and connect with colleagues

What makes this special is the architecture - I used this hackathon as an opportunity to explore Redis as the complete backbone of the application. From storing user profiles to powering semantic search with vector embeddings, this project demonstrates how Redis can serve as a comprehensive data platform that scales from small teams to enterprise-wide knowledge bases.

Demo

🚀 Live Demo: https://itg-docverse.onrender.com/static/index.html

📚 API Documentation: hhttps://itg-docverse.onrender.com/docs

Screenshots

Main Dashboard & Content Feed

The main feed showing posts with real-time interactions and engagement

Detailed post view with markdown rendering and discussion section

Content Creation & Management

Rich markdown editor for creating technical documentation

Quick thought sharing interface for team communication

AI-Powered Search & Discovery

Semantic search finding relevant content even without exact keyword matches

AI-generated code summaries and documentation from repositories

Automated code analysis and summary generation

Tag-Based Organization

Visual tag cloud for content discovery and organization

Grid-based tag organization for better navigation

User Engagement & Analytics

Real-time reactions and engagement tracking

Community leaderboard and contributor recognition

Comprehensive user profiles with activity tracking

Redis Data Architecture in Action

Redis Insight showing our multi-model data structure

User profiles stored as Redis Hash sets

Post content stored as Redis JSON documents

Tag organization using Redis sorted sets

Vector embeddings stored for semantic search

Content chunking strategy for large documents

How I Used Redis 8

This project leverages Redis as the primary backbone - serving as our database, search engine, and real-time data platform. The hackathon gave me the perfect excuse to see how far I could push Redis beyond traditional caching. Here's how:

🗄️ Redis as Primary Database

Rather than reaching for PostgreSQL or MySQL, I decided to architect the application around Redis data structures to see what was possible:

User Management with Hash Sets

# User profiles stored as Redis hashes
HSET user:prakash88 
  id "ac2402cf-9a84-46a5-8484-d32400e7a18d"
  username "prakash88" 
  display_name "Prakash M"
  email "prakash@example.com"
  bio "Full-stack developer passionate about Redis"
  avatar_url "https://..."
  joined_date "2025-01-15T10:30:00Z"

Content Storage with JSON Documents

# Posts stored as Redis JSON with rich metadata
JSON.SET post:technical-architecture $ '{
  "id": "post-technical-architecture",
  "title": "Building with Redis: Beyond the Cache",
  "content": "# How Redis Powers Modern Applications...",
  "author_id": "ac2402cf-9a84-46a5-8484-d32400e7a18d",
  "post_type": "posts",
  "tags": ["redis", "architecture", "database"],
  "created_at": "2025-01-15T14:22:00Z",
  "read_time": 8
}'

Indexing with Sorted Sets for Performance

# Time-based post feeds using sorted sets
ZADD posts:by_date 1737890520 "post-technical-architecture"
ZADD posts:by_tag:redis 1737890520 "post-technical-architecture" 
ZADD user:prakash88:posts 1737890520 "post-technical-architecture"

🧠 AI-Powered Vector Search

The real magic happens with Redis's vector search capabilities. I built a semantic search engine that understands context, not just keywords:

Vector Embeddings Storage

# 768-dimensional embeddings stored efficiently
HSET search:vector:post-architecture-chunk-0
  vector "\x3e\x9a\x12\x40..."  # Binary encoded float32 array
  metadata '{"post_id": "post-architecture", "content": "Redis serves as...", "title": "Technical Architecture"}'

# Index management
SADD search:chunks "post-architecture-chunk-0"

The Search Pipeline

Content Chunking: Break posts into semantic chunks (~500 words)
Embedding Generation: Use Ollama's nomic-embed-text model to create 768-dim vectors
Redis Storage: Store vectors as binary data with metadata
Similarity Search: Cosine similarity against all stored vectors
Results Ranking: Return top matches with relevance scores

📊 Data Architecture in Redis

Here's how I structured the data across Redis:

Redis Database Structure
├── Users (Hashes)
│   ├── user:{username} → Profile data
│   └── user:{id}:posts → User's post references
│
├── Posts (JSON Documents)  
│   ├── post:{id} → Full post content
│   ├── posts:by_date → Time-ordered feed
│   └── posts:by_tag:{tag} → Tag-based organization
│
├── Comments (Hashes)
│   ├── comment:{id} → Comment data
│   └── post:{id}:comments → Post comment references
│
├── Vector Search (Mixed Types)
│   ├── search:chunks → Set of all chunk IDs
│   ├── search:vector:{chunk_id} → Hash with vector + metadata
│   └── search:metadata:{post_id} → Post search metadata
│
└── Authentication (Strings)
    └── session:{token} → JWT session data

Redis Data Model Visualization

graph TB
    subgraph "User Management"
        A[user:prakash88<br/>Hash: Profile Data] --> B[user:ac24...18d:posts<br/>Sorted Set: Post IDs]
        C[user:sarah_dev<br/>Hash: Profile Data] --> D[user:7576...9c08:posts<br/>Sorted Set: Post IDs]
    end

    subgraph "Content Storage"
        E[post:welcome-guide<br/>JSON: Full Content] --> F[posts:by_date<br/>Sorted Set: All Posts]
        G[post:architecture<br/>JSON: Full Content] --> F
        E --> H[posts:by_tag:tutorial<br/>Sorted Set: Tagged Posts]
        G --> I[posts:by_tag:redis<br/>Sorted Set: Tagged Posts]
    end

    subgraph "Vector Search Engine"
        J[search:chunks<br/>Set: All Chunk IDs] --> K[search:vector:post-guide-chunk-0<br/>Hash: Vector + Metadata]
        J --> L[search:vector:post-arch-chunk-0<br/>Hash: Vector + Metadata]
        K --> M[768-dim Binary Vector<br/>+ JSON Metadata]
        L --> N[768-dim Binary Vector<br/>+ JSON Metadata]
    end

    subgraph "Engagement Layer"
        O[comment:cm1<br/>Hash: Comment Data] --> P[post:welcome-guide:comments<br/>List: Comment IDs]
        Q[comment:cm2<br/>Hash: Comment Data] --> P
    end

    B -.-> E
    D -.-> G
    E -.-> K
    G -.-> L

Data Flow for Search Operations

sequenceDiagram
    participant User
    participant API
    participant Redis
    participant Ollama

    User->>API: Search "react architecture"
    API->>Ollama: Generate embedding
    Ollama-->>API: 768-dim vector

    API->>Redis: SMEMBERS search:chunks
    Redis-->>API: [chunk-0, chunk-1, ...]

    loop For each chunk
        API->>Redis: HGET search:vector:chunk-N vector
        Redis-->>API: Binary vector data
        Note over API: Calculate cosine similarity
    end

    Note over API: Sort by similarity score
    API->>Redis: HGET search:vector:best-chunks metadata
    Redis-->>API: Post metadata + content
    API-->>User: Ranked search results

Redis Key Patterns Used

Pattern	Type	Purpose	Example
`user:{username}`	Hash	User profile storage	`user:prakash88`
`user:{id}:posts`	Sorted Set	User's posts by time	`user:ac24...18d:posts`
`post:{id}`	JSON	Complete post content	`post:welcome-guide`
`posts:by_date`	Sorted Set	Global feed timeline	`posts:by_date`
`posts:by_tag:{tag}`	Sorted Set	Tag-based organization	`posts:by_tag:redis`
`search:vector:{chunk_id}`	Hash	Vector + metadata	`search:vector:post-arch-chunk-0`
`search:chunks`	Set	All searchable chunks	`search:chunks`
`comment:{id}`	Hash	Comment data	`comment:cm1`
`post:{id}:comments`	List	Post's comments	`post:welcome-guide:comments`

⚡ Performance Optimizations

Redis's speed shines through several optimizations:

1. Compound Queries with Pipeline

# Fetch user, their posts, and engagement data in one roundtrip
pipe = redis_client.pipeline()
pipe.hgetall(f"user:{username}")
pipe.zrevrange(f"user:{user_id}:posts", 0, 19)  # Latest 20 posts
pipe.scard(f"user:{user_id}:followers")
results = pipe.execute()

2. Smart Caching with Expiration

# Cache frequently accessed data with TTL
redis_client.setex(f"popular:posts:today", 3600, json.dumps(trending_posts))

3. Memory-Efficient Vector Storage

Instead of storing vectors as JSON arrays, I serialize them as binary:

# Convert float array to compact binary format
vector_bytes = np.array(embedding, dtype=np.float32).tobytes()
redis_client.hset(f"search:vector:{chunk_id}", "vector", vector_bytes)

🔄 Future Real-Time Features

The current architecture is designed to support additional Redis capabilities in the roadmap:

Chatbot Integration: A knowledge-base powered chatbot using the existing vector search
Redis Streams: For storing and processing chat queries and user interactions
Pub/Sub: For real-time chat notifications and live updates
Advanced Analytics: Using the engagement data already being collected

The "Aha!" Moments

Building this taught me that Redis isn't just fast storage - it's a complete data platform:

Easy Migration: Originally started with SQLite, but adding Redis support was surprisingly smooth thanks to our service layer architecture
JSON Support: Redis JSON made complex document storage trivial - no more complex table joins!
Vector Search: No need for separate vector databases like Pinecone - Redis handled it natively
Multi-Model Flexibility: Hash sets for profiles, sorted sets for feeds, JSON for posts - all in one system
Atomic Operations: Complex updates in single commands instead of transaction blocks
Memory Efficiency: Surprisingly good performance even with a 12-chunk vector index
Scalability: What started as a simple SQLite app easily scaled to support Redis's advanced features

Technical Stack

Backend: FastAPI (Python) with Redis as the primary database
Frontend: React + TypeScript with Vite
UI Framework: Tailwind CSS + shadcn/ui components
AI: Ollama for local embeddings (nomic-embed-text model)
Search: Redis vector operations with cosine similarity
Authentication: JWT tokens stored in Redis
Deployment: Docker-compose for easy setup

What's Next?

This hackathon project was a great exploration of Redis's potential as an application backbone. I would like to explore other Redis capabilities for the :

Complete Redis migration: Since the project was started in Sqlite and migrated to Redis not all capabilities works in Redis
AI Chatbot: Knowledge-base powered assistant using existing vector search
Real-time Chat: Redis Streams for storing chat history and Pub/Sub for live messaging
Advanced Analytics: Redis TimeSeries for tracking user engagement patterns
Geographic Features: Redis GEO commands for location-based content
Enhanced Search: Combining full-text search with vector similarity

Try It Yourself

# Clone and run with Docker
git clone https://github.com/ITechGenie/itg-docverse
cd itg-docverse
docker-compose up -d

# Or run locally
cd apis && pip install -r requirements.txt && python main.py
cd app && npm install && npm run dev

Redis isn't just about caching anymore - it's a powerful platform for building modern applications. ITG DocVerse shows what's possible when you use Redis as your application's backbone.

The hackathon challenge gave me the perfect excuse to explore these capabilities! 🚀

OpenFGA Studio - An Open Source Authorization Modeling Interface

Prakash — Tue, 10 Jun 2025 18:22:48 +0000

Understanding OpenFGA

OpenFGA (Fine-Grained Authorization) is a high-performance authorization engine built for developers and inspired by Google's Zanzibar paper. It excels in handling complex authorization scenarios with features that make it stand out:

Relationship-Based Authorization: Model complex access patterns through relationships
High Performance: Process millions of authorization checks per second
Flexibility: Support for RBAC, ABAC, and ReBAC models
Time-Based Access: Define temporal access rules with built-in support
Proven Architecture: Based on Google's battle-tested Zanzibar system

While OpenFGA Playground provides a hosted application for experimentation, it comes with limitations:

Not open source
Cannot be deployed in air-gapped environments
Limited customization options
Dependency on external services

Why This Project?

I built OpenFGA Studio to address these limitations and provide:

A fully open-source solution deployable anywhere
Enhanced user experience for authorization modeling
Complete control over your authorization data
Customizable interface for specific needs
Seamless integration with existing systems

OpenFGA Studio streamlines the process of creating, testing, and managing authorization models, making complex authorization logic more accessible and manageable. Built with modern web technologies including React, TypeScript, and Material-UI, it provides a robust and intuitive interface for working with OpenFGA.

Key Features

1. Store Management

The interface provides a straightforward way for managing OpenFGA stores. You can:

Create new authorization stores
Switch between existing stores
View and manage store configurations
Track model versions and changes

2. Visual Authorization Model Editor

The model editor is a powerful interface for defining authorization rules with features including:

Syntax highlighting for better readability
Real-time validation against OpenFGA schema
Support for both DSL and JSON formats
Error highlighting and suggestions
Easy switching between model versions

3. Interactive Graph Visualization

Understand your authorization model at a glance with:

Visual representation of relationships between types
Interactive node exploration
Relationship flow visualization
Dynamic updates as you modify the model
Zoom and pan controls for large models

4. Advanced Tuple Management

The tuple management interface makes it easy to define and manage relationships:

Assisted tuple creation with type suggestions
Support for direct (freeform) tuple input
Batch operations for efficient management
Reverse chronological listing of tuples
Quick delete operations

5. Conditional Relationship Support

Handle complex authorization scenarios with conditional relationships:

Dynamic condition parameter inputs
Type-aware parameter validation
Timestamp and duration support
Visual feedback for condition state

6. Comprehensive Query Testing

Test your authorization rules with an intuitive interface:

Features include:

Visual query builder
Direct query input support
Real-time query validation
Historical query tracking
Quick query replay

7. Conditional Access Testing

Test complex conditional access patterns:

Test time-based access rules
Validate contextual conditions
Dynamic parameter inputs
Clear success/failure indicators

8. Developer-Friendly Features

OpenFGA Studio is built with developers in mind:

Clean, modern UI with dark mode support
Keyboard shortcuts for common operations
Copy/paste support for all fields
Detailed error messages
Response timing information

Technical Implementation

OpenFGA Studio is built with modern web technologies:

Frontend: React with TypeScript for type safety
UI Framework: Material-UI for consistent, responsive design
State Management: React hooks and context for efficient state handling
Build Tool: Vite for fast development and optimized production builds
API Integration: Axios for reliable API communication
Graph Visualization: React Flow for interactive model visualization

Common Use Cases

Authorization Modeling
- Design role-based access control (RBAC) systems
- Implement attribute-based access control (ABAC)
- Model relationship-based authorization
Testing and Validation
- Verify access control rules
- Test time-based permissions
- Validate complex conditional access
Development and Debugging
- Debug authorization issues
- Prototype authorization models
- Document access control patterns

Conclusion

OpenFGA Studio simplifies the complex task of fine-grained authorization modeling and testing. Whether you're designing a new authorization system or maintaining an existing one, this tool provides the features needed to work efficiently with OpenFGA.

The combination of visual tools, intuitive interfaces, and powerful testing capabilities makes it an essential tool for developers working with authorization systems. The tool continues to evolve with new features and improvements based on community feedback and real-world usage patterns.

Feel free to contribute or request features at OpenFGA Studio

Enhancing the VS Code Agent Mode to integrate with Local tools using Model Context Protocol (MCP)

Prakash — Sun, 18 May 2025 20:17:53 +0000

Enhancing the VS Code Agent Mode to integrate with Local tools using Model Context Protocol (MCP)

Building a Todo List Server with Model Context Protocol (MCP)

This blog post walks through creating a Todo List server using the Model Context Protocol (MCP), demonstrating how to build AI-friendly tools that integrate seamlessly with VS Code.

🔗 Source Code: The complete implementation is available on GitHub

The Evolution of AI-Assisted Development
What is Model Context Protocol (MCP)?
Architecture Overview
Prerequisites
Setting Up the Project
Implementing the MCP Server
VS Code Integration
Using the Todo MCP Server
Next Steps and Improvements
Troubleshooting
Resources

The Evolution of AI-Assisted Development

I have been using VS Code with GitHub Copilot for development purposes. The introduction of text-based chat, which brought GPT capabilities directly into the IDE, was revolutionary.

GitHub Copilot and the Local Tools Gap

GitHub Copilot has revolutionized how developers write code by providing intelligent code suggestions and completions. While it excels at understanding code context and generating relevant snippets, there has been a notable gap in its ability to interact with local development tools, intranet KBs, and execute actions in the development environment. This limitation means that while Copilot can suggest code, it cannot directly help with tasks like running commands, managing files, or interacting with local services.

Agent Mode: Bridging the Gap

The introduction of Agent Mode in GitHub Copilot represents a significant step forward in AI-assisted development. It enables Copilot to:

Execute terminal commands
Modify files directly
Interact with the VS Code environment
Handle project-specific tasks

This advancement transformed Copilot from a passive code suggestion tool into an active development partner that can help manage your entire development workflow. Here are some powerful capabilities and example interactions:

1. Build and Test Automation

Trigger Maven builds with specific profiles:

"Run mvn clean install with the 'production' profile for my project"

Execute JUnit test suites:

"Execute all JUnit tests in the UserServiceTest class"

Run code quality tools:

"Run ESLint on all JavaScript files in the src directory"
"Start a local Sonar analysis with coverage and security scan"

2. Documentation and Release Management

Generate release documentation:

"Generate release notes for changes between tag v1.2.0 and v1.3.0"

Technical documentation:

"Create a technical design document for the authentication service"
"Update the API documentation in Confluence for the new endpoints"

3. Project Management Integration

JIRA ticket management:

"Create a JIRA ticket for the memory leak bug we found in the login service"
"Convert all TODO comments in AuthService.java to JIRA tickets"

Sprint management:

"Update the status of PROJ-123 to 'In Review' and add a comment with the PR link"
"Show me all JIRA tickets assigned to me that are blocking the current sprint"

4. Cross-Repository Operations

Multi-repo analysis:

"Check if the latest changes in the API repo are compatible with our client library"
"Run integration tests across both the frontend and backend repositories"

Try the above prompts in VSCode Agent mode and see the magic.

While these capabilities demonstrate the power of Agent Mode, they highlight a crucial challenge: the need for external API integrations. Each of these tasks requires:

Authentication with external services (JIRA, Confluence, Sonar)
Managing different API versions and endpoints
Handling various authentication methods
Maintaining connection states and sessions
Coordinating operations across multiple systems

This complexity creates significant overhead for developers who need to:

Implement and maintain integration code for each service
Handle authentication and authorization
Manage API versioning and changes
Deal with different response formats and error handling

MCP: The New Standard for AI Tool Integration

Model Context Protocol (MCP) emerges as the next evolution in this space, providing a standardized way for AI models to interact with development tools and services. Unlike traditional approaches where AI assistants are limited to suggesting code, MCP enables:

Direct Tool Integration
- AI models can directly invoke local tools
- Real-time interaction with development environment
- Standardized communication protocol
Extensible Architecture
- Custom tool definitions
- Plugin-based system
- Easy integration with existing services
Development Environment Awareness
- Context-aware assistance
- Access to local resources
- Real-time feedback loop

What is Model Context Protocol (MCP)?

Model Context Protocol (MCP) is a specification that enables AI models to interact with external tools and services in a standardized way. It defines how tools can expose their functionality through a structured interface that AI models can understand and use.

Key benefits of MCP that I have personally benefited from:

Standardized tool definitions with JSON Schema
Real-time interaction capabilities
Session management
Built-in VS Code integration

More about MCP Architecture Documentation

How MCP Tools Work

Each MCP tool follows a standardized structure:

{
  name: "toolName",
  description: "What the tool does",
  parameters: {
    // JSON Schema definition of inputs
  },
  returns: {
    // JSON Schema definition of outputs
  }
}

When an AI model wants to use a tool:

It sends a request with the tool name and parameters
The MCP server validates the request
The tool executes with the provided parameters
Results are returned in a standardized format

This structured approach ensures:

Consistent tool behavior
Type safety throughout the system
Easy tool discovery and documentation
Predictable error handling

Architecture Overview

Here's how the different components interact in our MCP Todo implementation:

graph TD
    A[GitHub Copilot] -->|Natural Language Commands| B[VS Code]
    B -->|MCP Protocol| C[MCP Todo Server]
    C -->|CRUD Operations| D[(LowDB/Database)]
    C -->|Real-time Updates| B
    B -->|Command Results| A

Prerequisites

To follow along, you'll need:

Node.js (v22 or higher)
VS Code
Basic understanding of Express.js
npm or yarn package manager

Setting Up the Project

First, create a new project and initialize npm:

mkdir mcp-todo-server
cd mcp-todo-server
npm init -y

Install required dependencies:

npm install @modelcontextprotocol/sdk express lowdb zod

For this demonstration, we're using lowdb to manage tasks in a JSON file without actual integration with an external system. In a production environment, the lowdb functions can be replaced with actual JIRA CRUD API calls for end-to-end implementation.

Create the basic directory structure:

mcp-todo-server/
├── src/
│   ├── config/
│   ├── tools/
│   ├── utils/
│   └── server.js
└── package.json

Implementing the MCP Server

1. Basic Server Setup

We started with a basic Express server that implements the MCP protocol. The server uses StreamableHTTP for real-time communication and session management.

Key components in server.js:

Express server setup
MCP SDK integration
StreamableHTTP transport configuration
Session management for maintaining tool state

2. Database Configuration

We used lowdb, a lightweight JSON database, to persist our todos. The database configuration in config/db.js handles:

JSON file storage
Basic CRUD operations
Data persistence between server restarts

3. Implementing Todo Tools

We implemented four main tools for managing todos:

createTodo
- Creates new todo items
- Validates input using Zod schema
- Returns the created todo with a unique ID
listTodos
- Lists all todos or filters by completion status
- Formats output for easy reading
- Supports real-time updates
updateTodo
- Updates todo completion status
- Validates input parameters
- Returns updated todo information
deleteTodo
- Removes todos by ID
- Provides completion confirmation
- Handles error cases gracefully

VS Code Integration

To enable VS Code to use our MCP server, follow these steps:

Enable Agent mode in VS Code. Click on the drop down just before the model listing and select agent from it.

Then click on the Gear icon next to the speaker icon in the above image and select "Add more tools" then select "Add MCP Server"

Then select HTTP or Server-Sent Events and provide the URL based on the server we created. In this case, it's http://localhost:3000. Then select a name for the server.

Alternatively you can Press Ctrl+Shift+P (Windows/Linux) or Cmd+Shift+P (Mac) to open the Command Palette. Type "Open Settings (JSON)" and select it and add the following configuration:

{
    "mcp": {
        "servers": {
            "my-mcp-server": {
                "url": "http://localhost:3000/mcp"
            }
        }
    }
}

You can use the 4th step to verify if the server is added correctly after the first 3 steps are done. The User Settings option has Start, Stop, and Restart options. This step helped me identify if there are any issues with the MCP tools server effectively.

Reload VS Code to apply the changes or use the Start, Stop, Restart options in the settings.json as shown above.
After successful addition of the MCP server, you should see the tools listed when you click the gear icon in the Copilot chat window.

Using the Todo MCP Server

Here are some example prompts you can use in VS Code with GitHub Copilot to interact with the todo server. Each example includes a screenshot of the actual interaction:

Creating a Todo

   Prompt: "Create a new todo item called 'Review PR #123'"
   Response: Successfully created todo "Review PR #123"

Listing Todos

   Prompt: "Show me all my todos"
   Response: Here are your todos:
   - Review PR #123 (Not completed)
   - Update documentation (Completed)
   - Setup test environment (Not completed)

Updating a Todo

   Prompt: "Mark the todo about PR review as completed"
   Response: Updated "Review PR #123" to completed

Deleting a Todo

   Prompt: "Delete the todo about documentation"
   Response: Successfully deleted "Update documentation"

Filtering Todos

   Prompt: "Show me only completed todos"
   Response: Completed todos:
   - Review PR #123

Next Steps and Improvements

Potential enhancements for the project:

Authentication
- Add user authentication
- Implement role-based access
Advanced Features
- Due dates for todos
- Categories/tags
- Priority levels
Performance
- Caching
- Database optimization
- Rate limiting
Testing
- Unit tests
- Integration tests
- Load testing

Troubleshooting

Common Issues and Solutions

Server Connection Issues
- Verify the server is running on port 3000
- Check VS Code settings for correct server URL
- Ensure no firewall blocking the connection
Tool Registration Problems

   Error: Tool 'createTodo' not found
   Solution: Check if server is properly initializing tools in server.js

Schema Validation Errors
- Ensure todo items match the required schema
- Check Zod validation rules in tool implementations
- Verify JSON payload format
Real-time Updates Not Working
- Confirm SSE (Server-Sent Events) connection is established
- Check browser console for connection errors
- Verify StreamableHTTP transport configuration

Source Code Reference

Key implementation files:

Server setup: src/server.js
Tool implementations:
Database configuration: src/config/db.js

Conclusion

We've successfully built a fully functional MCP-compatible Todo server that:

Implements CRUD operations
Maintains persistent storage
Provides real-time updates
Integrates seamlessly with VS Code

This implementation serves as a great starting point for building more complex MCP tools and understanding how AI models can interact with custom tools through the Model Context Protocol.

Resources

You can also:

Report bugs by creating issues
Suggest improvements through discussions
Help improve documentation
Originally posted at ITechGenie

Creating a browser extension for Chrome / Edge

Prakash — Mon, 17 Jun 2024 20:32:40 +0000

Creating a browser extension has never been easier, thanks to the comprehensive documentation and support provided by browser vendors. Below, I’ll walk through the steps to create a simple extension for both Chrome and Microsoft Edge using Manifest V3. We will use this tool to print the list of HTTP requests that are fired in a given webpage and list it in the extension.

Basics of extensions:

Manifests – A manifest is a JSON file that contains metadata about a browser extension, such as its name, version, permissions, and the files it uses. It serves as the blueprint for the extension, informing the browser about the extension’s capabilities and how it should be loaded.

Key Components of a Manifest File:

Here are the key components typically found in a Manifest V3 file:

1. Manifest Version: There are different versions of the manifest file, with Manifest V3 being the latest and most widely adopted version. Manifest V3 introduces several changes aimed at improving security, privacy, and performance with lot of controversies around it. Read more about the controversies at Ghostery.

2. Name and Version: These fields define the name and version of the extension. Choose a unique name and version. An excellent guide of version semantics is available here.

3. Description: A short description of the extension’s functionality.

4. Action: Defines the default popup and icon for the browser action (e.g., toolbar button).

5. Background: Specifies the background script that runs in the background and can handle events like network requests and alarms.

6. Content Scripts: Defines scripts and stylesheets to be injected into matching web pages.

7. Permissions: Lists the permissions the extension needs to operate, such as access to tabs, storage, and specific websites.

8. Icons: Specifies the icons for the extension in different sizes. For this post I created a simple icon using Microsoft Designer. I gave a simple prompt with the description above and I got the below image. Extension requires different sizes for showing it in different places. I used Chrome Extension Icon Generator and generated different sizes as needed.

9. Web Accessible Resources: Defines which resources can be accessed by web pages.

Create a project structure as follows:

HttpRequestViewer/
|-- manifest.json
|-- popup.html
|-- popup.js
|-- background.js
|-- history.html
|-- history.js
|-- popup.css
|-- styles.css
|-- icons/
    |-- icon.png
    |-- icon16.png
    |-- icon32.png
    |-- icon48.png
    |-- icon128.png

Manifest.json

{
  "name": "API Request Recorder",
  "description": "Extension to record all the HTTP request from a webpage.",
  "version": "0.0.1",
  "manifest\_version": 3,
  "host\_permissions": \[""\],
  "permissions": \["activeTab", "webRequest", "storage"\],
  "action": {
    "default\_popup": "popup.html",
    "default\_icon": "icons/icon.png"
  },
  "background": {
    "service\_worker": "background.js"
  },
  "icons": {
    "16": "icons/icon16.png",
    "32": "icons/icon32.png",
    "48": "icons/icon48.png",
    "128": "icons/icon128.png"
  },
  "content\_security\_policy": {
    "extension\_pages": "script-src 'self'; object-src 'self';"
  },
  "web\_accessible\_resources": \[{ "resources": \["images/\*.png"\], "matches": \["https://\*/\*"\] }\]
}

popup.html

We have two options with the extension.

1. A button with record option to start recording all the HTTP requests

2. Link to view the history of HTTP Requests recorded

<!DOCTYPE html>
<html>
  <head>
    <title>API Request Recorder</title>

    <link rel="stylesheet" href="popup.css" />
  </head>
  <body>
    <div class="heading">
      <img class="logo" src="icons/icon48.png" />
      <h1>API Request Recorder</h1>
    </div>
    <button id="startStopRecord">Record</button>

    <div class="button-group">
      <a href="#" id="history">View Requests</a>
    </div>

    <script src="popup.js"></script>
  </body>
</html>

popup.js

Two event listeners are registered for recording (with start / stop) and viewing history.

First event is used to send a message to the background.js, while the second one instructs chrome to open the history page in new tab.

document.getElementById("startStopRecord").addEventListener("click", () => {
  chrome.runtime.sendMessage({ action: "startStopRecord" });
});

document.getElementById("history").addEventListener("click", () => {
  chrome.tabs.create({ url: chrome.runtime.getURL("/history.html") });
});

history.html

<!DOCTYPE html>
<html>
  <head>
    <title>History</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <h1>History Page</h1>
    <table>
      <thead>
        <tr>
          <th>Method</th>
          <th>URL</th>
          <th>Body</th>
        </tr>
      </thead>
      <tbody id="recorded-data-body">
        <!-- Data will be populated here -->
      </tbody>
    </table>
    <script src="history.js"></script>
  </body>
</html>

history.js

Requests background.js to “getRecordedData” and renders the result in the html format.

document.addEventListener("DOMContentLoaded", () => {
  chrome.runtime.sendMessage({ action: "getRecordedData" }, (response) => {
    const tableBody = document.getElementById("recorded-data-body");
    response.forEach((record) => {
      const row = document.createElement("tr");
      const urlCell = document.createElement("td");
      const methodCell = document.createElement("td");
      const bodyCell = document.createElement("td");

      urlCell.textContent = record.url;
      methodCell.textContent = record.method;
      bodyCell.textContent = record.body;

      row.appendChild(methodCell);
      row.appendChild(urlCell);
      row.appendChild(bodyCell);
      tableBody.appendChild(row);
    });
  });
});

background.js

Background JS works as a service worker for this extension, listening and handling events.

The background script does not have access to directly manipulate the user page content, but can post results back for the popup/history script to handle the cosmetic changes.

let isRecording = false;
let recordedDataList = \[\];

chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  console.log("Obtined message: ", message);
  if (message.action === "startStopRecord") {
    if (isRecording) {
      isRecording = false;
      console.log("Recording stopped...");
      sendResponse({ recorder: { status: "stopped" } });
    } else {
      isRecording = true;
      console.log("Recording started...");
      sendResponse({ recorder: { status: "started" } });
    }
  } else if (message.action === "getRecordedData") {
    sendResponse(recordedDataList);
  } else {
    console.log("Unhandled action ...");
  }
});

chrome.webRequest.onBeforeRequest.addListener(
  (details) => {
    if (isRecording) {
      let requestBody = "";
      if (details.requestBody) {
        if (details.requestBody.formData) {
          requestBody = JSON.stringify(details.requestBody.formData);
        } else if (details.requestBody.raw) {
          requestBody = new TextDecoder().decode(new Uint8Array(details.requestBody.raw\[0\].bytes));
        }
      }
      recordedDataList.push({
        url: details.url,
        method: details.method,
        body: requestBody,
      });
      console.log("Recorded Request:", {
        url: details.url,
        method: details.method,
        body: requestBody,
      });
    }
  },
  { urls: \[""\] },
  \["requestBody"\]
);

Lets load the Extension

All set, now lets load the extension and test it.

Open Chrome/Edge and go to chrome://extensions/ or edge://extensions/ based on your browser.
Enable “Developer mode” using the toggle in the top right corner.
Click “Load unpacked” and select the directory of your extension.

Your extension should now be loaded, and you can interact with it using the popup.
When you click the “Record” button, it will start logging API requests to the console.

Click the “Record” button again and hit the “View requests” link in the popup to view the history of APIs.

I have a sample page (https://itechgenie.com/demos/apitesting/index.html) with 4 API calls, which also loads images based on the API responses. You could see all the API requests that is fired from the page including the JS, CSS, Images and API calls.

Now its up to the developers imagination to build the extension to handle these APIs request and response data and give different experience.

Code is available in GitHub at HttpRequestViewer

Post originally shared at ITechGenie.com

DEV Community: Prakash

Open Source: A Friendly Guide for New Developers

Open Source: A Friendly Guide for New Developers

What is Open Source?

Open Source vs Free Software vs Commercial

A Brief History

Life-Changing Open Source Projects

Licenses and Their Nuances

How Commercial Support Adds Value

When Commercialization Causes Friction

How Developers Can Help Sustain Open Source

Getting Started — A Simple Roadmap

Conclusion

ITG DocVerse - A Developer Knowledge Platform Powered Entirely by Redis

What I Built

Demo

Screenshots

Main Dashboard & Content Feed

Content Creation & Management

AI-Powered Search & Discovery

Tag-Based Organization

User Engagement & Analytics

Redis Data Architecture in Action

How I Used Redis 8

🗄️ Redis as Primary Database

User Management with Hash Sets

Content Storage with JSON Documents

Indexing with Sorted Sets for Performance

🧠 AI-Powered Vector Search

Vector Embeddings Storage

The Search Pipeline

📊 Data Architecture in Redis

Redis Data Model Visualization

Data Flow for Search Operations

Redis Key Patterns Used

⚡ Performance Optimizations

1. Compound Queries with Pipeline

2. Smart Caching with Expiration

3. Memory-Efficient Vector Storage

🔄 Future Real-Time Features

The "Aha!" Moments

Technical Stack

What's Next?

Try It Yourself

OpenFGA Studio - An Open Source Authorization Modeling Interface

Understanding OpenFGA

Why This Project?

Key Features

1. Store Management

2. Visual Authorization Model Editor

3. Interactive Graph Visualization

4. Advanced Tuple Management

5. Conditional Relationship Support

6. Comprehensive Query Testing

7. Conditional Access Testing

8. Developer-Friendly Features

Technical Implementation

Common Use Cases

Conclusion

Enhancing the VS Code Agent Mode to integrate with Local tools using Model Context Protocol (MCP)

Building a Todo List Server with Model Context Protocol (MCP)

Table of Contents

The Evolution of AI-Assisted Development

GitHub Copilot and the Local Tools Gap

Agent Mode: Bridging the Gap

1. Build and Test Automation

2. Documentation and Release Management

3. Project Management Integration

4. Cross-Repository Operations

MCP: The New Standard for AI Tool Integration

What is Model Context Protocol (MCP)?

How MCP Tools Work

Architecture Overview

Prerequisites

Setting Up the Project

Implementing the MCP Server

1. Basic Server Setup

2. Database Configuration

3. Implementing Todo Tools

VS Code Integration