A Hands-on Guide to Model Context Protocol (MCP): From Server Setup to Oracle Autonomous Database 23ai and GitHub Integration #VibeCoding

Abstract

This article presents a comprehensive outline of the AI-powered website development process, highlighting the key technologies and methodologies involved. By leveraging Model Context Protocol [ #MCP ], AI agent integration, and #OracleAutonomousDatabase23ai, developers can create dynamic and functional websites with ease. The article guides readers through the process of generating static websites using AI code generators, creating AI-powered websites, and deploying auto-generated websites. Additionally, it covers user registration page integration, server-side configuration, application testing, and GitHub repository management. A demo video showcasing the entire process is also included. This resource aims to provide developers with a clear understanding of how to harness the power of AI in website development.

#VibeCoding refers to a new approach to software development where AI, particularly large language models (LLMs), are used to generate code, shifting the programmer's role to guiding, testing, and refining the AI-generated code.

Key Highlights of this article

• Model Context Protocol (MCP): Establish a foundation for AI-driven development
• AI Agent Integration: Leverage Cursor AI Agent, Tab, and Chat for enhanced functionality
• Oracle Autonomous Database 23ai: Harness the power of autonomous databases for seamless data management
• AI-Generated Static Website: Create your first static website using AI code generators
• AI-Powered Website Creation: Craft AI prompts to generate a fully functional website
• Auto-Generated Website Deployment: Run the AI-generated website and test its functionality
• User Registration Page: Add a user registration page to enhance user engagement
• Dynamic Website Development: Connect the website to Oracle Autonomous Database 23ai for dynamic functionality
• Server-Side Configuration: Update server.js code and upload database wallet for secure data management
• Application Testing: Test the application for user registration and ensure seamless functionality
• MCP Server Setup: Establish an MCP server for GitHub integration and streamlined development
• GitHub Repository Management: Search GitHub users, create repositories, and push files for version control
• Repository Visualization: View the GitHub repository for transparency and collaboration
• Demo Video: Watch a demo video showcasing the entire AI-powered website development process

01. Model Context Protocol (MCP): Establish a foundation for AI-driven development

MCP is an open protocol that standardizes how applications provide context to LLMs. Think of MCP like a USB-C port for AI applications. Just as USB-C provides a standardized way to connect your devices to various peripherals and accessories, MCP provides a standardized way to connect AI models to different data sources and tools.

More information on their official website

MCP Architecture

• MCP Hosts: Programs like Claude Desktop, IDEs, or AI tools that want to access data through MCP
• MCP Clients: Protocol clients that maintain 1:1 connections with servers
• MCP Servers: Lightweight programs that each expose specific capabilities through the standardized Model Context Protocol
• Local Data Sources: Your computer’s files, databases, and services that MCP servers can securely access
• Remote Services: External systems available over the internet (e.g., through APIs) that MCP servers can connect to

Note: Please check their terms and conditions on usage

02. AI Agent Integration: Leverage Cursor AI Agent, Tab, and Chat for enhanced functionality

Agent

Cursor’s agent mode can complete tasks end to end. It does this quickly, while keeping programmers in the loop. Try it out by selecting ‘agent’ in Composer.

Tab

Cursor includes a powerful autocomplete that predicts your next edit. Once enabled, it is always on and will suggest edits to your code across multiple lines, taking into account your recent changes.

Chat

Chat lets you talk with an AI that sees your codebase. The chat can always see your current file and cursor, so you can ask it things like: "Is there a bug here?". You can add particular blocks of code to the context with ⌘+Shift+L or "@." You can chat with your entire codebase with ⌘+Enter.

Download and Install Cursor AI application on your local machine

Note: Please check their terms and conditions on usage

More information on their website

03. Oracle Autonomous Database 23ai: Harness the power of autonomous databases for seamless data management

This article assumes that you have already installed Oracle Autonomous Database 23ai

This article assumes that you have already provisioned Oracle Autonomous Database 23ai. Please see the installation instructions on how to get this. Alternatively, You can also use the free version of Oracle Database 23ai   

Optional: Please check this video if you have not already installed Oracle Autonomous Database 23ai and created Database users.

04. AI-Generated Static Website: Create your first static website using AI code generators

Create a folder mywebsite (or any folder of your choice) on your local system and open it in Cursor AI. This uses VSCode IDE, so all the extensions will be available for this IDE.

Navigation Menu > File > Open Folder > mywebsite

On the right side, click on the top right Toggle AI pane icon. This will open a chat window.

lets start with this prompt input

hi how are you        

05. AI-Powered Website Creation: Craft AI prompts to generate a fully functional website

Let us create our first AI prompt to create our website. My prompt is shown below.

Please create a website with HTML, CSS, JS, and PNG or JPEG images, make the website a dark theme, and make the top navigation menu contain links to Healthcare, Finance, and Login pages. After navigation, there should be a banner image representing a bank and hospital. Below the banner image, there should be a customer testimonials section and a timeline chart of the company starting from the year 2000 to 2025. Please add fictitious data and customer testimonials to the timeline.         

This will now start generating code

In the left navigation we can see files getting generated by AI.

06. Auto-Generated Website Deployment: Run the AI-generated website and test its functionality

I have installed Live Server Plugin of VSCode, to run the html code

Please Note: HealthFin Solutions is a AI generated fictions name for our website .

Banner Section and Customer Testimonial Section

Scroll down to view Journey section

Footer Section

Healthcare Page

Finance Page

Login Page

07. User Registration Page: Add a user registration page to enhance user engagement

AI Prompt

Add user registration page to this website, where the user needs to provide input parameters such as email id, full name, password, confirm password and an answer to forgot password question. Validate that the password is same as confirm password. Add this new page to the top navigation menu of the website.          

Result:

08. Dynamic Website Development: Connect the website to Oracle Autonomous Database 23ai for dynamic functionality

lets now run another prompt to connect with Autonomous Database

Add user registration page to this website, where the user needs to provide input parameters such as email id, full name, password, confirm password and an answer to forgot password question. Validate that the password is same as confirm password. Add this new page to the top navigation menu of the website.          

AI now says, update config.js

const dbConfig = {
    connectString: "YOUR_ORACLE_CONNECTION_STRING",
    user: "YOUR_DATABASE_USERNAME",
    password: "YOUR_DATABASE_PASSWORD"
};        

Install dependencies

npm install        

it also gave create table script

CREATE TABLE APPUSERS (
    EMAIL VARCHAR2(255) PRIMARY KEY,
    PASSWORD VARCHAR2(255) NOT NULL,
    SECURITY_QUESTION VARCHAR2(255) NOT NULL,
    SECURITY_ANSWER VARCHAR2(255) NOT NULL,
    CREATED_AT TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);        

To create table you can login to Oracle APEX or SQL Developer VSCode extension or SQL Worksheet of Oracle Autonomous Database 23ai

I assume that Database User has already been created and has required roles and privileges to create table or insert records.

Open the terminal and install the required npm packages

npm install        

This will create node_modules folder

Start Server

npm start        

09. Server-Side Configuration: Update server.js code and upload database wallet for secure data management

Upload the extracted wallet file into the root directory as shown below

Lets make some minor changes to the generated server.js as shown below,

Download server.js (updated version)

Few Imports and Create Oracle Database 23ai Connection

import express from "express";
import oracledb from "oracledb";
import cors from "cors";

const app = express();
app.use(cors());
app.use(express.json());

app.post("/api/register", async (req, res) => {
  let connection;
  try {
    //Establish DB Server Connection

    connection = await oracledb.getConnection({
      user: "<database-username>",
      password: "<database-password>",
      connectString:
        "(description= (retry_count=20)(retry_delay=3)(address=(protocol=tcps)(port=1522)(host=adb.us-phoenix-1.oraclecloud.com))(connect_data=(service_name=something_dbname_medium.adb.oraclecloud.com))(security=(ssl_server_dn_match=yes)))",
      walletLocation: "/yourfolder/mywebsite/wallet",
      walletPassword: "welcome1",
    });        

Run Insert Query

const sql =
      "INSERT INTO APPUSERS (EMAIL, PASSWORD, SECURITY_QUESTION, SECURITY_ANSWER) VALUES (:email, :password, :securityQuestion, :securityAnswer)";

    const binds = {
      email: req.body.email,
      password: req.body.password,
      securityQuestion: req.body.securityQuestion,
      securityAnswer: req.body.securityAnswer,
    };

    const result = await connection.execute(sql, binds);
    res.json({
      message: "Data inserted successfully",
      rowsAffected: result.rowsAffected,
    });
    console.log("Rows inserted:", result.rowsAffected);
    await connection.commit();        

Close Connection

// await connection.close();
  } catch (err) {
    console.error(err);
    res.status(500).json({ error: "Failed to insert data" });
  } finally {
    await connection.close();
  }
});

app.listen(3000, () => {
  console.log("Server listening on port 3000");
});        

Start the npm server at port 3000

10. Application Testing: Test the application for user registration and ensure seamless functionality

Click on Create Account Button and verify the database table

We have successfully inserted user registration record.

Please Note: To update this table to encrypt passwords in database table.

11. MCP Server Setup: Establish an MCP server for GitHub integration and streamlined development

There are several MCP servers, which can be found here

Our purpose is to just to upload our code to GitHub, so we will check this directory.

The code to add this server is as shown below

{
  "mcpServers": {
    "github": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-github"
      ],
      "env": {
        "GITHUB_PERSONAL_ACCESS_TOKEN": "<YOUR_TOKEN>"
      }
    }
  }
}        

