NisalG/node-mcp-server-laravel-mcp-client-react-frontend-ai-app

mkdir mcp-server  
cd mcp-server  
npm init -y  
npm install express axios cors dotenv typescript @types/express @types/cors @types/node  
npx tsc --init

mkdir src  
touch src/server.ts .env tsconfig.json

{  
  "compilerOptions": {  
    "target": "es6",  
    "module": "commonjs",  
    "outDir": "./dist",  
    "rootDir": "./src",  
    "strict": true,  
    "esModuleInterop": true,  
    "skipLibCheck": true  
  }  
}

CHATGPT_API_KEY=your_openai_api_key  
DEEPSEEK_API_KEY=your_deepseek_api_key  
GEMINI_API_KEY=your_gemini_api_key  
GROQ_API_KEY=your_gemini_api_key  
AI_PROVIDER=groq # or "openai" / "gemini" / "deepseek"  
PORT=3001

"scripts": {  
  "start": "tsc && node dist/server.js",  
  "dev": "ts-node-dev src/server.ts"  
}

import express from 'express';
import axios from 'axios';
import cors from 'cors';
import dotenv from 'dotenv';

dotenv.config(); // Load environment variables from .env
const app = express();
app.use(cors()); // Enable CORS for all routes
app.use(express.json()); // Parse JSON request bodies

const PORT = process.env.PORT || 3001; // Server port
const defaultProvider = process.env.AI_PROVIDER || 'groq'; // Default AI provider

/**
 * callAI - Sends a prompt to the selected AI provider and returns the response.
 *
 * model:        The AI model to use (e.g., 'meta-llama/llama-4-scout-17b-16e-instruct' for Groq, 'gpt-4' for OpenAI).
 * systemPrompt: An optional string that sets the context or instructions for the AI (sent as a message with role 'system').
 * role:         The role of the message sender, either 'system' (for instructions/context) or 'user' (for the main prompt).
 * content:      The actual text content of each message, either the systemPrompt or userPrompt.
 * temperature:  Controls randomness/creativity of the AI output (higher = more random, lower = more focused).
 */
const callAI = async (provider: string, systemPrompt: string, userPrompt: string) => {
  console.log(`[callAI] provider: ${provider}`);
  console.log(`[callAI] systemPrompt: ${systemPrompt}`);
  console.log(`[callAI] userPrompt: ${userPrompt}`);

  if (provider === 'groq') {
    try {
      console.log('[callAI] Sending request to Groq...');
      const res = await axios.post(
        'https://api.groq.com/openai/v1/chat/completions', // Groq API endpoint
        {
          model: 'meta-llama/llama-4-scout-17b-16e-instruct', // Groq model
          messages: [
            ...(systemPrompt ? [{ role: 'system', content: systemPrompt }] : []), // Add system prompt if present
            { role: 'user', content: userPrompt } // User prompt
          ],
          temperature: 0.7 // Sampling temperature
        },
        {
          headers: {
            Authorization: `Bearer ${process.env.GROQ_API_KEY}`, // Groq API key from .env
            'Content-Type': 'application/json'
          }
        }
      );
      console.log('[callAI] Groq response:', res.data);
      return res.data.choices?.[0]?.message?.content; // Return AI response content
    } catch (err: any) {
      console.error('[callAI] Groq error:', err?.response?.data || err);
      throw err;
    }
  }

  if (provider === 'openai') {
    try {
      console.log('[callAI] Sending request to OpenAI...');
      const res = await axios.post(
        'https://api.openai.com/v1/chat/completions', // OpenAI API endpoint
        {
          model: 'gpt-4', // OpenAI model
          messages: [
            ...(systemPrompt ? [{ role: 'system', content: systemPrompt }] : []),
            { role: 'user', content: userPrompt }
          ],
          temperature: 0.7
        },
        {
          headers: {
            Authorization: `Bearer ${process.env.CHATGPT_API_KEY}`, // OpenAI API key from .env
            'Content-Type': 'application/json'
          }
        }
      );
      console.log('[callAI] OpenAI response:', res.data);
      return res.data.choices?.[0]?.message?.content;
    } catch (err) {
      console.error('[callAI] OpenAI error:', err);
      throw err;
    }
  }

  if (provider === 'deepseek') {
    try {
      console.log('[callAI] Sending request to DeepSeek...');
      const res = await axios.post(
        'https://api.deepseek.com/v1/chat/completions', // DeepSeek API endpoint
        {
          model: 'deepseek-chat', // DeepSeek model
          messages: [
            ...(systemPrompt ? [{ role: 'system', content: systemPrompt }] : []),
            { role: 'user', content: userPrompt }
          ],
          temperature: 0.7
        },
        {
          headers: {
            Authorization: `Bearer ${process.env.DEEPSEEK_API_KEY}`, // DeepSeek API key from .env
            'Content-Type': 'application/json'
          }
        }
      );
      console.log('[callAI] DeepSeek response:', res.data);
      return res.data.choices?.[0]?.message?.content;
    } catch (err: any) {
      console.error('[callAI] DeepSeek error:', err?.response?.data || err);
      throw err;
    }
  }

  if (provider === 'gemini') {
    try {
      const fullPrompt = systemPrompt
        ? `${systemPrompt}\n\n${userPrompt}`
        : userPrompt;
      console.log('[callAI] Sending request to Gemini...');
      const res = await axios.post(
        `https://generativelanguage.googleapis.com/v1beta/models/gemini-pro:generateContent?key=${process.env.GEMINI_API_KEY}`, // Gemini API endpoint
        {
          contents: [{ parts: [{ text: fullPrompt }] }]
        },
        {
          headers: { 'Content-Type': 'application/json' }
        }
      );
      console.log('[callAI] Gemini response:', res.data);
      return res.data.candidates?.[0]?.content?.parts?.[0]?.text || ''; // Return Gemini response content
    } catch (err: any) {
      console.error('[callAI] Gemini error:', err?.response?.data || err);
      throw err;
    }
  }

  throw new Error('Unsupported provider'); // If provider is not recognized
};

