DEV Community: balaji thadagam kandavel

Step-by-Step Guide: Setting Up MCP Locally with LLMs Using TypeScript

balaji thadagam kandavel — Sat, 08 Mar 2025 07:46:02 +0000

Introduction

In this tutorial, we will walk through the step-by-step process of setting up Model Context Protocol (MCP) locally and integrating it with Large Language Models (LLMs) using TypeScript. MCP provides a structured way to expose API metadata, making it easier for LLMs to interact with API specifications dynamically.

By following this guide, you will:

Install and configure MCP locally.
Set up an MCP server to expose API specifications.
Use an LLM to modify API specifications.
Interact with MCP using an MCP client.

Let's get started!

Prerequisites

Before proceeding, ensure you have the following installed:

Node.js (16.x or later)
TypeScript (npm install -g typescript)
MCP SDK (npm install @modelcontextprotocol/sdk)
An OpenAI-compatible LLM SDK (e.g., npm install openai)

Step 1: Setting Up an MCP Server Locally

The MCP server will serve as a centralized repository for API specifications, which the LLM can modify.

Create a new project and install dependencies

mkdir mcp-llm-api
cd mcp-llm-api
npm init -y
npm install @modelcontextprotocol/sdk zod openai typescript @types/node

Initialize an MCP server in TypeScript

Create a file server.ts and add the following code:

import { McpServer } from "@modelcontextprotocol/sdk/server/mcp";
import { z } from "zod";

const server = new McpServer({ name: "LocalMCPServer", version: "1.0.0" });

let apiSpec = { "openapi": "3.0.0", "info": { "title": "Sample API", "version": "1.0.0" }, "paths": {} };

server.resource("api-spec", "api://spec", async () => ({
  contents: [{ text: JSON.stringify(apiSpec) }]
}));

server.listen(4000, () => console.log("MCP server running on port 4000"));

Compile and run the server: tsc server.ts && node server.js

Your MCP server is now running locally, exposing API specifications at http://localhost:4000.

Step 2: Adding LLM-Assisted API Updates

Next, we'll allow an LLM to propose updates to the API specification based on developer requests.

Install an LLM SDK npm install openai dotenv

Modify the MCP server to include an update tool

Edit server.ts to include an LLM-powered update tool:

import { OpenAI } from "openai";
import dotenv from "dotenv";

dotenv.config();

const openai = new OpenAI({ apiKey: process.env.OPENAI_API_KEY });

server.tool(
  "propose_update",
  { request: z.string() },
  async ({ request }) => {
    const prompt = `Modify the following OpenAPI spec based on this request: "${request}"\n${JSON.stringify(apiSpec)}`;
    const llmResponse = await openai.completions.create({
      model: "gpt-4",
      prompt,
      max_tokens: 500,
    });

    apiSpec = JSON.parse(llmResponse.choices[0].text.trim());
    return { content: [{ type: "text", text: JSON.stringify(apiSpec) }] };
  }
);

Ensure you have an OpenAI API key stored in a .env file:

OPENAI_API_KEY=your_openai_api_key_here
Restart the server for changes to take effect:
tsc server.ts && node server.js

Step 3: Setting Up an MCP Client to Interact with the Server

Now, let's create an MCP client to retrieve and update API specifications.

Create a client script

Create a file client.ts and add:

import { Client, HttpClientTransport } from "@modelcontextprotocol/sdk/client";

const client = new Client({ name: "LocalMCPClient", version: "1.0.0" });
await client.connect(new HttpClientTransport("http://localhost:4000"));

const currentSpec = await client.readResource("api://spec");
console.log("Current API Spec:", currentSpec?.contents[0]?.text);

const changeRequest = "Add a GET /reports endpoint for user reports by date range.";
const toolResult = await client.callTool({ name: "propose_update", arguments: { request: changeRequest } });
console.log("Updated API Spec:", toolResult.content[0].text);

Compile and run the client: tsc client.ts && node client.js

The client retrieves the current API spec, submits a change request, and receives the updated API specification from the LLM.

Step 4: Testing and Validating API Updates

Now that the MCP setup is complete, we need to ensure updates are handled correctly.

Testing Steps

Start the MCP server: tsc server.ts && node server.js

Run the client script: tsc client.ts && node client.js

Verify that the API specification is modified as expected.

If needed, restart the server and rerun the client with different API modifications.

Step 5: Automating API Updates with CI/CD

To fully leverage MCP, API updates can be integrated into CI/CD pipelines.

Example: Adding API Changes in a GitHub Action

name: MCP API Update
on:
  push:
    branches:
      - main
jobs:
  update-api:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout Repo
        uses: actions/checkout@v2
      - name: Install Dependencies
        run: npm install
      - name: Run MCP Client to Update API
        run: tsc client.ts && node client.js

This ensures API specifications remain up-to-date as changes are pushed.

Conclusion

By setting up MCP locally with LLMs, we:
✔ Installed and configured an MCP server.
✔ Exposed an API specification as an MCP resource.
✔ Allowed an LLM to propose API updates dynamically.
✔ Created an MCP client to interact with the server.
✔ Automated API updates within CI/CD pipelines.