Create GitHub personal access token, please refer this article

Once you have your access token you will see the following message

If the Authorisation is success, then you should be able to push files to GitHub

Create MCP Server

Click on settings or wheel icon at extreme top right of your IDE and click on MCP menu and add server

Your MCP JSON file will look as shown below.

{
  "mcpServers": {
    "github": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-github"],
      "env": {
        "GITHUB_PERSONAL_ACCESS_TOKEN": "YourGitHubAccessCode"
      }
    }
  }
}        

Once this file is created, then we should see this under MCP servers

12. GitHub Repository Management: Search GitHub users, create repositories, and push files for version control

AI prompt on chat:

search user madhusudhanrao-ppm on github        

AI Prompt:

Create a new GitHub repo for this project by name mywebsite, push all the files in this project to this new repo.        

This has created a repository as shown below

AI Prompt:

please ignore node_modules folder, do not upload it to github        

Pushing files individually, AI Prompt

push finance.html file to repo         

Pushing files in bulk on GitHub, AI Prompt

please add all the pages in my local folder to github repo        

13. Repository Visualization: View the GitHub repository for transparency and collaboration

14. Demo Video: Watch a demo video showcasing the entire AI-powered website development process

Thanks for reading, liking and sharing this article

Regards, Madhusudhan Rao

More Information Links

Oracle Autonomous Database 23ai

Model Context Protocol official website

Developing NodeJs application with Oracle Autonomous Database

Cursor AI