// --- /mcp/text-enhancement ---
app.post('/mcp/text-enhancement', async (req, res) => {
  const { text, provider = defaultProvider } = req.body; // Get text and provider from request
  console.log('[POST /mcp/text-enhancement] provider:', provider, 'text:', text);

  try {
    const systemPrompt =
      'Enhance this business proposal text to be more professional and compelling. Keep the original meaning but improve clarity and impact.'; // System prompt for enhancement
    const result = await callAI(provider, systemPrompt, text); // Call AI provider

    res.json({ success: true, enhancedText: result }); // Send enhanced text to client
  } catch (err: any) {
    console.error('[POST /mcp/text-enhancement] Error:', err?.response?.data || err);
    res.status(500).json({ success: false, error: 'Failed to enhance text' }); // Error response
  }
});

// --- /mcp/generate-html ---
app.post('/mcp/generate-html', async (req, res) => {
  const { proposal, provider = defaultProvider } = req.body; // Get proposal and provider from request
  console.log('[POST /mcp/generate-html] provider:', provider, 'proposal:', proposal);

  try {
    const systemPrompt = `Generate a professional HTML template for a business proposal. Use this JSON data: ${JSON.stringify(proposal)}`; // System prompt for HTML generation
    const result = await callAI(provider, systemPrompt, ''); // Call AI provider

    res.json({ success: true, html: result }); // Send generated HTML to client
  } catch (err: any) {
    console.error('[POST /mcp/generate-html] Error:', err?.response?.data || err);
    res.status(500).json({ success: false, error: 'Failed to generate HTML' }); // Error response
  }
});

app.listen(PORT, () => {
  console.log(`✅ MCP server running on http://localhost:${PORT}`); // Server started
});

cd business-proposal-app/mcp-server  
npm install  
npm run dev  

APP_NAME=Laravel  
APP_URL=http://localhost:8000

DB_CONNECTION=mysql  
DB_HOST=127.0.0.1  
DB_PORT=3306  
DB_DATABASE=business_proposals  
DB_USERNAME=root  
DB_PASSWORD=

MCP_SERVER_URL=http://localhost:3001  
MCP_PROVIDER=deepseek

composer create-project laravel/laravel laravel-api  
cd laravel-api

composer require guzzlehttp/guzzle

composer install

php artisan key:generate  
php artisan config:cache

php artisan make:controller BusinessProposalController --api  
php artisan make:model BusinessProposal -m (Migration file will be created with the ‘m’ flag)

public function up()  
{  
    Schema::create('business_proposals', function (Blueprint $table)   
    {  
        $table->id();  
        $table->string('title');  
        $table->text('original_text');  
        $table->text('enhanced_text');  
        $table->string('status')->default('draft');  
        $table->timestamps();  
    });    
}