With this setup, API modifications become faster, automated, and AI-assisted, eliminating manual version tracking and ensuring consistent documentation updates.

Start integrating MCP + LLMs today to revolutionize your API development process!

Building Websites with Cursor and AWS.

balaji thadagam kandavel — Sun, 05 Jan 2025 20:33:38 +0000

In this fast-moving world, where everything seems to move very fast, website creation and deployment may seem frighteningly daunting. Most conventional means involve a hell of a lot of coding and similarly overwhelming infrastructure management. But large language models, combined with innovative tools like Cursor, are changing the way applications are developed.

Cursor is going to be a game-changing IDE in the creation and deployment of applications at speeds not fathomable by man. It makes use of a tight integration with LLMs such as Gemini that will have your ideas directly translated into functional code, automating most of the big, annoying steps in web development.

This article will walk you through a simplified build-and-deploy process of a simple website using Cursor and AWS while looking at human-oriented approaches for website development with an LLM as collaborator. We are going to see how Gemini creates a starting scaffold, perform some infrastructure creations on AWS using AWS CDK, and finish uploading our website onto Amazon S3.

How Cursor Works with LLMs

At its core, Cursor is an intelligent bridge between your creative vision and the code that delivers that vision. The simplified breakdown goes this way:

Natural Language Input: You provide Cursor with your desired website functionality or features in the form of plain, human-understandable language. An example could be,

_ "Create a simple landing page with a hero section, an about us section, and a contact form."_

LLM-Powered Code Generation: The magic of Cursor brings together the power of LLMs, such as Gemini, to translate your natural language instructions into real code. Think HTML, CSS, JavaScript, and any backend code that may be required.

Automation of Deployment: Cursor provides the deployment of the generated code on the cloud provider chosen by you- AWS. It manages the complexities in infrastructure provisioning for a smooth and seamless deployment.

Creating Your Template:

Define Your Website's Core Elements: First of all, outline the very important parts that must be present on your website. Consider these:
Structure of the homepage: hero banner, about us, services, contact.
Type of content: blog posts, product pages, landing pages.
Design considerations: color scheme, typography, general aesthetics.
Create the Template Using Gemini: With the use of Gemini, create a basic HTML, CSS, and JavaScript template that suits your desired structure and design. For this, one can give various prompts to drive the generation using Gemini. For example:

"I want to make a website for my portfolio/profile. I have cursor/AI assistant. Get me a template to ask AI to do this in aws with automation of deployment.”

This above prompt will instruct LLM(ChatGPT, Gemini etc..) to produce a template which must include considerations for SEO, JSON-LD, and other relevant aspects.
Refine and Customize: Review the generated template and make any necessary adjustments. This might involve fine-tuning the styling, adding specific features, or integrating third-party libraries.

Example Template that got created:

`Subject: Create Website for My Personal Portfolio

Dear Cursor,

I would like to create a website for my personal portfolio/profile. Please help me with the following:

Website Structure & Content:

Homepage:
Introduce myself with a brief bio and professional summary.
Showcase a curated selection of my best projects (with images/videos and brief descriptions).
Include a "Contact" section with an email form and links to my social media profiles.
About Me:
Expand on my professional background, education, and skills.
Include a personal touch to make it more engaging (e.g., hobbies, interests).
Projects:
Detailed descriptions of each project, including:
Project name, date, and role.
Technologies used.
Project goals and challenges.
Links to live projects or case studies.
Contact:
Contact form (name, email, message).
Links to social media profiles (LinkedIn, GitHub, Twitter, etc.).
Blog (optional):
Share insights, thoughts, and experiences related to my field.

Technical Implementation:

Choose a suitable platform:
Static site generators: (e.g., Jekyll, Hugo, Gatsby) for performance and flexibility.
Design and Development:
Design: Create a clean and professional design using CSS and a CSS framework (e.g., Bootstrap, Tailwind CSS).
Development: Implement the website using HTML, CSS, and JavaScript.
Hosting: Choose a reliable web hosting provider (e.g., Netlify, Vercel, GitHub Pages).

Other Considerations:

Mobile responsiveness: Ensure the website looks great on all devices (desktops, tablets, and smartphones).
Accessibility: Make the website accessible to users with disabilities (e.g., screen reader compatibility).
Performance optimization: Minimize page load times by optimizing images and using a Content Delivery Network (CDN).
Security: Implement basic security measures to protect my website from threats.
Also create a new CDK project.
Please provide me with:

A step-by-step guide or a project plan to help me organize the website creation process.
Recommendations for tools and resources that can assist me with website development, SEO, and JSON-LD implementation.
Thank you for your assistance.
`

Developing with AI assistant is about providing right instructions.

Download cursor and if you are a developer pro version will help you a lot.

Set Development Guidelines: You can add custom instructions for Cursor's AI in the Cursor Settings > General > Rules for AI. These will help inform its behavior across features like Chat and ⌘ K, including but not limited to coding style preferences, indentation, naming conventions, preferred libraries or frameworks, security best practices, and considerations about accessibility.
Context with the Necessary Files: After having the code being generated for the first time, relevant files can then be uploaded into the Cursor project to provide context. Given this, the AI context is much enhanced and can be able to let out much more accurate and relevant code suggestions.

