TRX/fivem-mcp
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Enhance documentation and UI with copy buttons for code blocks, improve animations, and update URLs

Browse Source
This commit is contained in:
Adrian Mejias committed 2026-03-01 01:02:33 -06:00
1 parent 2d547e7fb8
commit d9f5e2d315
7 files changed
+117 -155
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

resources/css/app.css
+60
View File
@@ -9,3 +9,63 @@
--font-sans: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
'Segoe UI Symbol', 'Noto Color Emoji';
}
.tab-button {
transition: all 0.2s ease-in-out;
}
.tab-content {
animation: fadeIn 0.3s ease-in-out;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.code-block-wrapper {
position: relative;
}
.copy-button {
position: absolute;
top: 0.5rem;
right: 0.5rem;
padding: 0.375rem 0.75rem;
background-color: rgba(55, 65, 81, 0.8);
color: white;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 0.375rem;
font-size: 0.75rem;
font-weight: 500;
cursor: pointer;
opacity: 0;
transition: all 0.2s ease-in-out;
display: flex;
align-items: center;
gap: 0.25rem;
}
.code-block-wrapper:hover .copy-button {
opacity: 1;
}
.copy-button:hover {
background-color: rgba(55, 65, 81, 1);
}
.copy-button.copied {
background-color: rgba(16, 185, 129, 0.9);
border-color: rgba(16, 185, 129, 1);
}
.copy-button svg {
width: 1rem;
height: 1rem;
}
resources/js/app.js
+37
View File
@@ -1 +1,38 @@
import './bootstrap';
document.addEventListener('DOMContentLoaded', () => {
const codeBlocks = document.querySelectorAll('pre');
codeBlocks.forEach((pre) => {
if (!pre.parentElement.classList.contains('code-block-wrapper')) {
const wrapper = document.createElement('div');
wrapper.className = 'code-block-wrapper';
pre.parentNode.insertBefore(wrapper, pre);
wrapper.appendChild(pre);
}
const wrapper = pre.parentElement;
const copyButton = document.createElement('button');
copyButton.className = 'copy-button';
copyButton.innerHTML = `<svg class="copy-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"></path></svg> <span class="copy-text">Copy</span>`;
copyButton.addEventListener('click', () => {
const code = pre.querySelector('code');
const text = code ? code.textContent : pre.textContent;
navigator.clipboard.writeText(text).then(() => {
copyButton.classList.add('copied');
copyButton.innerHTML = `<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg> <span>Copied!</span>`;
setTimeout(() => {
copyButton.classList.remove('copied');
copyButton.innerHTML = `<svg class="copy-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"></path></svg><span class="copy-text">Copy</span>`;
}, 2000);
}).catch((err) => {
console.error('Failed to copy:', err);
});
});
wrapper.appendChild(copyButton);
});
});
resources/views/docs/documentation.blade.php
+2 -23
View File
@@ -3,27 +3,6 @@
@section('title', 'Full Documentation - FiveM MCP Server')
@section('content')
<style>
.tab-button {
transition: all 0.2s ease-in-out;
}
.tab-content {
animation: fadeIn 0.3s ease-in-out;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
</style>
<div class="max-w-5xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
<div class="bg-white shadow rounded-lg p-8">
<h1 class="text-3xl font-extrabold text-gray-900 mb-6">FiveM Development MCP Server</h1>
@@ -85,7 +64,7 @@
<pre class="bg-gray-900 text-gray-100 rounded p-4 overflow-x-auto"><code>{
"mcpServers": {
"fivem": {
"url": "https://your-domain.com/mcp"
"url": "https://your-domain.com/fivem"
}
}
}</code></pre>
@@ -103,7 +82,7 @@
"mcp": {
"servers": {
"fivem": {
"url": "https://your-domain.com/mcp"
"url": "https://your-domain.com/fivem"
}
}
}
resources/views/docs/index.blade.php
+6 -6
View File
@@ -22,7 +22,7 @@
<div class="bg-white overflow-hidden shadow rounded-lg">
<div class="px-4 py-5 sm:p-6">
<div class="flex items-center">
<div class="flex-shrink-0 bg-indigo-500 rounded-md p-3">
<div class="shrink-0 bg-indigo-500 rounded-md p-3">
<svg class="h-6 w-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
</svg>
@@ -43,7 +43,7 @@
<div class="bg-white overflow-hidden shadow rounded-lg">
<div class="px-4 py-5 sm:p-6">
<div class="flex items-center">
<div class="flex-shrink-0 bg-indigo-500 rounded-md p-3">
<div class="shrink-0 bg-indigo-500 rounded-md p-3">
<svg class="h-6 w-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"></path>
</svg>
@@ -64,7 +64,7 @@
<div class="bg-white overflow-hidden shadow rounded-lg">
<div class="px-4 py-5 sm:p-6">
<div class="flex items-center">
<div class="flex-shrink-0 bg-indigo-500 rounded-md p-3">
<div class="shrink-0 bg-indigo-500 rounded-md p-3">
<svg class="h-6 w-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
</svg>
@@ -85,7 +85,7 @@
<div class="bg-white overflow-hidden shadow rounded-lg">
<div class="px-4 py-5 sm:p-6">
<div class="flex items-center">
<div class="flex-shrink-0 bg-indigo-500 rounded-md p-3">
<div class="shrink-0 bg-indigo-500 rounded-md p-3">
<svg class="h-6 w-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
</svg>
@@ -106,7 +106,7 @@
<div class="bg-white overflow-hidden shadow rounded-lg">
<div class="px-4 py-5 sm:p-6">
<div class="flex items-center">
<div class="flex-shrink-0 bg-indigo-500 rounded-md p-3">
<div class="shrink-0 bg-indigo-500 rounded-md p-3">
<svg class="h-6 w-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z"></path>
</svg>
@@ -127,7 +127,7 @@
<div class="bg-white overflow-hidden shadow rounded-lg">
<div class="px-4 py-5 sm:p-6">
<div class="flex items-center">
<div class="flex-shrink-0 bg-indigo-500 rounded-md p-3">
<div class="shrink-0 bg-indigo-500 rounded-md p-3">
<svg class="h-6 w-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z"></path>
</svg>
resources/views/docs/layout.blade.php
+4 -101
View File
@@ -5,43 +5,6 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@yield('title', 'FiveM MCP Server Documentation')</title>
@vite(['resources/css/app.css', 'resources/js/app.js'])
<style>
.code-block-wrapper {
position: relative;
}
.copy-button {
position: absolute;
top: 0.5rem;
right: 0.5rem;
padding: 0.375rem 0.75rem;
background-color: rgba(55, 65, 81, 0.8);
color: white;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 0.375rem;
font-size: 0.75rem;
font-weight: 500;
cursor: pointer;
opacity: 0;
transition: all 0.2s ease-in-out;
display: flex;
align-items: center;
gap: 0.25rem;
}
.code-block-wrapper:hover .copy-button {
opacity: 1;
}
.copy-button:hover {
background-color: rgba(55, 65, 81, 1);
}
.copy-button.copied {
background-color: rgba(16, 185, 129, 0.9);
border-color: rgba(16, 185, 129, 1);
}
.copy-button svg {
width: 1rem;
height: 1rem;
}
</style>
</head>
<body class="h-full bg-gray-50">
<div class="min-h-full">
@@ -50,17 +13,17 @@
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between h-16">
<div class="flex">
<div class="flex-shrink-0 flex items-center">
<div class="shrink-0 flex items-center">
<h1 class="text-xl font-bold text-gray-900">FiveM MCP Server</h1>
</div>
<div class="hidden sm:ml-6 sm:flex sm:space-x-8">
<a href="{{ route('docs.index') }}" class="@if(request()->routeIs('docs.index')) border-indigo-500 text-gray-900 @else border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 @endif inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">
<a href="{{ route('docs.index') }}" class="{{ request()->routeIs('docs.index') ? 'border-indigo-500 text-gray-900' : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700' }} inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">
Home
</a>
<a href="{{ route('docs.quickstart') }}" class="@if(request()->routeIs('docs.quickstart')) border-indigo-500 text-gray-900 @else border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 @endif inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">
<a href="{{ route('docs.quickstart') }}" class="{{ request()->routeIs('docs.quickstart') ? 'border-indigo-500 text-gray-900' : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700' }} inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">
Quick Start
</a>
<a href="{{ route('docs.documentation') }}" class="@if(request()->routeIs('docs.documentation')) border-indigo-500 text-gray-900 @else border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 @endif inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">
<a href="{{ route('docs.documentation') }}" class="{{ request()->routeIs('docs.documentation') ? 'border-indigo-500 text-gray-900' : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700' }} inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">
Documentation
</a>
</div>
@@ -83,65 +46,5 @@
</div>
</footer>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
// Add copy buttons to all code blocks
const codeBlocks = document.querySelectorAll('pre');
codeBlocks.forEach(function(pre) {
// Wrap the pre in a div if not already wrapped
if (!pre.parentElement.classList.contains('code-block-wrapper')) {
const wrapper = document.createElement('div');
wrapper.className = 'code-block-wrapper';
pre.parentNode.insertBefore(wrapper, pre);
wrapper.appendChild(pre);
}
const wrapper = pre.parentElement;
// Create copy button
const copyButton = document.createElement('button');
copyButton.className = 'copy-button';
copyButton.innerHTML = `
<svg class="copy-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"></path>
</svg>
<span class="copy-text">Copy</span>
`;
copyButton.addEventListener('click', function() {
const code = pre.querySelector('code');
const text = code ? code.textContent : pre.textContent;
navigator.clipboard.writeText(text).then(function() {
// Show success state
copyButton.classList.add('copied');
copyButton.innerHTML = `
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
<span>Copied!</span>
`;
// Reset after 2 seconds
setTimeout(function() {
copyButton.classList.remove('copied');
copyButton.innerHTML = `
<svg class="copy-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"></path>
</svg>
<span class="copy-text">Copy</span>
`;
}, 2000);
}).catch(function(err) {
console.error('Failed to copy:', err);
});
});
wrapper.appendChild(copyButton);
});
});
</script>
</body>
</html>
resources/views/docs/quickstart.blade.php
+7 -24
View File
@@ -3,27 +3,6 @@
@section('title', 'Quick Start Guide - FiveM MCP Server')
@section('content')
<style>
.tab-button {
transition: all 0.2s ease-in-out;
}
.tab-content {
animation: fadeIn 0.3s ease-in-out;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
</style>
<div class="max-w-4xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
<div class="bg-white shadow rounded-lg p-8">
<h1 class="text-3xl font-extrabold text-gray-900 mb-6">FiveM MCP Quick Start Guide</h1>
@@ -94,7 +73,11 @@
<p class="text-gray-700 mb-3">
Ask your server administrator for the MCP server URL. It will look like:
</p>
<pre class="bg-gray-100 rounded p-3 text-sm"><code>https://your-domain.com/mcp</code></pre>
<pre class="bg-gray-100 rounded p-3 text-sm"><code>https://your-domain.com/fivem</code></pre>
<p class="text-gray-700 mb-3 mt-4">
If you're using the official hosted server, use this URL:
</p>
<pre class="bg-gray-100 rounded p-3 text-sm"><code>{{ route('fivem') }}</code></pre>
</div>
<!-- Step 2 -->
@@ -110,7 +93,7 @@
<pre class="bg-gray-900 text-gray-100 rounded p-4 overflow-x-auto"><code>{
"mcpServers": {
"fivem": {
"url": "https://your-domain.com/mcp"
"url": "https://your-domain.com/fivem"
}
}
}</code></pre>
@@ -121,7 +104,7 @@
"mcp": {
"servers": {
"fivem": {
"url": "https://your-domain.com/mcp"
"url": "https://your-domain.com/fivem"
}
}
}
routes/ai.php
+1 -1
View File
@@ -5,4 +5,4 @@ use Laravel\Mcp\Facades\Mcp;
Mcp::local('fivem', FiveMServer::class);
Mcp::web('fivem', FiveMServer::class);
Mcp::web('fivem', FiveMServer::class)->name('fivem');