php artisan migrate

<?php

use Illuminate\Support\Facades\Route;  
use App\Http\Controllers\BusinessProposalController;

Route::middleware('api')->group(function () {  
    Route::post('/business-proposals', [BusinessProposalController::class, 'createBusinessProposal']);  
    Route::get('/business-proposals/{id}/preview', [BusinessProposalController::class, 'showBusinessProposal']);  
});

->withRouting(  
    web: __DIR__.'/../routes/web.php',  
    api: __DIR__.'/../routes/api.php',  
    commands: __DIR__.'/../routes/console.php',  
    health: '/up',  
)

'mcp' => [  
    'server' => env('MCP_SERVER_URL', 'http://localhost:3001'),  
    'provider' => env('MCP_PROVIDER', 'deepseek'),  
],

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;  
use Illuminate\Database\Eloquent\Model;

class BusinessProposal extends Model  
{  
    use HasFactory;

    protected $fillable = [  
        'title',  
        'original_text',  
        'enhanced_text',  
        'status',  
    ];  
}

<?php

namespace App\Services;

use Illuminate\Support\Facades\Http;

class McpClient  
{  
    protected string $mcpServerUrl;  
    protected string $defaultProvider;

    public function __construct()  
    {  
        $this->mcpServerUrl = config('services.mcp.server'); // MCP server URL from config  
        $this->defaultProvider = config('services.mcp.provider', 'groq'); // Default to 'groq' if not set  
    }

    public function enhanceText(string $text, ?string $provider = null): string  
    {  
        $response = Http::post("{$this->mcpServerUrl}/mcp/text-enhancement", [ // Call MCP server for text enhancement  
            'text' => $text, // Proposal text to enhance  
            'provider' => $provider ?? $this->defaultProvider, // Use given provider or default  
        ]);  

        return $response->json('enhancedText') ?? $text; // If no enhancement is available, return the original text  
    }

    public function generateHtml(array $proposalData, ?string $provider = null): string  
    {  
        $response = Http::post("{$this->mcpServerUrl}/mcp/generate-html", [ // Call MCP server to generate HTML  
            'proposal' => $proposalData, // Proposal data to send  
            'provider' => $provider ?? $this->defaultProvider, // Use given provider or default  
        ]);

        return $response->json('html') ?? ''; // Return generated HTML or empty  
    }  
}

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;  
use App\Services\McpClient;  
use App\Models\BusinessProposal;

class BusinessProposalController extends Controller  
{  
    protected McpClient $mcpClient;  
    public function __construct(McpClient $mcpClient)  
    {  
        $this->mcpClient = $mcpClient; // Inject MCP client for AI calls  
    }

    public function createBusinessProposal(Request $request)  
    {  
        $validated = $request->validate([  
            'text' => 'required|string', // Validate proposal text  
            'title' => 'required|string', // Validate proposal title  
        ]);  
          
        $enhancedText = $this->mcpClient->enhanceText($validated['text']); // Enhance text using MCP/AI  
          
        $proposal = BusinessProposal::create([  
            'title' => $validated['title'], // Store title  
            'original_text' => $validated['text'], // Store original text  
            'enhanced_text' => $enhancedText, // Store enhanced text  
            'status' => 'draft' // Set status as draft  
        ]);  
          
        return response()->json($proposal, 201); // Return created proposal as JSON  
    }

    public function showBusinessProposal($id)  
    {  
        $proposal = BusinessProposal::findOrFail($id); // Find proposal or fail  
          
        $html = $this->mcpClient->generateHtml([  
            'title' => $proposal->title, // Pass title to HTML generator  
            'content' => $proposal->enhanced_text, // Pass enhanced text  
            'created_at' => $proposal->created_at->format('Y-m-d') // Pass creation date  
        ]);  
          
        return response($html)->header('Content-Type', 'text/html'); // Return HTML response  
    }  
}

php artisan serve | php artisan serve --port=8000

npx create-react-app react-frontend --template typescript  
cd react-frontend  
npm install axios

mkdir src/components  
touch src/components/BusinessProposal.tsx

import { useState } from 'react';  
import axios from 'axios';