Provide the whole template in the cursor composer.

Continue to chat with composer and ask it to run the app locally, to deploy to AWS.

To further refine the code generation process and build in alignment with your project, you can use Cursor settings to:

Accuracy of Template Generation: The quality of the generated template depends a lot on how clear and specific your prompts are to Gemini. Experiment with different prompts, refine them iteratively to get the desired output.
Infrastructure Complexity: If your website requires more complex infrastructure, such as databases or serverless functions, the CDK code may also be more complex. Consider breaking down the infrastructure into smaller, independent modules.
Debugging and Troubleshooting: Even with Cursor simplifying a lot of the development, chances are that something might go wrong during the deployment or at runtime. Utilize AWS CloudWatch logs along with debugging tools to identify and fix problems.
Conclusion

This tutorial will give you the foundation to do it yourself to build websites that might just change everything for modern web development.

Serverless Computing and GraphQL: Modern App Development

balaji thadagam kandavel — Tue, 01 Oct 2024 01:27:45 +0000

In this article, I walk you through, creating a serverless GraphQL API using TypeScript, AWS Lambda, and Apollo Server.

Serverless computing:

It is a cloud-computing execution model where cloud providers automatically manage the infrastructure for running applications. In this model, developers write code, and the cloud provider takes care of running, scaling, and maintaining the servers, meaning developers don't need to worry about server management, infrastructure provisioning, or scaling. The term "serverless" doesn't mean that there are no servers involved, but rather that the server management tasks are abstracted away from developers. AWS Lambda is a serverless compute service provided by Amazon Web Services (AWS) that allows you to run code without provisioning or managing servers

GraphQL:

It is a query language for APIs and a runtime for executing those queries. It allows clients to request exactly the data they need, making it more efficient compared to REST, which may over-fetch or under-fetch data. With GraphQL, clients specify the shape and structure of the response, retrieving multiple resources in a single request. This flexibility improves performance and reduces network overhead. GraphQL is strongly typed, with a schema defining available types and operations. It’s widely used in modern applications to optimize communication between the frontend and backend, enabling more responsive and efficient data management.

Apollo Server:

It is a popular, open-source GraphQL server that helps developers create a GraphQL API with ease. It simplifies the process of building a robust and scalable GraphQL API by handling schema definition, query execution, and response formatting. Apollo Server supports features like data fetching, caching, and authentication, making it highly adaptable for modern applications. It works seamlessly with various data sources, including REST APIs, databases, and microservices. With built-in tools for performance monitoring and error handling, Apollo Server is commonly used to streamline backend development, providing efficient and flexible communication between clients and servers in GraphQL environments.

Why TypeScript?

It is a superset of JavaScript that adds static typing to the language. It helps catch errors during development, improves code readability, and enhances refactoring. By providing type safety and tooling support, TypeScript enables more maintainable and scalable applications, making it ideal for large projects or teams.

Why I find Serverless and GraphQL to Work So Well Together (or: A Love Story in Code)

Optimized Resource Usage: GraphQL's precise data fetching aligns perfectly with serverless' pay-per-use model, ensuring efficient resource utilization.
Simplified Backend: Serverless functions can handle GraphQL resolvers efficiently, streamlining the backend architecture.
Improved Performance: GraphQL's ability to reduce data overhead translates to faster applications, especially when combined with serverless architecture.
Scalability: Both technologies excel at handling varying loads, making the combination highly scalable.
Cost-Effective: The pay-as-you-go model of serverless computing, coupled with GraphQL's efficient data transfer, can lead to significant cost savings.

Below are the step by step guide to deploy a service with graphQL in AWS lambda.

1.Initialize a new TypeScript project and install dependencies

``
mkdir serverless-graphql-api

cd serverless-graphql-api

npm init -y

npm install typescript @types/node --save-dev

npx tsc --init

npm install apollo-server-lambda graphql @types/aws-lambda

npm install --save-dev serverless-offline
``

2.Define the GraphQL Schema with the necessary elements.

``
import { gql } from 'apollo-server-lambda';

export const typeDefs = gql`
type Query {
auto: String
}

type Mutation {
sayAuto(name: String!): String
}
;`

3.Implementing Resolvers

export const resolvers = {
  Query: {
    auto: () => 'Hello from serverless GraphQL!',
  },
  Mutation: {
    sayAuto: (_: any, { name }: { name: string }) => `Hello, ${name}!`,
  },
};

4.Creating the Lambda Handler

import { ApolloServer } from 'apollo-server-lambda';
import { typeDefs } from './schema';
import { resolvers } from './resolvers';

const server = new ApolloServer({
typeDefs,
resolvers,
});
export const graphqlHandler = server.createHandler();

You can write the code directly to lambda in AWS(Quick hello world) and use proper deploy options like CDK or terraform. As both serverless computing and GraphQL continue to evolve, we can expect even more powerful tools and practices to emerge.

By embracing serverless GraphQL, developers can create APIs that scale effortlessly and deliver precisely what clients need. It's like having a crystal ball that always knows exactly what data to fetch and scale.