const BusinessProposal = () => {  
  const [formData, setFormData] = useState({  
    title: 'Proposal for a web site development', // Default title  
    text: 'Create me a business proposal for a web site development like Temu. Include about a matching tech stack as well.', // Default proposal text  
    provider: 'groq', // Default provider  
  });  
  const [proposal, setProposal] = useState<any>(null); // Holds the created proposal  
  const [htmlPreview, setHtmlPreview] = useState(''); // Holds the HTML preview  
  const [loading, setLoading] = useState(false); // Loading state

  const handleSubmit = async (e: React.FormEvent) => {  
    e.preventDefault(); // Prevent default form submission  
    setLoading(true); // Set loading state

    try {  
      const response = await axios.post(  
        `${process.env.REACT_APP_LARAVEL_API_BASE_URL}/api/business-proposals`, // API endpoint for creating proposal  
        {  
          title: formData.title,  
          text: formData.text,  
          provider: formData.provider,  
        }  
      );  
      setProposal(response.data); // Save proposal response  
    } catch (error) {  
      console.error('Error creating proposal:', error); // Log error  
    } finally {  
      setLoading(false); // Reset loading state  
    }  
  };

  const handlePreview = async () => {  
    if (!proposal) return; // Do nothing if no proposal

    setLoading(true); // Set loading state  
    try {  
      const response = await axios.get(  
        `${process.env.REACT_APP_LARAVEL_API_BASE_URL}/api/business-proposals/${proposal.id}/preview`, // API endpoint for HTML preview  
        { params: { provider: formData.provider } }  
      );  
      setHtmlPreview(response.data); // Save HTML preview  
    } catch (error) {  
      console.error('Error fetching preview:', error); // Log error  
    } finally {  
      setLoading(false); // Reset loading state  
    }  
  };

  return (  
    <div className="proposal-container">  
      <h1>Business Proposal Generator</h1>

      <form onSubmit={handleSubmit}>  
        <div>  
          <label>Title:</label>  
          <input  
            type="text"  
            value={formData.title}  
            onChange={(e) => setFormData({ ...formData, title: e.target.value })} // Update title  
            required  
          />  
        </div>

        <div>  
          <label>Proposal Text:</label>  
          <textarea  
            value={formData.text}  
            onChange={(e) => setFormData({ ...formData, text: e.target.value })} // Update text  
            required  
            rows={10}  
          />  
        </div>

        <div>  
          <label>AI Provider:</label>  
          <select  
            value={formData.provider}  
            onChange={(e) => setFormData({ ...formData, provider: e.target.value })} // Update provider  
          >  
            <option value="groq">Groq</option>  
            <option value="openai">OpenAI</option>  
            <option value="deepseek">DeepSeek</option>  
            <option value="gemini">Gemini</option>  
          </select>  
        </div>

        <button type="submit" disabled={loading}>  
          {loading ? 'Processing...' : 'Create Proposal'} {/* Button text changes on loading */}  
        </button>  
      </form>

      {proposal && (  
        <div className="proposal-actions">  
          <button onClick={handlePreview} disabled={loading}>  
            {loading ? 'Generating...' : 'Preview HTML'} {/* Button text changes on loading */}  
          </button>

          {htmlPreview && (  
            <div className="preview-container">  
              <h2>HTML Preview</h2>  
              <div dangerouslySetInnerHTML={{ __html: htmlPreview }} /> {/* Render HTML preview */}  
            </div>  
          )}  
        </div>  
      )}  
    </div>  
  );  
};

export default BusinessProposal;

import React from 'react';  
import ReactDOM from 'react-dom/client';  
import { BrowserRouter } from 'react-router-dom';  
import App from './App';

ReactDOM.createRoot(document.getElementById('root')!).render(  
  <React.StrictMode>  
    <BrowserRouter>  
      <App />  
    </BrowserRouter>  
  </React.StrictMode>  
);

import { Routes, Route, Link } from 'react-router-dom';  
import BusinessProposal from './components/BusinessProposal';

function App() {  
  return (  
    <div>  
      <nav>  
        <Link to="/proposal">Business Proposal</Link>  
      </nav>

      <Routes>  
        <Route path="/" element={<h1>Welcome</h1>} />  
        <Route path="/proposal" element={<BusinessProposal />} />  
      </Routes>  
    </div>  
  );  
}

export default App;

cd react-frontend  
npm start  

cd mcp-server  
npm run dev	|	[http://localhost:3001](http://localhost:3001)

cd laravel-api  
php artisan serve --port=8000

cd react-frontend  
npm start