Compare commits
| Author | SHA1 | Date | |
|---|---|---|---|
 Adrian Mejias
|
c4b2d7695f | ||
 Adrian Mejias
|
82498b9189 | ||
|
Adrian Mejias
|
949a9230c5 | ||
|
Adrian Mejias
|
f6da6705db | ||
|
Adrian Mejias
|
686b41e406 |
No files matched your search
@@ -247,6 +247,5 @@ MIT License - See LICENSE file for details
|
||||
## Support
|
||||
|
||||
For issues or questions:
|
||||
- Check the [documentation site](local)
|
||||
- Review [FiveM docs](https://docs.fivem.net/)
|
||||
- Open an issue on GitHub
|
||||
@@ -2,7 +2,11 @@
|
||||
|
||||
namespace App\Http\Controllers;
|
||||
|
||||
use App\Mcp\Servers\FiveMServer;
|
||||
use Illuminate\Support\Str;
|
||||
use Illuminate\View\View;
|
||||
use Laravel\Mcp\Server\Attributes\Description;
|
||||
use ReflectionClass;
|
||||
|
||||
class DocsController extends Controller
|
||||
{
|
||||
@@ -27,6 +31,64 @@ class DocsController extends Controller
|
||||
*/
|
||||
public function documentation(): View
|
||||
{
|
||||
return view('docs.documentation');
|
||||
$serverReflection = new ReflectionClass(FiveMServer::class);
|
||||
|
||||
$toolsProperty = $serverReflection->getProperty('tools');
|
||||
$resourcesProperty = $serverReflection->getProperty('resources');
|
||||
$promptsProperty = $serverReflection->getProperty('prompts');
|
||||
|
||||
$toolsProperty->setAccessible(true);
|
||||
$resourcesProperty->setAccessible(true);
|
||||
$promptsProperty->setAccessible(true);
|
||||
|
||||
$defaultProperties = $serverReflection->getDefaultProperties();
|
||||
|
||||
$tools = $this->extractComponentDetails($defaultProperties['tools'] ?? [], 'tool');
|
||||
$resources = $this->extractComponentDetails($defaultProperties['resources'] ?? [], 'resource');
|
||||
$prompts = $this->extractComponentDetails($defaultProperties['prompts'] ?? [], 'prompt');
|
||||
|
||||
return view('docs.documentation', [
|
||||
'tools' => $tools,
|
||||
'resources' => $resources,
|
||||
'prompts' => $prompts,
|
||||
]);
|
||||
}
|
||||
|
||||
/**
|
||||
* Extract details from MCP components.
|
||||
*/
|
||||
protected function extractComponentDetails(array $components, string $type): array
|
||||
{
|
||||
return collect($components)->map(function ($componentClass) use ($type) {
|
||||
$reflection = new ReflectionClass($componentClass);
|
||||
$descriptionAttr = $reflection->getAttributes(Description::class)[0] ?? null;
|
||||
$description = $descriptionAttr ? $descriptionAttr->getArguments()[0] : 'No description available';
|
||||
|
||||
// Get the simple class name and convert it to a readable format
|
||||
$className = $reflection->getShortName();
|
||||
$name = $this->formatClassName($className);
|
||||
|
||||
// Get category from namespace
|
||||
$namespace = $reflection->getNamespaceName();
|
||||
$parts = explode('\\', $namespace);
|
||||
$category = $parts[count($parts) - 1] ?? 'General';
|
||||
|
||||
return [
|
||||
'name' => $name,
|
||||
'class' => $className,
|
||||
'description' => $description,
|
||||
'category' => $category,
|
||||
'type' => $type,
|
||||
];
|
||||
})->toArray();
|
||||
}
|
||||
|
||||
/**
|
||||
* Format class name to readable format.
|
||||
*/
|
||||
protected function formatClassName(string $className): string
|
||||
{
|
||||
// Convert PascalCase to Title Case with spaces
|
||||
return Str::of($className)->kebab()->replace('-', ' ')->title();
|
||||
}
|
||||
}
|
||||
+101
-47
@@ -8,64 +8,118 @@
|
||||
@theme {
|
||||
--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;
|
||||
}
|
||||
--color-gta-dark: #1a1a1a;
|
||||
--color-gta-light: #f8fafc;
|
||||
--color-gta-orange: #f57c00;
|
||||
--color-gta-cyan: #1de9b6;
|
||||
--color-gta-gray: #334155;
|
||||
--color-gta-indigo: #3b82f6;
|
||||
|
||||
.tab-content {
|
||||
animation: fadeIn 0.3s ease-in-out;
|
||||
}
|
||||
--color-gray-50: #f8fafc;
|
||||
--color-gray-100: #f1f5f9;
|
||||
--color-gray-200: #e2e8f0;
|
||||
--color-gray-300: #cbd5e1;
|
||||
--color-gray-400: #94a3b8;
|
||||
--color-gray-500: #64748b;
|
||||
--color-gray-600: #475569;
|
||||
--color-gray-700: #334155;
|
||||
--color-gray-800: #1e293b;
|
||||
--color-gray-900: #0f172a;
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
--color-indigo-50: #fff7ed;
|
||||
--color-indigo-100: #ffedd5;
|
||||
--color-indigo-200: #fed7aa;
|
||||
--color-indigo-300: #fdba74;
|
||||
--color-indigo-400: #fb923c;
|
||||
--color-indigo-500: #f57c00;
|
||||
--color-indigo-600: #ea580c;
|
||||
--color-indigo-700: #c2410c;
|
||||
--color-indigo-800: #9a3412;
|
||||
--color-indigo-900: #7c2d12;
|
||||
|
||||
--animate-fade-in: fade-in 0.3s ease-in-out;
|
||||
|
||||
@keyframes fade-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.code-block-wrapper {
|
||||
position: relative;
|
||||
@layer base {
|
||||
:root {
|
||||
color-scheme: light dark;
|
||||
}
|
||||
|
||||
body {
|
||||
@apply bg-gray-50 text-gray-900 dark:bg-gray-900 dark:text-gray-100;
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
@layer utilities {
|
||||
.text-gta-neon {
|
||||
color: var(--color-gta-cyan);
|
||||
}
|
||||
|
||||
.text-gta-orange {
|
||||
color: var(--color-gta-orange);
|
||||
}
|
||||
|
||||
.bg-gta-neon {
|
||||
background-color: var(--color-gta-cyan);
|
||||
}
|
||||
|
||||
.bg-gta-orange {
|
||||
background-color: var(--color-gta-orange);
|
||||
}
|
||||
|
||||
.border-gta-neon {
|
||||
border-color: var(--color-gta-cyan);
|
||||
}
|
||||
|
||||
.border-gta-orange {
|
||||
border-color: var(--color-gta-orange);
|
||||
}
|
||||
}
|
||||
|
||||
.code-block-wrapper:hover .copy-button {
|
||||
opacity: 1;
|
||||
}
|
||||
@layer components {
|
||||
.link-gta {
|
||||
color: var(--color-gta-cyan);
|
||||
transition: color 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.copy-button:hover {
|
||||
background-color: rgba(55, 65, 81, 1);
|
||||
}
|
||||
.link-gta:hover {
|
||||
color: #6ee7b7;
|
||||
}
|
||||
|
||||
.copy-button.copied {
|
||||
background-color: rgba(16, 185, 129, 0.9);
|
||||
border-color: rgba(16, 185, 129, 1);
|
||||
}
|
||||
.btn-gta-primary {
|
||||
background-color: var(--color-gta-orange);
|
||||
color: #ffffff;
|
||||
border-radius: 0.5rem;
|
||||
font-weight: 600;
|
||||
transition: all 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.copy-button svg {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
.btn-gta-primary:hover {
|
||||
background-color: #ea580c;
|
||||
}
|
||||
|
||||
.btn-gta-secondary {
|
||||
background-color: transparent;
|
||||
color: var(--color-gta-cyan);
|
||||
border: 1px solid var(--color-gta-cyan);
|
||||
border-radius: 0.5rem;
|
||||
font-weight: 600;
|
||||
transition: all 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.btn-gta-secondary:hover {
|
||||
background-color: color-mix(in oklab, var(--color-gta-cyan) 16%, transparent);
|
||||
}
|
||||
}
|
||||
+42
-7
@@ -4,16 +4,16 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
const codeBlocks = document.querySelectorAll('pre');
|
||||
|
||||
codeBlocks.forEach((pre) => {
|
||||
if (!pre.parentElement.classList.contains('code-block-wrapper')) {
|
||||
if (!pre.parentElement.classList.contains('relative')) {
|
||||
const wrapper = document.createElement('div');
|
||||
wrapper.className = 'code-block-wrapper';
|
||||
wrapper.className = 'relative group';
|
||||
pre.parentNode.insertBefore(wrapper, pre);
|
||||
wrapper.appendChild(pre);
|
||||
}
|
||||
|
||||
const wrapper = pre.parentElement;
|
||||
const copyButton = document.createElement('button');
|
||||
copyButton.className = 'copy-button';
|
||||
copyButton.className = 'absolute top-2 right-2 px-3 py-1.5 bg-gray-700/80 text-white border border-white/20 rounded-md text-xs font-medium cursor-pointer opacity-0 group-hover:opacity-100 transition-all duration-200 ease-in-out flex items-center gap-1 hover:bg-gray-700';
|
||||
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', () => {
|
||||
@@ -21,12 +21,14 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
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>`;
|
||||
copyButton.classList.remove('bg-gray-700/80', 'border-white/20', 'hover:bg-gray-700');
|
||||
copyButton.classList.add('!bg-emerald-500/90', 'border-emerald-500');
|
||||
copyButton.innerHTML = `<svg class="w-4 h-4" 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>`;
|
||||
copyButton.classList.add('bg-gray-700/80', 'border-white/20', 'hover:bg-gray-700');
|
||||
copyButton.classList.remove('!bg-emerald-500/90', 'border-emerald-500');
|
||||
copyButton.innerHTML = `<svg class="w-4 h-4" 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);
|
||||
@@ -35,4 +37,37 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
|
||||
wrapper.appendChild(copyButton);
|
||||
});
|
||||
|
||||
// Tab switching functionality
|
||||
const tabButtons = document.querySelectorAll('[data-tab]');
|
||||
const tabContents = document.querySelectorAll('[data-tab-content]');
|
||||
|
||||
tabButtons.forEach(button => {
|
||||
button.addEventListener('click', function () {
|
||||
const targetTab = this.dataset.tab;
|
||||
|
||||
// Remove active class from all buttons
|
||||
tabButtons.forEach(btn => {
|
||||
btn.classList.remove('active', 'border-gta-orange', 'text-gta-orange');
|
||||
btn.classList.add('border-transparent', 'text-gray-500', 'dark:text-gray-400');
|
||||
});
|
||||
|
||||
// Add active class to clicked button
|
||||
this.classList.remove('border-transparent', 'text-gray-500', 'dark:text-gray-400');
|
||||
this.classList.add('active', 'border-gta-orange', 'text-gta-orange');
|
||||
|
||||
// Hide all tab contents
|
||||
tabContents.forEach(content => {
|
||||
content.classList.add('hidden');
|
||||
content.classList.remove('active');
|
||||
});
|
||||
|
||||
// Show target tab content
|
||||
const targetContent = document.querySelector(`[data-tab-content="${targetTab}"]`);
|
||||
if (targetContent) {
|
||||
targetContent.classList.remove('hidden');
|
||||
targetContent.classList.add('active');
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -1,591 +1,366 @@
|
||||
@extends('docs.layout')
|
||||
@extends('layouts.app')
|
||||
|
||||
@section('title', 'Full Documentation - FiveM MCP Server')
|
||||
|
||||
@section('content')
|
||||
<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>
|
||||
<div class="max-w-5xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
|
||||
<div class="bg-white dark:bg-gray-800 shadow rounded-lg p-8">
|
||||
<h1 class="text-3xl font-extrabold text-gray-900 dark:text-white mb-6">FiveM Development MCP Server</h1>
|
||||
|
||||
<p class="text-lg text-gray-700 mb-8">
|
||||
A comprehensive Model Context Protocol (MCP) server for FiveM (GTA5) development, built with Laravel MCP.
|
||||
This server provides AI assistants with powerful tools to help you develop FiveM resources more efficiently.
|
||||
</p>
|
||||
<p class="text-lg text-gray-700 dark:text-gray-300 mb-8">
|
||||
A comprehensive Model Context Protocol (MCP) server for FiveM (GTA5) development, built with Laravel MCP.
|
||||
This server provides AI assistants with powerful tools to help you develop FiveM resources more efficiently.
|
||||
</p>
|
||||
|
||||
<!-- Installation -->
|
||||
<section class="mb-12">
|
||||
<h2 class="text-2xl font-bold text-gray-900 mb-4">Installation & Connection</h2>
|
||||
<p class="text-gray-700 mb-6">Choose how you want to connect to the FiveM MCP server:</p>
|
||||
<!-- Installation -->
|
||||
<section class="mb-12">
|
||||
<h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-4">Installation & Connection</h2>
|
||||
<p class="text-gray-700 dark:text-gray-300 mb-6">Choose how you want to connect to the FiveM MCP server:</p>
|
||||
|
||||
<!-- Tab Buttons -->
|
||||
<div class="border-b border-gray-200 mb-6">
|
||||
<nav class="-mb-px flex space-x-8">
|
||||
<button
|
||||
data-tab="remote"
|
||||
class="tab-button active border-b-2 border-indigo-500 py-4 px-1 text-center text-sm font-medium text-indigo-600"
|
||||
>
|
||||
<span class="flex items-center">
|
||||
<span class="mr-2">🌐</span>
|
||||
Remote Server
|
||||
<span class="ml-2 inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-indigo-100 text-indigo-800">
|
||||
Recommended
|
||||
</span>
|
||||
<!-- Tab Buttons -->
|
||||
<div class="border-b border-gray-200 dark:border-gray-700 mb-6">
|
||||
<nav class="-mb-px flex space-x-8">
|
||||
<button data-tab="remote"
|
||||
class="transition-all duration-200 ease-in-out active border-b-2 border-gta-orange py-4 px-1 text-center text-sm font-medium text-gta-orange">
|
||||
<span class="flex items-center">
|
||||
<span class="mr-2">🌐</span>
|
||||
Remote Server
|
||||
<span
|
||||
class="ml-2 inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 dark:bg-gray-700 border border-gta-orange text-gta-orange">
|
||||
Recommended
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
data-tab="local"
|
||||
class="tab-button border-b-2 border-transparent py-4 px-1 text-center text-sm font-medium text-gray-500 hover:text-gray-700 hover:border-gray-300"
|
||||
>
|
||||
<span class="flex items-center">
|
||||
<span class="mr-2">💻</span>
|
||||
Local Installation
|
||||
</span>
|
||||
</button>
|
||||
</nav>
|
||||
</div>
|
||||
</span>
|
||||
</button>
|
||||
<button data-tab="local"
|
||||
class="transition-all duration-200 ease-in-out border-b-2 border-transparent py-4 px-1 text-center text-sm font-medium text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 hover:border-gray-300 dark:hover:border-gray-600">
|
||||
<span class="flex items-center">
|
||||
<span class="mr-2">💻</span>
|
||||
Local Installation
|
||||
</span>
|
||||
</button>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<!-- Tab Content Container -->
|
||||
<div class="tab-content-container">
|
||||
<!-- Remote Server Option -->
|
||||
<div data-tab-content="remote" class="tab-content active">
|
||||
<div class="bg-indigo-50 border-l-4 border-indigo-500 p-6">
|
||||
<p class="text-gray-700 mb-4">
|
||||
<strong>Easy setup!</strong> Connect to a hosted MCP server. This is the easiest option and works from anywhere without any local setup.
|
||||
</p>
|
||||
<!-- Tab Content Container -->
|
||||
<div class="tab-content-container">
|
||||
<!-- Remote Server Option -->
|
||||
<div data-tab-content="remote" class="animate-fade-in active">
|
||||
<div class="bg-gray-100 dark:bg-gray-700/30 border-l-4 border-gta-orange p-6">
|
||||
<p class="text-gray-700 dark:text-gray-300 mb-4">
|
||||
<strong>Easy setup!</strong> Connect to a hosted MCP server. This is the easiest option and
|
||||
works from anywhere without any local setup.
|
||||
</p>
|
||||
|
||||
<h4 class="font-semibold text-gray-900 mb-2">Claude Desktop Configuration:</h4>
|
||||
<p class="text-gray-700 mb-3">Edit your configuration file:</p>
|
||||
<ul class="list-disc list-inside text-gray-700 mb-3 ml-4">
|
||||
<li><strong>macOS:</strong> <code class="bg-gray-100 px-2 py-1 rounded text-sm">~/Library/Application Support/Claude/claude_desktop_config.json</code></li>
|
||||
<li><strong>Windows:</strong> <code class="bg-gray-100 px-2 py-1 rounded text-sm">%APPDATA%\Claude\claude_desktop_config.json</code></li>
|
||||
</ul>
|
||||
<h4 class="font-semibold text-gray-900 dark:text-white mb-2">Claude Desktop Configuration:</h4>
|
||||
<p class="text-gray-700 dark:text-gray-300 mb-3">Edit your configuration file:</p>
|
||||
<ul class="list-disc list-inside text-gray-700 dark:text-gray-300 mb-3 ml-4">
|
||||
<li><strong>macOS:</strong> <code
|
||||
class="bg-gray-100 dark:bg-gray-700 text-gray-900 dark:text-gray-100 px-2 py-1 rounded text-sm">~/Library/Application Support/Claude/claude_desktop_config.json</code>
|
||||
</li>
|
||||
<li><strong>Windows:</strong> <code
|
||||
class="bg-gray-100 dark:bg-gray-700 text-gray-900 dark:text-gray-100 px-2 py-1 rounded text-sm">%APPDATA%\Claude\claude_desktop_config.json</code>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p class="text-gray-700 mb-3">Add this configuration (replace with your actual server URL):</p>
|
||||
<pre class="bg-gray-900 text-gray-100 rounded p-4 overflow-x-auto"><code>{
|
||||
"mcpServers": {
|
||||
"fivem": {
|
||||
"url": "https://your-domain.com/fivem"
|
||||
}
|
||||
}
|
||||
}</code></pre>
|
||||
</div>
|
||||
|
||||
<div class="mt-6">
|
||||
<h4 class="font-semibold text-gray-900 mb-2">VSCode Configuration (Cline Extension):</h4>
|
||||
<p class="text-gray-700 mb-3">If using VSCode with the Cline extension, edit your settings:</p>
|
||||
<ul class="list-disc list-inside text-gray-700 mb-3 ml-4">
|
||||
<li>Open VSCode Settings (JSON)</li>
|
||||
<li>Add to your global or workspace <code class="bg-gray-100 px-2 py-1 rounded text-sm">settings.json</code></li>
|
||||
</ul>
|
||||
|
||||
<pre class="bg-gray-900 text-gray-100 rounded p-4 overflow-x-auto"><code>{
|
||||
"mcp": {
|
||||
"servers": {
|
||||
"fivem": {
|
||||
"url": "https://your-domain.com/fivem"
|
||||
}
|
||||
}
|
||||
}
|
||||
}</code></pre>
|
||||
</div>
|
||||
<p class="text-gray-700 dark:text-gray-300 mb-3">Add this configuration (replace with your
|
||||
actual
|
||||
server URL):</p>
|
||||
<pre class="bg-gray-900 text-gray-100 rounded p-4 overflow-x-auto"><code>@verbatim{
|
||||
"mcpServers": {
|
||||
"fivem": {
|
||||
"url": "https://your-domain.com/fivem"
|
||||
}
|
||||
}
|
||||
}@endverbatim</code></pre>
|
||||
</div>
|
||||
|
||||
<!-- Local Installation Option -->
|
||||
<div data-tab-content="local" class="tab-content hidden">
|
||||
<div class="bg-gray-50 border-l-4 border-gray-400 p-6">
|
||||
<p class="text-gray-700 mb-4">
|
||||
<strong>Advanced setup.</strong> Run the MCP server on your own machine. Requires PHP and Laravel setup.
|
||||
</p>
|
||||
<div class="mt-6">
|
||||
<h4 class="font-semibold text-gray-900 dark:text-white mb-2">VSCode Configuration (Cline
|
||||
Extension):
|
||||
</h4>
|
||||
<p class="text-gray-700 dark:text-gray-300 mb-3">If using VSCode with the Cline extension, edit
|
||||
your
|
||||
settings:</p>
|
||||
<ul class="list-disc list-inside text-gray-700 dark:text-gray-300 mb-3 ml-4">
|
||||
<li>Open VSCode Settings (JSON)</li>
|
||||
<li>Add to your global or workspace <code
|
||||
class="bg-gray-100 dark:bg-gray-700 text-gray-900 dark:text-gray-100 px-2 py-1 rounded text-sm">settings.json</code>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<h4 class="font-semibold text-gray-900 mb-2">Claude Desktop Configuration:</h4>
|
||||
<p class="text-gray-700 mb-3">Edit your configuration file and add:</p>
|
||||
<pre class="bg-gray-900 text-gray-100 rounded p-4 overflow-x-auto mb-4"><code>{
|
||||
"mcpServers": {
|
||||
<pre class="bg-gray-900 text-gray-100 rounded p-4 overflow-x-auto"><code>@verbatim{
|
||||
"mcp": {
|
||||
"servers": {
|
||||
"fivem": {
|
||||
"command": "/path/to/php",
|
||||
"args": [
|
||||
"/path/to/fivem-mcp/artisan",
|
||||
"mcp:start",
|
||||
"fivem"
|
||||
]
|
||||
"url": "https://your-domain.com/fivem"
|
||||
}
|
||||
}
|
||||
}</code></pre>
|
||||
}
|
||||
}
|
||||
}@endverbatim</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4 class="font-semibold text-gray-900 mb-2">Command Line Usage:</h4>
|
||||
<p class="text-gray-700 mb-3">For any MCP-compatible client:</p>
|
||||
<pre class="bg-gray-900 text-gray-100 rounded p-4 overflow-x-auto"><code>php artisan mcp:start fivem</code></pre>
|
||||
<!-- Local Installation Option -->
|
||||
<div data-tab-content="local" class="animate-fade-in hidden">
|
||||
<div class="bg-gray-50 dark:bg-gray-700/20 border-l-4 border-gray-400 dark:border-gray-500 p-6">
|
||||
<p class="text-gray-700 dark:text-gray-300 mb-4">
|
||||
<strong>Advanced setup.</strong> Run the MCP server on your own machine. Requires PHP and
|
||||
Laravel setup.
|
||||
</p>
|
||||
|
||||
<h4 class="font-semibold text-gray-900 mb-2 mt-6">VSCode Configuration (Cline Extension):</h4>
|
||||
<p class="text-gray-700 mb-3">If using VSCode with the Cline extension, add to <code class="bg-gray-100 px-2 py-1 rounded text-sm">settings.json</code>:</p>
|
||||
<pre class="bg-gray-900 text-gray-100 rounded p-4 overflow-x-auto"><code>{
|
||||
"mcp": {
|
||||
"servers": {
|
||||
"fivem": {
|
||||
<h4 class="font-semibold text-gray-900 dark:text-white mb-2">Claude Desktop Configuration:</h4>
|
||||
<p class="text-gray-700 dark:text-gray-300 mb-3">Edit your configuration file and add:</p>
|
||||
<pre class="bg-gray-900 text-gray-100 rounded p-4 overflow-x-auto mb-4"><code>@verbatim{
|
||||
"mcpServers": {
|
||||
"fivem": {
|
||||
"command": "/path/to/php",
|
||||
"args": [
|
||||
"/path/to/fivem-mcp/artisan",
|
||||
"mcp:start",
|
||||
"fivem"
|
||||
]
|
||||
}
|
||||
}
|
||||
}@endverbatim</code></pre>
|
||||
|
||||
<h4 class="font-semibold text-gray-900 dark:text-white mb-2">Command Line Usage:</h4>
|
||||
<p class="text-gray-700 dark:text-gray-300 mb-3">For any MCP-compatible client:</p>
|
||||
<pre
|
||||
class="bg-gray-900 text-gray-100 rounded p-4 overflow-x-auto"><code>php artisan mcp:start fivem</code></pre>
|
||||
|
||||
<h4 class="font-semibold text-gray-900 dark:text-white mb-2 mt-6">VSCode Configuration (Cline
|
||||
Extension):</h4>
|
||||
<p class="text-gray-700 dark:text-gray-300 mb-3">If using VSCode with the Cline extension, add
|
||||
to
|
||||
<code
|
||||
class="bg-gray-100 dark:bg-gray-700 text-gray-900 dark:text-gray-100 px-2 py-1 rounded text-sm">settings.json</code>:
|
||||
</p>
|
||||
<pre class="bg-gray-900 text-gray-100 rounded p-4 overflow-x-auto"><code>@verbatim{
|
||||
"mcp": {
|
||||
"servers": {
|
||||
"fivem": {
|
||||
"command": "php",
|
||||
"args": ["artisan", "mcp:start", "fivem"],
|
||||
"cwd": "/path/to/fivem-mcp"
|
||||
}
|
||||
}
|
||||
}
|
||||
}</code></pre>
|
||||
}
|
||||
}
|
||||
}@endverbatim</code></pre>
|
||||
|
||||
<p class="text-gray-700 mb-3 mt-4"><strong>Or use the full PHP path:</strong></p>
|
||||
<pre class="bg-gray-900 text-gray-100 rounded p-4 overflow-x-auto"><code>{
|
||||
"mcp": {
|
||||
"servers": {
|
||||
"fivem": {
|
||||
<p class="text-gray-700 dark:text-gray-300 mb-3 mt-4"><strong>Or use the full PHP path:</strong>
|
||||
</p>
|
||||
<pre class="bg-gray-900 text-gray-100 rounded p-4 overflow-x-auto"><code>@verbatim{
|
||||
"mcp": {
|
||||
"servers": {
|
||||
"fivem": {
|
||||
"command": "/path/to/php",
|
||||
"args": ["/path/to/fivem-mcp/artisan", "mcp:start", "fivem"]
|
||||
}
|
||||
}
|
||||
}
|
||||
}</code></pre>
|
||||
}
|
||||
}
|
||||
}@endverbatim</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-blue-50 dark:bg-blue-900/20 border-l-4 border-blue-500 p-4 mt-6">
|
||||
<p class="text-sm text-blue-800 dark:text-blue-200">
|
||||
<strong>💡 Tip:</strong> After configuring Claude Desktop, completely quit and restart the
|
||||
application
|
||||
for
|
||||
changes to take effect.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Available Tools -->
|
||||
<section class="mb-12">
|
||||
<h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-6">Available Tools</h2>
|
||||
<p class="text-gray-700 dark:text-gray-300 mb-6">
|
||||
The FiveM MCP Server provides {{ count($tools) }} tools organized by category.
|
||||
These tools allow AI assistants to search documentation, generate code, and lookup framework functions.
|
||||
</p>
|
||||
|
||||
@php
|
||||
$groupedTools = collect($tools)->groupBy('category');
|
||||
@endphp
|
||||
|
||||
@foreach ($groupedTools as $category => $categoryTools)
|
||||
<div class="mb-8">
|
||||
<h3 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-4 flex items-center">
|
||||
<span class="inline-block w-1 h-6 bg-gta-orange mr-3"></span>
|
||||
{{ $category }} Tools
|
||||
<span
|
||||
class="ml-3 text-sm font-normal text-gray-500 dark:text-gray-400">({{ count($categoryTools) }})</span>
|
||||
</h3>
|
||||
|
||||
@foreach ($categoryTools as $index => $tool)
|
||||
<div class="mb-6 border-l-4 border-gta-orange pl-6">
|
||||
<h4 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">{{ $tool['name'] }}</h4>
|
||||
<p class="text-gray-700 dark:text-gray-300">{{ $tool['description'] }}</p>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
@endforeach
|
||||
</section>
|
||||
|
||||
<div class="bg-blue-50 border-l-4 border-blue-500 p-4 mt-6">
|
||||
<p class="text-sm text-blue-800">
|
||||
<strong>💡 Tip:</strong> After configuring Claude Desktop, completely quit and restart the application for changes to take effect.
|
||||
</p>
|
||||
<!-- Available Resources -->
|
||||
<section class="mb-12">
|
||||
<h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-6">Available Resources</h2>
|
||||
<p class="text-gray-700 dark:text-gray-300 mb-6">
|
||||
MCP Resources provide read-only reference documentation that AI assistants can access.
|
||||
Currently available: {{ count($resources) }} resources.
|
||||
</p>
|
||||
|
||||
@forelse ($resources as $index => $resource)
|
||||
<div class="mb-6 border-l-4 border-green-500 pl-6">
|
||||
<h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">{{ $index + 1 }}.
|
||||
{{ $resource['name'] }}
|
||||
</h3>
|
||||
<p class="text-gray-700 dark:text-gray-300">{{ $resource['description'] }}</p>
|
||||
</div>
|
||||
</section>
|
||||
@empty
|
||||
<p class="text-gray-500 dark:text-gray-400 italic">No resources configured.</p>
|
||||
@endforelse
|
||||
</section>
|
||||
|
||||
<!-- Available Tools -->
|
||||
<section class="mb-12">
|
||||
<h2 class="text-2xl font-bold text-gray-900 mb-6">Available Tools</h2>
|
||||
<!-- Available Prompts -->
|
||||
<section class="mb-12">
|
||||
<h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-6">Available Prompts</h2>
|
||||
<p class="text-gray-700 dark:text-gray-300 mb-6">
|
||||
MCP Prompts are pre-built prompt templates for common tasks.
|
||||
Currently available: {{ count($prompts) }} prompts.
|
||||
</p>
|
||||
|
||||
<!-- Tool 1: SearchFiveMDocs -->
|
||||
<div class="mb-8 border-l-4 border-indigo-500 pl-6">
|
||||
<h3 class="text-xl font-semibold text-gray-900 mb-3">1. SearchFiveMDocs</h3>
|
||||
<p class="text-gray-700 mb-4">Search FiveM, QBCore, and COX MySQL documentation for specific topics.</p>
|
||||
|
||||
<h4 class="font-semibold text-gray-900 mb-2">Parameters:</h4>
|
||||
<ul class="list-disc list-inside text-gray-700 mb-4 ml-4">
|
||||
<li><code class="bg-gray-100 px-2 py-1 rounded text-sm">query</code> (required): Search query (e.g., "events",
|
||||
"natives", "mysql", "database")</li>
|
||||
<li><code class="bg-gray-100 px-2 py-1 rounded text-sm">category</code> (optional): Filter by category (all,
|
||||
scripting, natives, networking, resources, qbcore, coxdocs)</li>
|
||||
</ul>
|
||||
|
||||
<h4 class="font-semibold text-gray-900 mb-2">Examples:</h4>
|
||||
<pre class="bg-gray-100 rounded p-3 text-sm mb-2"><code>Search for QBCore callbacks and exports</code></pre>
|
||||
<pre class="bg-gray-100 rounded p-3 text-sm"><code>How do I query the database with COX MySQL?</code></pre>
|
||||
</div>
|
||||
|
||||
<!-- Tool 2: GetNativeFunction -->
|
||||
<div class="mb-8 border-l-4 border-indigo-500 pl-6">
|
||||
<h3 class="text-xl font-semibold text-gray-900 mb-3">2. GetNativeFunction</h3>
|
||||
<p class="text-gray-700 mb-4">Look up GTA5/FiveM native functions.</p>
|
||||
|
||||
<h4 class="font-semibold text-gray-900 mb-2">Parameters:</h4>
|
||||
<ul class="list-disc list-inside text-gray-700 mb-4 ml-4">
|
||||
<li><code class="bg-gray-100 px-2 py-1 rounded text-sm">function_name</code> (required): Native function name
|
||||
(e.g., "GetPlayerPed", "SetEntityCoords")</li>
|
||||
<li><code class="bg-gray-100 px-2 py-1 rounded text-sm">language</code> (optional): Code example language (lua
|
||||
or js)</li>
|
||||
</ul>
|
||||
|
||||
<h4 class="font-semibold text-gray-900 mb-2">Common Native Examples:</h4>
|
||||
<ul class="list-disc list-inside text-gray-700 mb-4 ml-4">
|
||||
<li>Common natives: <code class="bg-gray-100 px-2 py-1 rounded text-sm">GetPlayerPed</code>, <code
|
||||
class="bg-gray-100 px-2 py-1 rounded text-sm">SetEntityCoords</code>, <code
|
||||
class="bg-gray-100 px-2 py-1 rounded text-sm">GetEntityCoords</code></li>
|
||||
<li>CFX natives: <code class="bg-gray-100 px-2 py-1 rounded text-sm">RegisterNetEvent</code>, <code
|
||||
class="bg-gray-100 px-2 py-1 rounded text-sm">TriggerServerEvent</code>, <code
|
||||
class="bg-gray-100 px-2 py-1 rounded text-sm">TriggerClientEvent</code></li>
|
||||
<li>ESX: <code class="bg-gray-100 px-2 py-1 rounded text-sm">ESX.GetPlayerFromId</code></li>
|
||||
<li>QBCore: <code class="bg-gray-100 px-2 py-1 rounded text-sm">QBCore.Functions.GetPlayer</code></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Tool 3: GenerateManifest -->
|
||||
<div class="mb-8 border-l-4 border-indigo-500 pl-6">
|
||||
<h3 class="text-xl font-semibold text-gray-900 mb-3">3. GenerateManifest</h3>
|
||||
<p class="text-gray-700 mb-4">Generate a fxmanifest.lua file.</p>
|
||||
|
||||
<h4 class="font-semibold text-gray-900 mb-2">Parameters:</h4>
|
||||
<ul class="list-disc list-inside text-gray-700 mb-4 ml-4">
|
||||
<li><code class="bg-gray-100 px-2 py-1 rounded text-sm">resource_name</code> (required): Resource name</li>
|
||||
<li><code class="bg-gray-100 px-2 py-1 rounded text-sm">author</code> (optional): Author name</li>
|
||||
<li><code class="bg-gray-100 px-2 py-1 rounded text-sm">description</code> (optional): Resource description</li>
|
||||
<li><code class="bg-gray-100 px-2 py-1 rounded text-sm">version</code> (optional): Version number (default:
|
||||
"1.0.0")</li>
|
||||
<li><code class="bg-gray-100 px-2 py-1 rounded text-sm">script_type</code> (optional): lua or js (default: lua)
|
||||
</li>
|
||||
<li><code class="bg-gray-100 px-2 py-1 rounded text-sm">include_client</code> (optional): Include client scripts
|
||||
(default: true)</li>
|
||||
<li><code class="bg-gray-100 px-2 py-1 rounded text-sm">include_server</code> (optional): Include server scripts
|
||||
(default: true)</li>
|
||||
<li><code class="bg-gray-100 px-2 py-1 rounded text-sm">framework</code> (optional): standalone, esx, or qbcore
|
||||
(default: standalone)</li>
|
||||
</ul>
|
||||
|
||||
<h4 class="font-semibold text-gray-900 mb-2">Example:</h4>
|
||||
<pre
|
||||
class="bg-gray-100 rounded p-3 text-sm"><code>Generate a manifest for an ESX resource called "my-shop"</code></pre>
|
||||
</div>
|
||||
|
||||
<!-- Tool 4: GetEventReference -->
|
||||
<div class="mb-8 border-l-4 border-indigo-500 pl-6">
|
||||
<h3 class="text-xl font-semibold text-gray-900 mb-3">4. GetEventReference</h3>
|
||||
<p class="text-gray-700 mb-4">Get information about FiveM, ESX, and QBCore events.</p>
|
||||
|
||||
<h4 class="font-semibold text-gray-900 mb-2">Parameters:</h4>
|
||||
<ul class="list-disc list-inside text-gray-700 mb-4 ml-4">
|
||||
<li><code class="bg-gray-100 px-2 py-1 rounded text-sm">event_name</code> (optional): Specific event name to
|
||||
look up</li>
|
||||
<li><code class="bg-gray-100 px-2 py-1 rounded text-sm">event_type</code> (optional): Filter by type (all, core,
|
||||
esx, qbcore)</li>
|
||||
<li><code class="bg-gray-100 px-2 py-1 rounded text-sm">language</code> (optional): Code example language (lua
|
||||
or js)</li>
|
||||
</ul>
|
||||
|
||||
<h4 class="font-semibold text-gray-900 mb-2">Examples:</h4>
|
||||
<pre class="bg-gray-100 rounded p-3 text-sm mb-2"><code>Show me all core FiveM events</code></pre>
|
||||
<pre class="bg-gray-100 rounded p-3 text-sm mb-2"><code>Look up the QBCore:Client:OnPlayerLoaded event</code></pre>
|
||||
<pre class="bg-gray-100 rounded p-3 text-sm"><code>List all ESX events</code></pre>
|
||||
</div>
|
||||
|
||||
<!-- Tool 5: GenerateResourceBoilerplate -->
|
||||
<div class="mb-8 border-l-4 border-indigo-500 pl-6">
|
||||
<h3 class="text-xl font-semibold text-gray-900 mb-3">5. GenerateResourceBoilerplate</h3>
|
||||
<p class="text-gray-700 mb-4">Generate complete resource boilerplate code.</p>
|
||||
|
||||
<h4 class="font-semibold text-gray-900 mb-2">Parameters:</h4>
|
||||
<ul class="list-disc list-inside text-gray-700 mb-4 ml-4">
|
||||
<li><code class="bg-gray-100 px-2 py-1 rounded text-sm">resource_name</code> (required): Resource name</li>
|
||||
<li><code class="bg-gray-100 px-2 py-1 rounded text-sm">framework</code> (optional): standalone, esx, or qbcore
|
||||
(default: standalone)</li>
|
||||
<li><code class="bg-gray-100 px-2 py-1 rounded text-sm">script_type</code> (optional): lua or js (default: lua)
|
||||
</li>
|
||||
<li><code class="bg-gray-100 px-2 py-1 rounded text-sm">include_nui</code> (optional): Include NUI files
|
||||
(default: false)</li>
|
||||
</ul>
|
||||
|
||||
<h4 class="font-semibold text-gray-900 mb-2">Example:</h4>
|
||||
<pre
|
||||
class="bg-gray-100 rounded p-3 text-sm"><code>Generate boilerplate for a QBCore resource with NUI called "admin-panel"</code></pre>
|
||||
</div>
|
||||
|
||||
<!-- Tool 6: GetQBCoreEventReference -->
|
||||
<div class="mb-8 border-l-4 border-indigo-500 pl-6">
|
||||
<h3 class="text-xl font-semibold text-gray-900 mb-3">6. GetQBCoreEventReference</h3>
|
||||
<p class="text-gray-700 mb-4">Get information about QBCore framework events.</p>
|
||||
|
||||
<h4 class="font-semibold text-gray-900 mb-2">Parameters:</h4>
|
||||
<ul class="list-disc list-inside text-gray-700 mb-4 ml-4">
|
||||
<li><code class="bg-gray-100 px-2 py-1 rounded text-sm">event_name</code> (optional): Specific event name to
|
||||
look up</li>
|
||||
<li><code class="bg-gray-100 px-2 py-1 rounded text-sm">event_category</code> (optional): Filter by category
|
||||
(all, player, job, inventory, vehicle, money)</li>
|
||||
<li><code class="bg-gray-100 px-2 py-1 rounded text-sm">language</code> (optional): Code example language (lua
|
||||
or js)</li>
|
||||
</ul>
|
||||
|
||||
<h4 class="font-semibold text-gray-900 mb-2">Examples:</h4>
|
||||
<pre class="bg-gray-100 rounded p-3 text-sm mb-2"><code>What's the QBCore:Client:OnPlayerLoaded event?</code></pre>
|
||||
<pre class="bg-gray-100 rounded p-3 text-sm mb-2"><code>Show me all QBCore player events</code></pre>
|
||||
<pre class="bg-gray-100 rounded p-3 text-sm"><code>List all QBCore inventory events</code></pre>
|
||||
</div>
|
||||
|
||||
<!-- Tool 7: GetQBCoreFunction -->
|
||||
<div class="mb-8 border-l-4 border-indigo-500 pl-6">
|
||||
<h3 class="text-xl font-semibold text-gray-900 mb-3">7. GetQBCoreFunction</h3>
|
||||
<p class="text-gray-700 mb-4">Look up QBCore functions and exports.</p>
|
||||
|
||||
<h4 class="font-semibold text-gray-900 mb-2">Parameters:</h4>
|
||||
<ul class="list-disc list-inside text-gray-700 mb-4 ml-4">
|
||||
<li><code class="bg-gray-100 px-2 py-1 rounded text-sm">function_name</code> (required): QBCore function name
|
||||
(e.g., "QBCore.Functions.GetPlayer", "AddMoney")</li>
|
||||
<li><code class="bg-gray-100 px-2 py-1 rounded text-sm">language</code> (optional): Code example language (lua
|
||||
or js)</li>
|
||||
</ul>
|
||||
|
||||
<h4 class="font-semibold text-gray-900 mb-2">Common QBCore Functions:</h4>
|
||||
<ul class="list-disc list-inside text-gray-700 mb-4 ml-4">
|
||||
<li>Player: <code class="bg-gray-100 px-2 py-1 rounded text-sm">QBCore.Functions.GetPlayer</code>, <code
|
||||
class="bg-gray-100 px-2 py-1 rounded text-sm">QBCore.Functions.GetPlayerData</code></li>
|
||||
<li>Items: <code class="bg-gray-100 px-2 py-1 rounded text-sm">AddItem</code>, <code
|
||||
class="bg-gray-100 px-2 py-1 rounded text-sm">RemoveItem</code>, <code
|
||||
class="bg-gray-100 px-2 py-1 rounded text-sm">GetItemByName</code></li>
|
||||
<li>Money: <code class="bg-gray-100 px-2 py-1 rounded text-sm">AddMoney</code>, <code
|
||||
class="bg-gray-100 px-2 py-1 rounded text-sm">RemoveMoney</code>, <code
|
||||
class="bg-gray-100 px-2 py-1 rounded text-sm">GetMoney</code></li>
|
||||
<li>Jobs: <code class="bg-gray-100 px-2 py-1 rounded text-sm">SetJob</code>, <code
|
||||
class="bg-gray-100 px-2 py-1 rounded text-sm">GetJob</code></li>
|
||||
<li>Vehicles: <code class="bg-gray-100 px-2 py-1 rounded text-sm">AddVehicle</code>, <code
|
||||
class="bg-gray-100 px-2 py-1 rounded text-sm">DeleteVehicle</code></li>
|
||||
</ul>
|
||||
|
||||
<h4 class="font-semibold text-gray-900 mb-2">Example:</h4>
|
||||
<pre class="bg-gray-100 rounded p-3 text-sm"><code>How do I use the AddMoney function in QBCore?</code></pre>
|
||||
</div>
|
||||
<!-- Tool 8: GetCOXEventReference -->
|
||||
<div class="mb-8 border-l-4 border-indigo-500 pl-6">
|
||||
<h3 class="text-xl font-semibold text-gray-900 mb-3">8. GetCOXEventReference</h3>
|
||||
<p class="text-gray-700 mb-4">Get information about COX MySQL events and callbacks.</p>
|
||||
|
||||
<h4 class="font-semibold text-gray-900 mb-2">Parameters:</h4>
|
||||
<ul class="list-disc list-inside text-gray-700 mb-4 ml-4">
|
||||
<li><code class="bg-gray-100 px-2 py-1 rounded text-sm">event_name</code> (optional): Specific event name to
|
||||
look up</li>
|
||||
<li><code class="bg-gray-100 px-2 py-1 rounded text-sm">event_type</code> (optional): Filter by type (all,
|
||||
query, connection, transaction, error)</li>
|
||||
<li><code class="bg-gray-100 px-2 py-1 rounded text-sm">language</code> (optional): Code example language (lua
|
||||
or js)</li>
|
||||
</ul>
|
||||
|
||||
<h4 class="font-semibold text-gray-900 mb-2">Examples:</h4>
|
||||
<pre class="bg-gray-100 rounded p-3 text-sm mb-2"><code>What are the COX MySQL connection events?</code></pre>
|
||||
<pre class="bg-gray-100 rounded p-3 text-sm mb-2"><code>Show me all COX transaction events</code></pre>
|
||||
<pre class="bg-gray-100 rounded p-3 text-sm"><code>How do I handle query errors in COX?</code></pre>
|
||||
</div>
|
||||
|
||||
<!-- Tool 9: GetCOXFunction -->
|
||||
<div class="mb-8 border-l-4 border-indigo-500 pl-6">
|
||||
<h3 class="text-xl font-semibold text-gray-900 mb-3">9. GetCOXFunction</h3>
|
||||
<p class="text-gray-700 mb-4">Look up COX MySQL functions and methods.</p>
|
||||
|
||||
<h4 class="font-semibold text-gray-900 mb-2">Parameters:</h4>
|
||||
<ul class="list-disc list-inside text-gray-700 mb-4 ml-4">
|
||||
<li><code class="bg-gray-100 px-2 py-1 rounded text-sm">function_name</code> (required): COX function name
|
||||
(e.g., "MySQL.query", "MySQL.insert")</li>
|
||||
<li><code class="bg-gray-100 px-2 py-1 rounded text-sm">language</code> (optional): Code example language (lua
|
||||
or js)</li>
|
||||
</ul>
|
||||
|
||||
<h4 class="font-semibold text-gray-900 mb-2">Common COX Methods:</h4>
|
||||
<ul class="list-disc list-inside text-gray-700 mb-4 ml-4">
|
||||
<li>Query: <code class="bg-gray-100 px-2 py-1 rounded text-sm">MySQL.query</code>, <code
|
||||
class="bg-gray-100 px-2 py-1 rounded text-sm">MySQL.single</code>, <code
|
||||
class="bg-gray-100 px-2 py-1 rounded text-sm">MySQL.scalar</code></li>
|
||||
<li>Modify: <code class="bg-gray-100 px-2 py-1 rounded text-sm">MySQL.insert</code>, <code
|
||||
class="bg-gray-100 px-2 py-1 rounded text-sm">MySQL.update</code></li>
|
||||
<li>Transactions: <code class="bg-gray-100 px-2 py-1 rounded text-sm">MySQL.transaction.begin</code>, <code
|
||||
class="bg-gray-100 px-2 py-1 rounded text-sm">MySQL.transaction.commit</code></li>
|
||||
<li>Connection: <code class="bg-gray-100 px-2 py-1 rounded text-sm">MySQL.ready</code>, <code
|
||||
class="bg-gray-100 px-2 py-1 rounded text-sm">MySQL.getStatus</code></li>
|
||||
<li>Security: <code class="bg-gray-100 px-2 py-1 rounded text-sm">MySQL.prepare</code> (prepared statements)
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<h4 class="font-semibold text-gray-900 mb-2">Example:</h4>
|
||||
<pre
|
||||
class="bg-gray-100 rounded p-3 text-sm"><code>How do I query the database safely with prepared statements?</code></pre>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Available Resources -->
|
||||
<section class="mb-12">
|
||||
<h2 class="text-2xl font-bold text-gray-900 mb-6">Available Resources</h2>
|
||||
<p class="text-gray-700 mb-6">MCP Resources provide read-only reference documentation that AI assistants can access:</p>
|
||||
|
||||
<!-- Resource 1: Code Snippets -->
|
||||
<div class="mb-8 border-l-4 border-green-500 pl-6">
|
||||
<h3 class="text-xl font-semibold text-gray-900 mb-3">1. Code Snippets</h3>
|
||||
<p class="text-gray-700 mb-4">Common FiveM code patterns and snippets for quick reference.</p>
|
||||
<p class="text-gray-600 text-sm">URI: <code class="bg-gray-100 px-2 py-1 rounded text-sm">fivem://snippets/common</code></p>
|
||||
<p class="text-gray-700 mt-2">Includes patterns for distance checks, event handlers, threads with cleanup, database queries, and NUI callbacks in both Lua and JavaScript.</p>
|
||||
@forelse ($prompts as $index => $prompt)
|
||||
<div class="mb-6 border-l-4 border-purple-500 pl-6">
|
||||
<h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">{{ $index + 1 }}.
|
||||
{{ $prompt['name'] }}
|
||||
</h3>
|
||||
<p class="text-gray-700 dark:text-gray-300">{{ $prompt['description'] }}</p>
|
||||
</div>
|
||||
@empty
|
||||
<p class="text-gray-500 dark:text-gray-400 italic">No prompts configured.</p>
|
||||
@endforelse
|
||||
</section>
|
||||
|
||||
<!-- Resource 2: Best Practices -->
|
||||
<div class="mb-8 border-l-4 border-green-500 pl-6">
|
||||
<h3 class="text-xl font-semibold text-gray-900 mb-3">2. Best Practices</h3>
|
||||
<p class="text-gray-700 mb-4">FiveM development best practices and optimization tips.</p>
|
||||
<p class="text-gray-600 text-sm">URI: <code class="bg-gray-100 px-2 py-1 rounded text-sm">fivem://guides/best-practices</code></p>
|
||||
<p class="text-gray-700 mt-2">Covers performance optimization, security best practices, code organization, resource management, testing, and common pitfalls.</p>
|
||||
</div>
|
||||
<!-- Testing -->
|
||||
<section class="mb-12">
|
||||
<h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-4">Testing the Server</h2>
|
||||
<p class="text-gray-700 dark:text-gray-300 mb-4">You can test the MCP server locally using the inspector:
|
||||
</p>
|
||||
<pre
|
||||
class="bg-gray-900 text-gray-100 rounded p-4 overflow-x-auto"><code>php artisan mcp:inspector fivem</code></pre>
|
||||
<p class="text-gray-600 dark:text-gray-400 text-sm mt-2">This will open the MCP Inspector in your browser
|
||||
where
|
||||
you
|
||||
can test all the tools interactively.</p>
|
||||
</section>
|
||||
|
||||
<!-- Resource 4: Database Queries -->
|
||||
<div class="mb-8 border-l-4 border-green-500 pl-6">
|
||||
<h3 class="text-xl font-semibold text-gray-900 mb-3">4. Database Queries</h3>
|
||||
<p class="text-gray-700 mb-4">FiveM database query examples and common patterns for COX MySQL.</p>
|
||||
<p class="text-gray-600 text-sm">URI: <code
|
||||
class="bg-gray-100 px-2 py-1 rounded text-sm">fivem://guides/database-queries</code></p>
|
||||
<p class="text-gray-700 mt-2">Covers CRUD operations, prepared statements, transactions, async queries, error handling,
|
||||
performance tips, and common database patterns (SELECT, INSERT, UPDATE, DELETE).</p>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Development -->
|
||||
<section class="mb-12">
|
||||
<h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-4">Development</h2>
|
||||
|
||||
<!-- Available Prompts -->
|
||||
<section class="mb-12">
|
||||
<h2 class="text-2xl font-bold text-gray-900 mb-6">Available Prompts</h2>
|
||||
<p class="text-gray-700 mb-6">MCP Prompts are pre-built prompt templates for common tasks:</p>
|
||||
<h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-3">Adding New Tools</h3>
|
||||
<p class="text-gray-700 dark:text-gray-300 mb-4">1. Create a new tool class in <code
|
||||
class="bg-gray-100 dark:bg-gray-700 text-gray-900 dark:text-gray-100 px-2 py-1 rounded text-sm">app/Mcp/Tools/</code>:
|
||||
</p>
|
||||
|
||||
<!-- Prompt 1: Create New Resource -->
|
||||
<div class="mb-8 border-l-4 border-purple-500 pl-6">
|
||||
<h3 class="text-xl font-semibold text-gray-900 mb-3">1. Create New Resource</h3>
|
||||
<p class="text-gray-700 mb-4">Create a new FiveM resource with framework and language selection.</p>
|
||||
<p class="text-gray-600 text-sm">Parameters: resource_name, framework (standalone/esx/qbcore), language (lua/js)</p>
|
||||
</div>
|
||||
<pre class="bg-gray-900 text-gray-100 rounded p-4 overflow-x-auto mb-4"><code>@verbatim<?php
|
||||
|
||||
<!-- Prompt 2: Debug Issues -->
|
||||
<div class="mb-8 border-l-4 border-purple-500 pl-6">
|
||||
<h3 class="text-xl font-semibold text-gray-900 mb-3">2. Debug Issues</h3>
|
||||
<p class="text-gray-700 mb-4">Debug common FiveM issues and errors with detailed analysis.</p>
|
||||
<p class="text-gray-600 text-sm">Parameters: issue (description), error_message (from console)</p>
|
||||
</div>
|
||||
namespace App\Mcp\Tools;
|
||||
|
||||
<!-- Prompt 3: Optimize Performance -->
|
||||
<div class="mb-8 border-l-4 border-purple-500 pl-6">
|
||||
<h3 class="text-xl font-semibold text-gray-900 mb-3">3. Optimize Performance</h3>
|
||||
<p class="text-gray-700 mb-4">Optimize FiveM script performance with detailed suggestions.</p>
|
||||
<p class="text-gray-600 text-sm">Parameters: code (script to optimize), script_type (client/server/shared)</p>
|
||||
</div>
|
||||
use Illuminate\Contracts\JsonSchema\JsonSchema;
|
||||
use Laravel\Mcp\Request;
|
||||
use Laravel\Mcp\Response;
|
||||
use Laravel\Mcp\Server\Attributes\Description;
|
||||
use Laravel\Mcp\Server\Tool;
|
||||
|
||||
<!-- Prompt 4: Convert Language -->
|
||||
<div class="mb-8 border-l-4 border-purple-500 pl-6">
|
||||
<h3 class="text-xl font-semibold text-gray-900 mb-3">4. Convert Language</h3>
|
||||
<p class="text-gray-700 mb-4">Convert code between Lua and JavaScript with proper syntax.</p>
|
||||
<p class="text-gray-600 text-sm">Parameters: code, from (lua/js), to (lua/js)</p>
|
||||
</div>
|
||||
#[Description('Your tool description')]
|
||||
class YourTool extends Tool
|
||||
{
|
||||
public function handle(Request $request): Response
|
||||
{
|
||||
// Tool logic here
|
||||
return Response::text('Result');
|
||||
}
|
||||
|
||||
<!-- Prompt 5: Add Framework Integration -->
|
||||
<div class="mb-8 border-l-4 border-purple-500 pl-6">
|
||||
<h3 class="text-xl font-semibold text-gray-900 mb-3">5. Add Framework Integration</h3>
|
||||
<p class="text-gray-700 mb-4">Add ESX or QBCore framework integration to existing resource.</p>
|
||||
<p class="text-gray-600 text-sm">Parameters: code (current resource), current_framework, target_framework (esx/qbcore)</p>
|
||||
</div>
|
||||
</section>
|
||||
public function schema(JsonSchema $schema): array
|
||||
{
|
||||
return [
|
||||
'param' => $schema->string()->required(),
|
||||
];
|
||||
}
|
||||
}
|
||||
@endverbatim</code></pre>
|
||||
|
||||
<!-- Testing -->
|
||||
<section class="mb-12">
|
||||
<h2 class="text-2xl font-bold text-gray-900 mb-4">Testing the Server</h2>
|
||||
<p class="text-gray-700 mb-4">You can test the MCP server locally using the inspector:</p>
|
||||
<pre class="bg-gray-900 text-gray-100 rounded p-4 overflow-x-auto"><code>php artisan mcp:inspector fivem</code></pre>
|
||||
<p class="text-gray-600 text-sm mt-2">This will open the MCP Inspector in your browser where you can test all the tools interactively.</p>
|
||||
</section>
|
||||
<p class="text-gray-700 dark:text-gray-300 mb-4">2. Register the tool in <code
|
||||
class="bg-gray-100 dark:bg-gray-700 text-gray-900 dark:text-gray-100 px-2 py-1 rounded text-sm">app/Mcp/Servers/FiveMServer.php</code>:
|
||||
</p>
|
||||
|
||||
<!-- Development -->
|
||||
<section class="mb-12">
|
||||
<h2 class="text-2xl font-bold text-gray-900 mb-4">Development</h2>
|
||||
<pre class="bg-gray-900 text-gray-100 rounded p-4 overflow-x-auto mb-4"><code>@verbatimprotected array $tools = [
|
||||
// ... existing tools
|
||||
\App\Mcp\Tools\YourTool::class,
|
||||
];@endverbatim</code></pre>
|
||||
|
||||
<h3 class="text-xl font-semibold text-gray-900 mb-3">Adding New Tools</h3>
|
||||
<p class="text-gray-700 mb-4">1. Create a new tool class in <code class="bg-gray-100 px-2 py-1 rounded text-sm">app/Mcp/Tools/</code>:</p>
|
||||
<h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-3 mt-6">Code Formatting</h3>
|
||||
<p class="text-gray-700 dark:text-gray-300 mb-4">Format code with Laravel Pint:</p>
|
||||
<pre class="bg-gray-900 text-gray-100 rounded p-4 overflow-x-auto"><code>vendor/bin/pint</code></pre>
|
||||
</section>
|
||||
|
||||
<pre class="bg-gray-900 text-gray-100 rounded p-4 overflow-x-auto mb-4"><code><?php
|
||||
<!-- Frameworks & Languages -->
|
||||
<section class="mb-12">
|
||||
<h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-4">Supported Frameworks</h2>
|
||||
<ul class="list-disc list-inside text-gray-700 dark:text-gray-300 space-y-2 ml-4">
|
||||
<li><strong>Standalone:</strong> Basic FiveM resources without framework dependencies</li>
|
||||
<li><strong>ESX:</strong> ESX Framework (es_extended)</li>
|
||||
<li><strong>QBCore:</strong> QBCore Framework (qb-core)</li>
|
||||
</ul>
|
||||
|
||||
namespace App\Mcp\Tools;
|
||||
<h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-4 mt-6">Scripting Languages</h2>
|
||||
<p class="text-gray-700 dark:text-gray-300">Both Lua and JavaScript are fully supported across all tools and
|
||||
generators.</p>
|
||||
</section>
|
||||
|
||||
use Illuminate\Contracts\JsonSchema\JsonSchema;
|
||||
use Laravel\Mcp\Request;
|
||||
use Laravel\Mcp\Response;
|
||||
use Laravel\Mcp\Server\Attributes\Description;
|
||||
use Laravel\Mcp\Server\Tool;
|
||||
<!-- Resources -->
|
||||
<section class="mb-12">
|
||||
<h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-4">Resources</h2>
|
||||
<ul class="list-disc list-inside text-gray-700 dark:text-gray-300 space-y-2 ml-4">
|
||||
<li><a href="https://docs.fivem.net/docs/" class="link-gta">FiveM
|
||||
Documentation</a></li>
|
||||
<li><a href="https://docs.fivem.net/natives/" class="link-gta">FiveM
|
||||
Natives Reference</a></li>
|
||||
<li><a href="https://coxdocs.dev/" class="link-gta">COX
|
||||
MySQL
|
||||
Documentation</a> - Required
|
||||
for database operations</li>
|
||||
<li><a href="https://docs.qbcore.org/" class="link-gta">QBCore
|
||||
Documentation</a></li>
|
||||
<li><a href="https://laravel.com/docs/mcp" class="link-gta">Laravel
|
||||
MCP Documentation</a></li>
|
||||
<li><a href="https://modelcontextprotocol.io/" class="link-gta">Model
|
||||
Context Protocol</a></li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
#[Description('Your tool description')]
|
||||
class YourTool extends Tool
|
||||
{
|
||||
public function handle(Request $request): Response
|
||||
{
|
||||
// Tool logic here
|
||||
return Response::text('Result');
|
||||
}
|
||||
<!-- Contributing -->
|
||||
<section class="mb-12">
|
||||
<h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-4">Contributing</h2>
|
||||
<p class="text-gray-700 dark:text-gray-300 mb-4">Contributions are welcome! Areas for expansion:</p>
|
||||
<ul class="list-disc list-inside text-gray-700 dark:text-gray-300 space-y-2 ml-4">
|
||||
<li>More native functions in the database</li>
|
||||
<li>Additional framework support (vRP, etc.)</li>
|
||||
<li>More event types</li>
|
||||
<li>Advanced code generators</li>
|
||||
<li>Database query builders</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
public function schema(JsonSchema $schema): array
|
||||
{
|
||||
return [
|
||||
'param' => $schema->string()->required(),
|
||||
];
|
||||
}
|
||||
}</code></pre>
|
||||
|
||||
<p class="text-gray-700 mb-4">2. Register the tool in <code class="bg-gray-100 px-2 py-1 rounded text-sm">app/Mcp/Servers/FiveMServer.php</code>:</p>
|
||||
|
||||
<pre class="bg-gray-900 text-gray-100 rounded p-4 overflow-x-auto mb-4"><code>protected array $tools = [
|
||||
// ... existing tools
|
||||
\App\Mcp\Tools\YourTool::class,
|
||||
];</code></pre>
|
||||
|
||||
<h3 class="text-xl font-semibold text-gray-900 mb-3 mt-6">Code Formatting</h3>
|
||||
<p class="text-gray-700 mb-4">Format code with Laravel Pint:</p>
|
||||
<pre class="bg-gray-900 text-gray-100 rounded p-4 overflow-x-auto"><code>vendor/bin/pint</code></pre>
|
||||
</section>
|
||||
|
||||
<!-- Frameworks & Languages -->
|
||||
<section class="mb-12">
|
||||
<h2 class="text-2xl font-bold text-gray-900 mb-4">Supported Frameworks</h2>
|
||||
<ul class="list-disc list-inside text-gray-700 space-y-2 ml-4">
|
||||
<li><strong>Standalone:</strong> Basic FiveM resources without framework dependencies</li>
|
||||
<li><strong>ESX:</strong> ESX Framework (es_extended)</li>
|
||||
<li><strong>QBCore:</strong> QBCore Framework (qb-core)</li>
|
||||
</ul>
|
||||
|
||||
<h2 class="text-2xl font-bold text-gray-900 mb-4 mt-6">Scripting Languages</h2>
|
||||
<p class="text-gray-700">Both Lua and JavaScript are fully supported across all tools and generators.</p>
|
||||
</section>
|
||||
|
||||
<!-- Resources -->
|
||||
<section class="mb-12">
|
||||
<h2 class="text-2xl font-bold text-gray-900 mb-4">Resources</h2>
|
||||
<ul class="list-disc list-inside text-gray-700 space-y-2 ml-4">
|
||||
<li><a href="https://docs.fivem.net/docs/" class="text-indigo-600 hover:text-indigo-500">FiveM Documentation</a></li>
|
||||
<li><a href="https://docs.fivem.net/natives/" class="text-indigo-600 hover:text-indigo-500">FiveM Natives Reference</a></li>
|
||||
<li><a href="https://coxdocs.dev/" class="text-indigo-600 hover:text-indigo-500">COX MySQL Documentation</a> - Required
|
||||
for database operations</li>
|
||||
<li><a href="https://docs.qbcore.org/" class="text-indigo-600 hover:text-indigo-500">QBCore Documentation</a></li>
|
||||
<li><a href="https://laravel.com/docs/mcp" class="text-indigo-600 hover:text-indigo-500">Laravel MCP Documentation</a></li>
|
||||
<li><a href="https://modelcontextprotocol.io/" class="text-indigo-600 hover:text-indigo-500">Model Context Protocol</a></li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<!-- Contributing -->
|
||||
<section class="mb-12">
|
||||
<h2 class="text-2xl font-bold text-gray-900 mb-4">Contributing</h2>
|
||||
<p class="text-gray-700 mb-4">Contributions are welcome! Areas for expansion:</p>
|
||||
<ul class="list-disc list-inside text-gray-700 space-y-2 ml-4">
|
||||
<li>More native functions in the database</li>
|
||||
<li>Additional framework support (vRP, etc.)</li>
|
||||
<li>More event types</li>
|
||||
<li>Advanced code generators</li>
|
||||
<li>Database query builders</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<!-- License -->
|
||||
<section>
|
||||
<h2 class="text-2xl font-bold text-gray-900 mb-4">License</h2>
|
||||
<p class="text-gray-700">MIT License</p>
|
||||
</section>
|
||||
</div>
|
||||
<!-- License -->
|
||||
<section>
|
||||
<h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-4">License</h2>
|
||||
<p class="text-gray-700 dark:text-gray-300">MIT License</p>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const tabButtons = document.querySelectorAll('.tab-button');
|
||||
const tabContents = document.querySelectorAll('.tab-content');
|
||||
|
||||
tabButtons.forEach(button => {
|
||||
button.addEventListener('click', function() {
|
||||
const targetTab = this.dataset.tab;
|
||||
|
||||
// Remove active class from all buttons
|
||||
tabButtons.forEach(btn => {
|
||||
btn.classList.remove('active', 'border-indigo-500', 'text-indigo-600');
|
||||
btn.classList.add('border-transparent', 'text-gray-500');
|
||||
});
|
||||
|
||||
// Add active class to clicked button
|
||||
this.classList.remove('border-transparent', 'text-gray-500');
|
||||
this.classList.add('active', 'border-indigo-500', 'text-indigo-600');
|
||||
|
||||
// Hide all tab contents
|
||||
tabContents.forEach(content => {
|
||||
content.classList.add('hidden');
|
||||
content.classList.remove('active');
|
||||
});
|
||||
|
||||
// Show target tab content
|
||||
const targetContent = document.querySelector(`[data-tab-content="${targetTab}"]`);
|
||||
if (targetContent) {
|
||||
targetContent.classList.remove('hidden');
|
||||
targetContent.classList.add('active');
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
</div>
|
||||
@endsection
|
||||
@@ -1,213 +1,239 @@
|
||||
@extends('docs.layout')
|
||||
@extends('layouts.app')
|
||||
|
||||
@section('title', 'FiveM MCP Server')
|
||||
|
||||
@section('content')
|
||||
<div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
|
||||
<!-- Hero Section -->
|
||||
<div class="text-center mb-12">
|
||||
<h1 class="text-4xl font-extrabold text-gray-900 sm:text-5xl sm:tracking-tight lg:text-6xl">
|
||||
FiveM Development MCP Server
|
||||
</h1>
|
||||
<p class="mt-5 max-w-xl mx-auto text-xl text-gray-500">
|
||||
A comprehensive Model Context Protocol server for FiveM development with 5 tools, 3 resources, and 5 prompts.
|
||||
</p>
|
||||
</div>
|
||||
<div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
|
||||
<!-- Hero Section -->
|
||||
<div class="text-center mb-12">
|
||||
<h1 class="text-4xl font-extrabold text-gray-900 dark:text-white sm:text-5xl sm:tracking-tight lg:text-6xl">
|
||||
FiveM Development MCP Server
|
||||
</h1>
|
||||
<p class="mt-5 max-w-xl mx-auto text-xl text-gray-500 dark:text-gray-400">
|
||||
A comprehensive Model Context Protocol server for FiveM development with 5 tools, 3 resources, and 5
|
||||
prompts.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Features Grid -->
|
||||
<div class="mt-12">
|
||||
<h2 class="text-3xl font-extrabold text-gray-900 mb-8">Features</h2>
|
||||
<div class="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
|
||||
<!-- Documentation Search -->
|
||||
<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="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>
|
||||
<!-- Features Grid -->
|
||||
<div class="mt-12">
|
||||
<h2 class="text-3xl font-extrabold text-gray-900 dark:text-white mb-8">Features</h2>
|
||||
<div class="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
|
||||
<!-- Documentation Search -->
|
||||
<div class="bg-white dark:bg-gray-800 overflow-hidden shadow rounded-lg">
|
||||
<div class="px-4 py-5 sm:p-6">
|
||||
<div class="flex items-center">
|
||||
<div class="shrink-0 bg-gta-orange 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>
|
||||
</div>
|
||||
<div class="ml-5">
|
||||
<h3 class="text-lg font-medium text-gray-900 dark:text-white">Documentation Search</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ml-5">
|
||||
<h3 class="text-lg font-medium text-gray-900">Documentation Search</h3>
|
||||
<div class="mt-4">
|
||||
<p class="text-sm text-gray-500 dark:text-gray-400">
|
||||
Search FiveM documentation by topic and category. Get direct links to relevant
|
||||
documentation.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-4">
|
||||
<p class="text-sm text-gray-500">
|
||||
Search FiveM documentation by topic and category. Get direct links to relevant documentation.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Native Functions -->
|
||||
<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="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>
|
||||
<!-- Native Functions -->
|
||||
<div class="bg-white dark:bg-gray-800 overflow-hidden shadow rounded-lg">
|
||||
<div class="px-4 py-5 sm:p-6">
|
||||
<div class="flex items-center">
|
||||
<div class="shrink-0 bg-gta-orange 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>
|
||||
</div>
|
||||
<div class="ml-5">
|
||||
<h3 class="text-lg font-medium text-gray-900 dark:text-white">Native Functions</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ml-5">
|
||||
<h3 class="text-lg font-medium text-gray-900">Native Functions</h3>
|
||||
<div class="mt-4">
|
||||
<p class="text-sm text-gray-500 dark:text-gray-400">
|
||||
Look up GTA5/FiveM native functions with signatures, parameters, and code examples.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-4">
|
||||
<p class="text-sm text-gray-500">
|
||||
Look up GTA5/FiveM native functions with signatures, parameters, and code examples.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Manifest Generator -->
|
||||
<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="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>
|
||||
<!-- Manifest Generator -->
|
||||
<div class="bg-white dark:bg-gray-800 overflow-hidden shadow rounded-lg">
|
||||
<div class="px-4 py-5 sm:p-6">
|
||||
<div class="flex items-center">
|
||||
<div class="shrink-0 bg-gta-orange 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>
|
||||
</div>
|
||||
<div class="ml-5">
|
||||
<h3 class="text-lg font-medium text-gray-900 dark:text-white">Manifest Generator</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ml-5">
|
||||
<h3 class="text-lg font-medium text-gray-900">Manifest Generator</h3>
|
||||
<div class="mt-4">
|
||||
<p class="text-sm text-gray-500 dark:text-gray-400">
|
||||
Generate fxmanifest.lua files automatically for any framework and scripting language.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-4">
|
||||
<p class="text-sm text-gray-500">
|
||||
Generate fxmanifest.lua files automatically for any framework and scripting language.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Event Reference -->
|
||||
<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="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>
|
||||
<!-- Event Reference -->
|
||||
<div class="bg-white dark:bg-gray-800 overflow-hidden shadow rounded-lg">
|
||||
<div class="px-4 py-5 sm:p-6">
|
||||
<div class="flex items-center">
|
||||
<div class="shrink-0 bg-gta-orange 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>
|
||||
</div>
|
||||
<div class="ml-5">
|
||||
<h3 class="text-lg font-medium text-gray-900 dark:text-white">Event Reference</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ml-5">
|
||||
<h3 class="text-lg font-medium text-gray-900">Event Reference</h3>
|
||||
<div class="mt-4">
|
||||
<p class="text-sm text-gray-500 dark:text-gray-400">
|
||||
Complete database of FiveM events including core, ESX, and QBCore events with examples.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-4">
|
||||
<p class="text-sm text-gray-500">
|
||||
Complete database of FiveM events including core, ESX, and QBCore events with examples.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Boilerplate Generator -->
|
||||
<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="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>
|
||||
<!-- Boilerplate Generator -->
|
||||
<div class="bg-white dark:bg-gray-800 overflow-hidden shadow rounded-lg">
|
||||
<div class="px-4 py-5 sm:p-6">
|
||||
<div class="flex items-center">
|
||||
<div class="shrink-0 bg-gta-orange 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>
|
||||
</div>
|
||||
<div class="ml-5">
|
||||
<h3 class="text-lg font-medium text-gray-900 dark:text-white">Boilerplate Generator</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ml-5">
|
||||
<h3 class="text-lg font-medium text-gray-900">Boilerplate Generator</h3>
|
||||
<div class="mt-4">
|
||||
<p class="text-sm text-gray-500 dark:text-gray-400">
|
||||
Generate complete resource structures with client, server, config, and optional NUI files.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-4">
|
||||
<p class="text-sm text-gray-500">
|
||||
Generate complete resource structures with client, server, config, and optional NUI files.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Framework Support -->
|
||||
<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="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>
|
||||
<!-- Framework Support -->
|
||||
<div class="bg-white dark:bg-gray-800 overflow-hidden shadow rounded-lg">
|
||||
<div class="px-4 py-5 sm:p-6">
|
||||
<div class="flex items-center">
|
||||
<div class="shrink-0 bg-gta-orange 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>
|
||||
</div>
|
||||
<div class="ml-5">
|
||||
<h3 class="text-lg font-medium text-gray-900 dark:text-white">Framework Support</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ml-5">
|
||||
<h3 class="text-lg font-medium text-gray-900">Framework Support</h3>
|
||||
<div class="mt-4">
|
||||
<p class="text-sm text-gray-500 dark:text-gray-400">
|
||||
Full support for Standalone, ESX, and QBCore frameworks in both Lua and JavaScript.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-4">
|
||||
<p class="text-sm text-gray-500">
|
||||
Full support for Standalone, ESX, and QBCore frameworks in both Lua and JavaScript.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Quick Actions -->
|
||||
<div class="mt-16 bg-indigo-700 rounded-lg shadow-xl overflow-hidden">
|
||||
<div class="px-6 py-12 sm:px-12">
|
||||
<div class="text-center">
|
||||
<h2 class="text-3xl font-extrabold text-white">Ready to get started?</h2>
|
||||
<p class="mt-4 text-lg text-indigo-100">
|
||||
Set up the MCP server in just 5 minutes with our quick start guide.
|
||||
</p>
|
||||
<div class="mt-8 flex justify-center space-x-4">
|
||||
<a href="{{ route('docs.quickstart') }}" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-indigo-700 bg-white hover:bg-indigo-50">
|
||||
Quick Start Guide
|
||||
</a>
|
||||
<a href="{{ route('docs.documentation') }}" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-500 hover:bg-indigo-600">
|
||||
Full Documentation
|
||||
</a>
|
||||
<!-- Quick Actions -->
|
||||
<div class="mt-16 bg-gray-900 dark:bg-black border border-gta-orange rounded-lg shadow-xl overflow-hidden">
|
||||
<div class="px-6 py-12 sm:px-12">
|
||||
<div class="text-center">
|
||||
<h2 class="text-3xl font-extrabold text-white">Ready to get started?</h2>
|
||||
<p class="mt-4 text-lg text-gray-200 dark:text-gray-300">
|
||||
Set up the MCP server in just 5 minutes with our quick start guide.
|
||||
</p>
|
||||
<div class="mt-8 flex justify-center space-x-4">
|
||||
<a href="{{ route('docs.quickstart') }}"
|
||||
class="btn-gta-secondary inline-flex items-center px-6 py-3 text-base">
|
||||
Quick Start Guide
|
||||
</a>
|
||||
<a href="{{ route('docs.documentation') }}"
|
||||
class="btn-gta-primary inline-flex items-center px-6 py-3 text-base">
|
||||
Full Documentation
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Resources -->
|
||||
<div class="mt-16">
|
||||
<h2 class="text-3xl font-extrabold text-gray-900 mb-8">Resources</h2>
|
||||
<div class="grid grid-cols-1 gap-6 sm:grid-cols-2">
|
||||
<div class="bg-white shadow rounded-lg p-6">
|
||||
<h3 class="text-lg font-medium text-gray-900 mb-4">MCP Server Configuration</h3>
|
||||
<p class="text-sm text-gray-500 mb-4">
|
||||
To connect to the FiveM MCP server, use the following configuration in your MCP client:
|
||||
</p>
|
||||
<pre class="bg-gray-50 rounded p-4 text-sm overflow-x-auto"><code>{
|
||||
"servers": {
|
||||
"fivem": {
|
||||
"url": "{{ route('fivem') }}",
|
||||
"type": "http"
|
||||
<!-- Resources -->
|
||||
<div class="mt-16">
|
||||
<h2 class="text-3xl font-extrabold text-gray-900 dark:text-white mb-8">Resources</h2>
|
||||
<div class="grid grid-cols-1 gap-6 sm:grid-cols-2">
|
||||
<div class="bg-white dark:bg-gray-800 shadow rounded-lg p-6">
|
||||
<h3 class="text-lg font-medium text-gray-900 dark:text-white mb-4">MCP Server Configuration</h3>
|
||||
<p class="text-sm text-gray-500 dark:text-gray-400 mb-4">
|
||||
To connect to the FiveM MCP server, use the following configuration in your MCP client:
|
||||
</p>
|
||||
<pre
|
||||
class="bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 rounded p-4 text-sm overflow-x-auto"><code>@verbatim{
|
||||
"servers": {
|
||||
"fivem": {
|
||||
"url": "{{ route('fivem') }}",
|
||||
"type": "http"
|
||||
}
|
||||
}
|
||||
}
|
||||
}</code></pre>
|
||||
</div>
|
||||
<div class="bg-white shadow rounded-lg p-6">
|
||||
<h3 class="text-lg font-medium text-gray-900 mb-4">External Links</h3>
|
||||
<ul class="space-y-2 text-sm">
|
||||
<li>
|
||||
<a href="https://docs.fivem.net/docs/" class="text-indigo-600 hover:text-indigo-500">FiveM Documentation</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://docs.fivem.net/natives/" class="text-indigo-600 hover:text-indigo-500">FiveM Natives Reference</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://docs.qbcore.org/" class="text-indigo-600 hover:text-indigo-500">QBCore Documentation</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://coxdocs.dev/" class="text-indigo-600 hover:text-indigo-500">COX MySQL Documentation</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://laravel.com/docs/mcp" class="text-indigo-600 hover:text-indigo-500">Laravel MCP Documentation</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://modelcontextprotocol.io/" class="text-indigo-600 hover:text-indigo-500">Model Context Protocol</a>
|
||||
</li>
|
||||
</ul>
|
||||
}@endverbatim</code></pre>
|
||||
</div>
|
||||
<div class="bg-white dark:bg-gray-800 shadow rounded-lg p-6">
|
||||
<h3 class="text-lg font-medium text-gray-900 dark:text-white mb-4">External Links</h3>
|
||||
<ul class="space-y-2 text-sm">
|
||||
<li>
|
||||
<a href="https://docs.fivem.net/docs/"
|
||||
class="link-gta">FiveM
|
||||
Documentation</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://docs.fivem.net/natives/"
|
||||
class="link-gta">FiveM
|
||||
Natives Reference</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://docs.qbcore.org/"
|
||||
class="link-gta">QBCore
|
||||
Documentation</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://coxdocs.dev/"
|
||||
class="link-gta">COX
|
||||
MySQL Documentation</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://laravel.com/docs/mcp"
|
||||
class="link-gta">Laravel
|
||||
MCP Documentation</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://modelcontextprotocol.io/"
|
||||
class="link-gta">Model
|
||||
Context Protocol</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
@@ -1,50 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="h-full">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<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'])
|
||||
</head>
|
||||
<body class="h-full bg-gray-50">
|
||||
<div class="min-h-full">
|
||||
<!-- Navigation -->
|
||||
<nav class="bg-white shadow-sm">
|
||||
<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="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="{{ 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="{{ 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="{{ 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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Main Content -->
|
||||
<main>
|
||||
@yield('content')
|
||||
</main>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="bg-white border-t border-gray-200 mt-12">
|
||||
<div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
|
||||
<p class="text-center text-sm text-gray-500">
|
||||
Built with <a href="https://laravel.com/docs/mcp" class="text-indigo-600 hover:text-indigo-500">Laravel MCP</a> for <a href="https://docs.fivem.net" class="text-indigo-600 hover:text-indigo-500">FiveM</a> development
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,380 +1,388 @@
|
||||
@extends('docs.layout')
|
||||
@extends('layouts.app')
|
||||
|
||||
@section('title', 'Quick Start Guide - FiveM MCP Server')
|
||||
|
||||
@section('content')
|
||||
<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>
|
||||
<div class="max-w-4xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
|
||||
<div class="bg-white dark:bg-gray-800 shadow rounded-lg p-8">
|
||||
<h1 class="text-3xl font-extrabold text-gray-900 dark:text-white mb-6">FiveM MCP Quick Start Guide</h1>
|
||||
|
||||
<!-- What is this -->
|
||||
<section class="mb-8">
|
||||
<h2 class="text-2xl font-bold text-gray-900 mb-4">What is this?</h2>
|
||||
<p class="text-gray-700 mb-4">
|
||||
This MCP server gives AI assistants (like Claude) access to FiveM development tools including:
|
||||
</p>
|
||||
<ul class="list-disc list-inside text-gray-700 space-y-2 ml-4">
|
||||
<li>Documentation search</li>
|
||||
<li>Native function lookups</li>
|
||||
<li>Manifest generation</li>
|
||||
<li>Event references</li>
|
||||
<li>Resource boilerplate generation</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<!-- Choose Setup Type -->
|
||||
<section class="mb-8">
|
||||
<h2 class="text-2xl font-bold text-gray-900 mb-4">Choose Your Setup</h2>
|
||||
|
||||
<!-- Tab Buttons -->
|
||||
<div class="border-b border-gray-200 mb-6">
|
||||
<nav class="-mb-px flex space-x-8">
|
||||
<button
|
||||
data-tab="remote"
|
||||
class="tab-button active border-b-2 border-indigo-500 py-4 px-1 text-center text-sm font-medium text-indigo-600"
|
||||
>
|
||||
<span class="flex items-center">
|
||||
<span class="mr-2">🌐</span>
|
||||
Remote Server
|
||||
<span class="ml-2 inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-indigo-100 text-indigo-800">
|
||||
Recommended
|
||||
</span>
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
data-tab="local"
|
||||
class="tab-button border-b-2 border-transparent py-4 px-1 text-center text-sm font-medium text-gray-500 hover:text-gray-700 hover:border-gray-300"
|
||||
>
|
||||
<span class="flex items-center">
|
||||
<span class="mr-2">💻</span>
|
||||
Local Installation
|
||||
</span>
|
||||
</button>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<!-- Tab Content Container -->
|
||||
<div class="tab-content-container">
|
||||
<!-- Remote Setup Tab -->
|
||||
<div data-tab-content="remote" class="tab-content active">
|
||||
<div class="bg-indigo-50 border-l-4 border-indigo-500 p-4 mb-6">
|
||||
<p class="text-sm text-indigo-800">
|
||||
<strong>Easy setup!</strong> Connect to a hosted MCP server. Works from anywhere without any local installation.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<p class="text-gray-700 mb-6">
|
||||
If someone is hosting the FiveM MCP server for you, follow these steps to connect:
|
||||
</p>
|
||||
|
||||
<!-- Step 1 -->
|
||||
<div class="mb-6">
|
||||
<h3 class="text-xl font-semibold text-gray-900 mb-3">1. Get the Server URL</h3>
|
||||
<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/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 -->
|
||||
<div class="mb-6">
|
||||
<h3 class="text-xl font-semibold text-gray-900 mb-3">2. Configure Claude Desktop</h3>
|
||||
<p class="text-gray-700 mb-3">Edit your Claude Desktop configuration file:</p>
|
||||
<ul class="list-disc list-inside text-gray-700 mb-3 ml-4">
|
||||
<li><strong>macOS:</strong> <code class="bg-gray-100 px-2 py-1 rounded text-sm">~/Library/Application Support/Claude/claude_desktop_config.json</code></li>
|
||||
<li><strong>Windows:</strong> <code class="bg-gray-100 px-2 py-1 rounded text-sm">%APPDATA%\Claude\claude_desktop_config.json</code></li>
|
||||
</ul>
|
||||
|
||||
<p class="text-gray-700 mb-3">Add this configuration (replace the URL with your actual server URL):</p>
|
||||
<pre class="bg-gray-900 text-gray-100 rounded p-4 overflow-x-auto"><code>{
|
||||
"mcpServers": {
|
||||
"fivem": {
|
||||
"url": "https://your-domain.com/fivem"
|
||||
}
|
||||
}
|
||||
}</code></pre>
|
||||
|
||||
<p class="text-gray-700 mb-3 mt-6"><strong>For VSCode (Cline Extension):</strong></p>
|
||||
<p class="text-gray-700 mb-3">Edit your VSCode <code class="bg-gray-100 px-2 py-1 rounded text-sm">settings.json</code>:</p>
|
||||
<pre class="bg-gray-900 text-gray-100 rounded p-4 overflow-x-auto"><code>{
|
||||
"mcp": {
|
||||
"servers": {
|
||||
"fivem": {
|
||||
"url": "https://your-domain.com/fivem"
|
||||
}
|
||||
}
|
||||
}
|
||||
}</code></pre>
|
||||
</div>
|
||||
|
||||
<!-- Step 3 -->
|
||||
<div class="mb-6">
|
||||
<h3 class="text-xl font-semibold text-gray-900 mb-3">3. Restart Claude Desktop</h3>
|
||||
<p class="text-gray-700">
|
||||
Completely quit and restart Claude Desktop for changes to take effect.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Step 4 -->
|
||||
<div class="mb-6">
|
||||
<h3 class="text-xl font-semibold text-gray-900 mb-3">4. Verify Connection</h3>
|
||||
<p class="text-gray-700">
|
||||
In Claude Desktop, you should see a small 🔌 icon or indication that the FiveM MCP server is connected.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-green-50 border-l-4 border-green-500 p-4">
|
||||
<p class="text-sm text-green-800">
|
||||
<strong>That's it!</strong> You're now connected to the remote MCP server and can start using FiveM development tools with Claude.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Local Setup Tab -->
|
||||
<div data-tab-content="local" class="tab-content hidden">
|
||||
<div class="bg-gray-50 border-l-4 border-gray-400 p-4 mb-6">
|
||||
<p class="text-sm text-gray-700">
|
||||
<strong>Advanced setup.</strong> Run the MCP server on your own machine. Requires PHP and Laravel installation.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<p class="text-gray-700 mb-6">
|
||||
If you want to run the MCP server on your own machine:
|
||||
</p>
|
||||
|
||||
<!-- Step 1 -->
|
||||
<div class="mb-6">
|
||||
<h3 class="text-xl font-semibold text-gray-900 mb-3">1. Test the Server</h3>
|
||||
<p class="text-gray-700 mb-3">First, verify the server works:</p>
|
||||
<pre class="bg-gray-900 text-gray-100 rounded p-4 overflow-x-auto"><code>cd /path/to/fivem-mcp
|
||||
php artisan mcp:inspector fivem</code></pre>
|
||||
<p class="text-gray-600 text-sm mt-2">This opens a web inspector where you can test all tools.</p>
|
||||
</div>
|
||||
|
||||
<!-- Step 2 -->
|
||||
<div class="mb-6">
|
||||
<h3 class="text-xl font-semibold text-gray-900 mb-3">2. Configure Claude Desktop</h3>
|
||||
<p class="text-gray-700 mb-3">Edit your Claude Desktop configuration file:</p>
|
||||
<ul class="list-disc list-inside text-gray-700 mb-3 ml-4">
|
||||
<li><strong>macOS:</strong> <code class="bg-gray-100 px-2 py-1 rounded text-sm">~/Library/Application Support/Claude/claude_desktop_config.json</code></li>
|
||||
<li><strong>Windows:</strong> <code class="bg-gray-100 px-2 py-1 rounded text-sm">%APPDATA%\Claude\claude_desktop_config.json</code></li>
|
||||
</ul>
|
||||
|
||||
<p class="text-gray-700 mb-3">Add this configuration:</p>
|
||||
<pre class="bg-gray-900 text-gray-100 rounded p-4 overflow-x-auto mb-4"><code>{
|
||||
"mcpServers": {
|
||||
"fivem": {
|
||||
"command": "php",
|
||||
"args": [
|
||||
"artisan",
|
||||
"mcp:start",
|
||||
"fivem"
|
||||
],
|
||||
"cwd": "/path/to/fivem-mcp"
|
||||
}
|
||||
}
|
||||
}</code></pre>
|
||||
|
||||
<p class="text-gray-700 mb-3"><strong>Or use the full PHP path (e.g., for Herd):</strong></p>
|
||||
<pre class="bg-gray-900 text-gray-100 rounded p-4 overflow-x-auto"><code>{
|
||||
"mcpServers": {
|
||||
"fivem": {
|
||||
"command": "/path/to/php",
|
||||
"args": [
|
||||
"/path/to/fivem-mcp/artisan",
|
||||
"mcp:start",
|
||||
"fivem"
|
||||
]
|
||||
}
|
||||
}
|
||||
}</code></pre>
|
||||
|
||||
<p class="text-gray-700 mb-3 mt-6"><strong>For VSCode (Cline Extension):</strong></p>
|
||||
<p class="text-gray-700 mb-3">Edit your VSCode <code class="bg-gray-100 px-2 py-1 rounded text-sm">settings.json</code>:</p>
|
||||
<pre class="bg-gray-900 text-gray-100 rounded p-4 overflow-x-auto mb-4"><code>{
|
||||
"mcp": {
|
||||
"servers": {
|
||||
"fivem": {
|
||||
"command": "php",
|
||||
"args": ["artisan", "mcp:start", "fivem"],
|
||||
"cwd": "/path/to/fivem-mcp"
|
||||
}
|
||||
}
|
||||
}
|
||||
}</code></pre>
|
||||
|
||||
<p class="text-gray-700 mb-3"><strong>Or with full paths:</strong></p>
|
||||
<pre class="bg-gray-900 text-gray-100 rounded p-4 overflow-x-auto"><code>{
|
||||
"mcp": {
|
||||
"servers": {
|
||||
"fivem": {
|
||||
"command": "/path/to/php",
|
||||
"args": ["/path/to/fivem-mcp/artisan", "mcp:start", "fivem"]
|
||||
}
|
||||
}
|
||||
}
|
||||
}</code></pre>
|
||||
</div>
|
||||
|
||||
<!-- Step 3 -->
|
||||
<div class="mb-6">
|
||||
<h3 class="text-xl font-semibold text-gray-900 mb-3">3. Restart Claude Desktop</h3>
|
||||
<p class="text-gray-700">
|
||||
Completely quit and restart Claude Desktop for changes to take effect.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Step 4 -->
|
||||
<div class="mb-6">
|
||||
<h3 class="text-xl font-semibold text-gray-900 mb-3">4. Verify Connection</h3>
|
||||
<p class="text-gray-700">
|
||||
In Claude Desktop, you should see a small 🔌 icon or indication that the FiveM MCP server is connected.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Quick Examples -->
|
||||
<section class="mb-8">
|
||||
<h2 class="text-2xl font-bold text-gray-900 mb-4">Quick Examples</h2>
|
||||
<p class="text-gray-700 mb-4">Once connected, try these prompts in Claude:</p>
|
||||
|
||||
<div class="space-y-4">
|
||||
<div class="border-l-4 border-indigo-500 pl-4">
|
||||
<h4 class="font-semibold text-gray-900 mb-2">Example 1: Search Documentation</h4>
|
||||
<pre class="bg-gray-100 rounded p-3 text-sm"><code>Search FiveM docs for "state bags"</code></pre>
|
||||
</div>
|
||||
|
||||
<div class="border-l-4 border-indigo-500 pl-4">
|
||||
<h4 class="font-semibold text-gray-900 mb-2">Example 2: Look Up a Native</h4>
|
||||
<pre class="bg-gray-100 rounded p-3 text-sm"><code>What does the GetPlayerPed native function do? Show me an example.</code></pre>
|
||||
</div>
|
||||
|
||||
<div class="border-l-4 border-indigo-500 pl-4">
|
||||
<h4 class="font-semibold text-gray-900 mb-2">Example 3: Generate a Manifest</h4>
|
||||
<pre class="bg-gray-100 rounded p-3 text-sm"><code>Generate a fxmanifest.lua for my resource called "vehicle-shop" using ESX framework</code></pre>
|
||||
</div>
|
||||
|
||||
<div class="border-l-4 border-indigo-500 pl-4">
|
||||
<h4 class="font-semibold text-gray-900 mb-2">Example 4: List Events</h4>
|
||||
<pre class="bg-gray-100 rounded p-3 text-sm"><code>Show me all FiveM core server events</code></pre>
|
||||
</div>
|
||||
|
||||
<div class="border-l-4 border-indigo-500 pl-4">
|
||||
<h4 class="font-semibold text-gray-900 mb-2">Example 5: Create Boilerplate</h4>
|
||||
<pre class="bg-gray-100 rounded p-3 text-sm"><code>Create a complete resource structure for a QBCore script called "bank-heist" with NUI</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Troubleshooting -->
|
||||
<section class="mb-8">
|
||||
<h2 class="text-2xl font-bold text-gray-900 mb-4">Troubleshooting</h2>
|
||||
|
||||
<div class="mb-6">
|
||||
<h3 class="text-xl font-semibold text-gray-900 mb-3">Server Not Connecting</h3>
|
||||
<ol class="list-decimal list-inside text-gray-700 space-y-3 ml-4">
|
||||
<li>
|
||||
<strong>Check PHP Path:</strong> Make sure the PHP path in your config is correct
|
||||
<pre class="bg-gray-900 text-gray-100 rounded p-3 mt-2 overflow-x-auto"><code>which php
|
||||
# or for Herd:
|
||||
ls -la "~/Library/Application Support/Herd/bin/"</code></pre>
|
||||
</li>
|
||||
<li>
|
||||
<strong>Test Manually:</strong> Run the server command directly
|
||||
<pre class="bg-gray-900 text-gray-100 rounded p-3 mt-2 overflow-x-auto"><code>cd /path/to/fivem-mcp
|
||||
php artisan mcp:start fivem</code></pre>
|
||||
</li>
|
||||
<li>
|
||||
<strong>Check Logs:</strong> Look at Claude Desktop logs
|
||||
<ul class="list-disc list-inside ml-6 mt-2">
|
||||
<li>macOS: <code class="bg-gray-100 px-2 py-1 rounded text-sm">~/Library/Logs/Claude/</code></li>
|
||||
<li>Windows: Check Event Viewer or app logs</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<div class="mb-6">
|
||||
<h3 class="text-xl font-semibold text-gray-900 mb-3">Permission Issues</h3>
|
||||
<p class="text-gray-700 mb-3">If you get permission errors:</p>
|
||||
<pre class="bg-gray-900 text-gray-100 rounded p-4 overflow-x-auto"><code>cd /path/to/fivem-mcp
|
||||
chmod +x artisan</code></pre>
|
||||
</div>
|
||||
|
||||
<div class="mb-6">
|
||||
<h3 class="text-xl font-semibold text-gray-900 mb-3">Path Issues</h3>
|
||||
<p class="text-gray-700">
|
||||
Make sure to use <strong>absolute paths</strong> in your config, not relative paths.
|
||||
<!-- What is this -->
|
||||
<section class="mb-8">
|
||||
<h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-4">What is this?</h2>
|
||||
<p class="text-gray-700 dark:text-gray-300 mb-4">
|
||||
This MCP server gives AI assistants (like Claude) access to FiveM development tools including:
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
<ul class="list-disc list-inside text-gray-700 dark:text-gray-300 space-y-2 ml-4">
|
||||
<li>Documentation search</li>
|
||||
<li>Native function lookups</li>
|
||||
<li>Manifest generation</li>
|
||||
<li>Event references</li>
|
||||
<li>Resource boilerplate generation</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<!-- Next Steps -->
|
||||
<section class="mb-8">
|
||||
<h2 class="text-2xl font-bold text-gray-900 mb-4">Next Steps</h2>
|
||||
<ul class="list-disc list-inside text-gray-700 space-y-2 ml-4">
|
||||
<li><a href="{{ route('docs.documentation') }}" class="text-indigo-600 hover:text-indigo-500">Read the full documentation</a></li>
|
||||
<li>Explore all 5 tools in the MCP Inspector</li>
|
||||
<li>Try creating a complete FiveM resource with AI assistance</li>
|
||||
<li>Contribute new tools or improve existing ones</li>
|
||||
</ul>
|
||||
</section>
|
||||
<!-- Choose Setup Type -->
|
||||
<section class="mb-8">
|
||||
<h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-4">Choose Your Setup</h2>
|
||||
|
||||
<!-- Support -->
|
||||
<section>
|
||||
<h2 class="text-2xl font-bold text-gray-900 mb-4">Support</h2>
|
||||
<p class="text-gray-700 mb-3">For issues:</p>
|
||||
<ol class="list-decimal list-inside text-gray-700 space-y-2 ml-4">
|
||||
<li>Check <a href="https://laravel.com/docs/mcp" class="text-indigo-600 hover:text-indigo-500">Laravel MCP Documentation</a></li>
|
||||
<li>Check <a href="https://docs.fivem.net/" class="text-indigo-600 hover:text-indigo-500">FiveM Documentation</a></li>
|
||||
<li>Review server logs</li>
|
||||
<li>Open a GitHub issue</li>
|
||||
</ol>
|
||||
<p class="text-gray-700 mt-6 text-lg font-semibold">Happy coding! 🎮</p>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Tab Buttons -->
|
||||
<div class="border-b border-gray-200 dark:border-gray-700 mb-6">
|
||||
<nav class="-mb-px flex space-x-8">
|
||||
<button data-tab="remote"
|
||||
class="transition-all duration-200 ease-in-out active border-b-2 border-gta-orange py-4 px-1 text-center text-sm font-medium text-gta-orange">
|
||||
<span class="flex items-center">
|
||||
<span class="mr-2">🌐</span>
|
||||
Remote Server
|
||||
<span
|
||||
class="ml-2 inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 dark:bg-gray-700 border border-gta-orange text-gta-orange">
|
||||
Recommended
|
||||
</span>
|
||||
</span>
|
||||
</button>
|
||||
<button data-tab="local"
|
||||
class="transition-all duration-200 ease-in-out border-b-2 border-transparent py-4 px-1 text-center text-sm font-medium text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 hover:border-gray-300 dark:hover:border-gray-600">
|
||||
<span class="flex items-center">
|
||||
<span class="mr-2">💻</span>
|
||||
Local Installation
|
||||
</span>
|
||||
</button>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const tabButtons = document.querySelectorAll('.tab-button');
|
||||
const tabContents = document.querySelectorAll('.tab-content');
|
||||
<!-- Tab Content Container -->
|
||||
<div class="tab-content-container">
|
||||
<!-- Remote Setup Tab -->
|
||||
<div data-tab-content="remote" class="animate-fade-in active">
|
||||
<div class="bg-gray-100 dark:bg-gray-700/30 border-l-4 border-gta-orange p-4 mb-6">
|
||||
<p class="text-sm text-gray-800 dark:text-gray-200">
|
||||
<strong>Easy setup!</strong> Connect to a hosted MCP server. Works from anywhere without any
|
||||
local
|
||||
installation.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
tabButtons.forEach(button => {
|
||||
button.addEventListener('click', function() {
|
||||
const targetTab = this.dataset.tab;
|
||||
<p class="text-gray-700 dark:text-gray-300 mb-6">
|
||||
If someone is hosting the FiveM MCP server for you, follow these steps to connect:
|
||||
</p>
|
||||
|
||||
// Remove active class from all buttons
|
||||
tabButtons.forEach(btn => {
|
||||
btn.classList.remove('active', 'border-indigo-500', 'text-indigo-600');
|
||||
btn.classList.add('border-transparent', 'text-gray-500');
|
||||
});
|
||||
<!-- Step 1 -->
|
||||
<div class="mb-6">
|
||||
<h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-3">1. Get the Server URL</h3>
|
||||
<p class="text-gray-700 dark:text-gray-300 mb-3">
|
||||
Ask your server administrator for the MCP server URL. It will look like:
|
||||
</p>
|
||||
<pre
|
||||
class="bg-gray-100 dark:bg-gray-700 text-gray-900 dark:text-gray-100 rounded p-3 text-sm"><code>https://your-domain.com/fivem</code></pre>
|
||||
<p class="text-gray-700 dark:text-gray-300 mb-3 mt-4">
|
||||
If you're using the official hosted server, use this URL:
|
||||
</p>
|
||||
<pre
|
||||
class="bg-gray-100 dark:bg-gray-700 text-gray-900 dark:text-gray-100 rounded p-3 text-sm"><code>{{ route('fivem') }}</code></pre>
|
||||
</div>
|
||||
|
||||
// Add active class to clicked button
|
||||
this.classList.remove('border-transparent', 'text-gray-500');
|
||||
this.classList.add('active', 'border-indigo-500', 'text-indigo-600');
|
||||
<!-- Step 2 -->
|
||||
<div class="mb-6">
|
||||
<h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-3">2. Configure Claude Desktop
|
||||
</h3>
|
||||
<p class="text-gray-700 dark:text-gray-300 mb-3">Edit your Claude Desktop configuration file:
|
||||
</p>
|
||||
<ul class="list-disc list-inside text-gray-700 dark:text-gray-300 mb-3 ml-4">
|
||||
<li><strong>macOS:</strong> <code
|
||||
class="bg-gray-100 dark:bg-gray-700 text-gray-900 dark:text-gray-100 px-2 py-1 rounded text-sm">~/Library/Application Support/Claude/claude_desktop_config.json</code>
|
||||
</li>
|
||||
<li><strong>Windows:</strong> <code
|
||||
class="bg-gray-100 dark:bg-gray-700 text-gray-900 dark:text-gray-100 px-2 py-1 rounded text-sm">%APPDATA%\Claude\claude_desktop_config.json</code>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
// Hide all tab contents
|
||||
tabContents.forEach(content => {
|
||||
content.classList.add('hidden');
|
||||
content.classList.remove('active');
|
||||
});
|
||||
<p class="text-gray-700 dark:text-gray-300 mb-3">Add this configuration (replace the URL with
|
||||
your actual server URL):
|
||||
</p>
|
||||
<pre class="bg-gray-900 text-gray-100 rounded p-4 overflow-x-auto"><code>@verbatim{
|
||||
"mcpServers": {
|
||||
"fivem": {
|
||||
"url": "https://your-domain.com/fivem"
|
||||
}
|
||||
}
|
||||
}@endverbatim</code></pre>
|
||||
|
||||
// Show target tab content
|
||||
const targetContent = document.querySelector(`[data-tab-content="${targetTab}"]`);
|
||||
if (targetContent) {
|
||||
targetContent.classList.remove('hidden');
|
||||
targetContent.classList.add('active');
|
||||
<p class="text-gray-700 dark:text-gray-300 mb-3 mt-6"><strong>For VSCode (Cline Extension):</strong></p>
|
||||
<p class="text-gray-700 dark:text-gray-300 mb-3">Edit your VSCode <code
|
||||
class="bg-gray-100 dark:bg-gray-700 text-gray-900 dark:text-gray-100 px-2 py-1 rounded text-sm">settings.json</code>:
|
||||
</p>
|
||||
<pre class="bg-gray-900 text-gray-100 rounded p-4 overflow-x-auto"><code>@verbatim{
|
||||
"mcp": {
|
||||
"servers": {
|
||||
"fivem": {
|
||||
"url": "https://your-domain.com/fivem"
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
}
|
||||
}
|
||||
}@endverbatim</code></pre>
|
||||
</div>
|
||||
|
||||
<!-- Step 3 -->
|
||||
<div class="mb-6">
|
||||
<h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-3">3. Restart Claude Desktop</h3>
|
||||
<p class="text-gray-700 dark:text-gray-300">
|
||||
Completely quit and restart Claude Desktop for changes to take effect.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Step 4 -->
|
||||
<div class="mb-6">
|
||||
<h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-3">4. Verify Connection</h3>
|
||||
<p class="text-gray-700 dark:text-gray-300">
|
||||
In Claude Desktop, you should see a small 🔌 icon or indication that the FiveM MCP server is
|
||||
connected.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-green-50 dark:bg-green-900/20 border-l-4 border-green-500 p-4">
|
||||
<p class="text-sm text-green-800 dark:text-green-200">
|
||||
<strong>That's it!</strong> You're now connected to the remote MCP server and can start
|
||||
using FiveM development
|
||||
tools with Claude.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Local Setup Tab -->
|
||||
<div data-tab-content="local" class="animate-fade-in hidden">
|
||||
<div
|
||||
class="bg-gray-50 dark:bg-gray-700/20 border-l-4 border-gray-400 dark:border-gray-500 p-4 mb-6">
|
||||
<p class="text-sm text-gray-700 dark:text-gray-300">
|
||||
<strong>Advanced setup.</strong> Run the MCP server on your own machine. Requires PHP and
|
||||
Laravel
|
||||
installation.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<p class="text-gray-700 dark:text-gray-300 mb-6">
|
||||
If you want to run the MCP server on your own machine:
|
||||
</p>
|
||||
|
||||
<!-- Step 1 -->
|
||||
<div class="mb-6">
|
||||
<h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-3">1. Test the Server</h3>
|
||||
<p class="text-gray-700 dark:text-gray-300 mb-3">First, verify the server works:</p>
|
||||
<pre class="bg-gray-900 text-gray-100 rounded p-4 overflow-x-auto"><code>cd /path/to/fivem-mcp
|
||||
php artisan mcp:inspector fivem</code></pre>
|
||||
<p class="text-gray-600 dark:text-gray-400 text-sm mt-2">This opens a web inspector where you
|
||||
can test all tools.</p>
|
||||
</div>
|
||||
|
||||
<!-- Step 2 -->
|
||||
<div class="mb-6">
|
||||
<h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-3">2. Configure Claude Desktop
|
||||
</h3>
|
||||
<p class="text-gray-700 dark:text-gray-300 mb-3">Edit your Claude Desktop configuration file:
|
||||
</p>
|
||||
<ul class="list-disc list-inside text-gray-700 dark:text-gray-300 mb-3 ml-4">
|
||||
<li><strong>macOS:</strong> <code
|
||||
class="bg-gray-100 dark:bg-gray-700 text-gray-900 dark:text-gray-100 px-2 py-1 rounded text-sm">~/Library/Application Support/Claude/claude_desktop_config.json</code>
|
||||
</li>
|
||||
<li><strong>Windows:</strong> <code
|
||||
class="bg-gray-100 dark:bg-gray-700 text-gray-900 dark:text-gray-100 px-2 py-1 rounded text-sm">%APPDATA%\Claude\claude_desktop_config.json</code>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p class="text-gray-700 dark:text-gray-300 mb-3">Add this configuration:</p>
|
||||
<pre class="bg-gray-900 text-gray-100 rounded p-4 overflow-x-auto mb-4"><code>@verbatim{
|
||||
"mcpServers": {
|
||||
"fivem": {
|
||||
"command": "php",
|
||||
"args": [
|
||||
"artisan",
|
||||
"mcp:start",
|
||||
"fivem"
|
||||
],
|
||||
"cwd": "/path/to/fivem-mcp"
|
||||
}
|
||||
}
|
||||
}@endverbatim</code></pre>
|
||||
|
||||
<p class="text-gray-700 dark:text-gray-300 mb-3"><strong>Or use the full PHP path (e.g., for
|
||||
Herd):</strong></p>
|
||||
<pre class="bg-gray-900 text-gray-100 rounded p-4 overflow-x-auto"><code>@verbatim{
|
||||
"mcpServers": {
|
||||
"fivem": {
|
||||
"command": "/path/to/php",
|
||||
"args": [
|
||||
"/path/to/fivem-mcp/artisan",
|
||||
"mcp:start",
|
||||
"fivem"
|
||||
]
|
||||
}
|
||||
}
|
||||
}@endverbatim</code></pre>
|
||||
|
||||
<p class="text-gray-700 dark:text-gray-300 mb-3 mt-6"><strong>For VSCode (Cline
|
||||
Extension):</strong></p>
|
||||
<p class="text-gray-700 dark:text-gray-300 mb-3">Edit your VSCode <code
|
||||
class="bg-gray-100 dark:bg-gray-700 text-gray-900 dark:text-gray-100 px-2 py-1 rounded text-sm">settings.json</code>:
|
||||
</p>
|
||||
<pre class="bg-gray-900 text-gray-100 rounded p-4 overflow-x-auto mb-4"><code>@verbatim{
|
||||
"mcp": {
|
||||
"servers": {
|
||||
"fivem": {
|
||||
"command": "php",
|
||||
"args": ["artisan", "mcp:start", "fivem"],
|
||||
"cwd": "/path/to/fivem-mcp"
|
||||
}
|
||||
}
|
||||
}
|
||||
}@endverbatim</code></pre>
|
||||
|
||||
<p class="text-gray-700 dark:text-gray-300 mb-3"><strong>Or with full paths:</strong></p>
|
||||
<pre class="bg-gray-900 text-gray-100 rounded p-4 overflow-x-auto"><code>@verbatim{
|
||||
"mcp": {
|
||||
"servers": {
|
||||
"fivem": {
|
||||
"command": "/path/to/php",
|
||||
"args": ["/path/to/fivem-mcp/artisan", "mcp:start", "fivem"]
|
||||
}
|
||||
}
|
||||
}
|
||||
}@endverbatim</code></pre>
|
||||
</div>
|
||||
|
||||
<!-- Step 3 -->
|
||||
<div class="mb-6">
|
||||
<h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-3">3. Restart Claude Desktop
|
||||
</h3>
|
||||
<p class="text-gray-700 dark:text-gray-300">
|
||||
Completely quit and restart Claude Desktop for changes to take effect.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Step 4 -->
|
||||
<div class="mb-6">
|
||||
<h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-3">4. Verify Connection</h3>
|
||||
<p class="text-gray-700 dark:text-gray-300">
|
||||
In Claude Desktop, you should see a small 🔌 icon or indication that the FiveM MCP server is
|
||||
connected.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Quick Examples -->
|
||||
<section class="mb-8">
|
||||
<h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-4">Quick Examples</h2>
|
||||
<p class="text-gray-700 dark:text-gray-300 mb-4">Once connected, try these prompts in Claude:</p>
|
||||
|
||||
<div class="space-y-4">
|
||||
<div class="border-l-4 border-gta-orange pl-4">
|
||||
<h4 class="font-semibold text-gray-900 dark:text-white mb-2">Example 1: Search Documentation</h4>
|
||||
<pre
|
||||
class="bg-gray-100 dark:bg-gray-700 text-gray-900 dark:text-gray-100 rounded p-3 text-sm"><code>Search FiveM docs for "state bags"</code></pre>
|
||||
</div>
|
||||
|
||||
<div class="border-l-4 border-gta-orange pl-4">
|
||||
<h4 class="font-semibold text-gray-900 dark:text-white mb-2">Example 2: Look Up a Native</h4>
|
||||
<pre
|
||||
class="bg-gray-100 dark:bg-gray-700 text-gray-900 dark:text-gray-100 rounded p-3 text-sm"><code>What does the GetPlayerPed native function do? Show me an example.</code></pre>
|
||||
</div>
|
||||
|
||||
<div class="border-l-4 border-gta-orange pl-4">
|
||||
<h4 class="font-semibold text-gray-900 dark:text-white mb-2">Example 3: Generate a Manifest</h4>
|
||||
<pre
|
||||
class="bg-gray-100 dark:bg-gray-700 text-gray-900 dark:text-gray-100 rounded p-3 text-sm"><code>Generate a fxmanifest.lua for my resource called "vehicle-shop" using ESX framework</code></pre>
|
||||
</div>
|
||||
|
||||
<div class="border-l-4 border-gta-orange pl-4">
|
||||
<h4 class="font-semibold text-gray-900 dark:text-white mb-2">Example 4: List Events</h4>
|
||||
<pre
|
||||
class="bg-gray-100 dark:bg-gray-700 text-gray-900 dark:text-gray-100 rounded p-3 text-sm"><code>Show me all FiveM core server events</code></pre>
|
||||
</div>
|
||||
|
||||
<div class="border-l-4 border-gta-orange pl-4">
|
||||
<h4 class="font-semibold text-gray-900 dark:text-white mb-2">Example 5: Create Boilerplate</h4>
|
||||
<pre
|
||||
class="bg-gray-100 dark:bg-gray-700 text-gray-900 dark:text-gray-100 rounded p-3 text-sm"><code>Create a complete resource structure for a QBCore script called "bank-heist" with NUI</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Troubleshooting -->
|
||||
<section class="mb-8">
|
||||
<h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-4">Troubleshooting</h2>
|
||||
|
||||
<div class="mb-6">
|
||||
<h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-3">Server Not Connecting</h3>
|
||||
<ol class="list-decimal list-inside text-gray-700 dark:text-gray-300 space-y-3 ml-4">
|
||||
<li>
|
||||
<strong>Check PHP Path:</strong> Make sure the PHP path in your config is correct
|
||||
<pre class="bg-gray-900 text-gray-100 rounded p-3 mt-2 overflow-x-auto"><code>@verbatimwhich php
|
||||
# or for Herd:
|
||||
ls -la "~/Library/Application Support/Herd/bin/"@endverbatim</code></pre>
|
||||
</li>
|
||||
<li>
|
||||
<strong>Test Manually:</strong> Run the server command directly
|
||||
<pre class="bg-gray-900 text-gray-100 rounded p-3 mt-2 overflow-x-auto"><code>@verbatimcd /path/to/fivem-mcp
|
||||
php artisan mcp:start fivem@endverbatim</code></pre>
|
||||
</li>
|
||||
<li>
|
||||
<strong>Check Logs:</strong> Look at Claude Desktop logs
|
||||
<ul class="list-disc list-inside ml-6 mt-2">
|
||||
<li>macOS: <code
|
||||
class="bg-gray-100 dark:bg-gray-700 text-gray-900 dark:text-gray-100 px-2 py-1 rounded text-sm">~/Library/Logs/Claude/</code>
|
||||
</li>
|
||||
<li>Windows: Check Event Viewer or app logs</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<div class="mb-6">
|
||||
<h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-3">Permission Issues</h3>
|
||||
<p class="text-gray-700 dark:text-gray-300 mb-3">If you get permission errors:</p>
|
||||
<pre class="bg-gray-900 text-gray-100 rounded p-4 overflow-x-auto"><code>@verbatimcd /path/to/fivem-mcp
|
||||
chmod +x artisan@endverbatim</code></pre>
|
||||
</div>
|
||||
|
||||
<div class="mb-6">
|
||||
<h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-3">Path Issues</h3>
|
||||
<p class="text-gray-700 dark:text-gray-300">
|
||||
Make sure to use <strong>absolute paths</strong> in your config, not relative paths.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Next Steps -->
|
||||
<section class="mb-8">
|
||||
<h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-4">Next Steps</h2>
|
||||
<ul class="list-disc list-inside text-gray-700 dark:text-gray-300 space-y-2 ml-4">
|
||||
<li><a href="{{ route('docs.documentation') }}"
|
||||
class="link-gta">Read
|
||||
the full
|
||||
documentation</a></li>
|
||||
<li>Explore all 5 tools in the MCP Inspector</li>
|
||||
<li>Try creating a complete FiveM resource with AI assistance</li>
|
||||
<li>Contribute new tools or improve existing ones</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<!-- Support -->
|
||||
<section>
|
||||
<h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-4">Support</h2>
|
||||
<p class="text-gray-700 dark:text-gray-300 mb-3">For issues:</p>
|
||||
<ol class="list-decimal list-inside text-gray-700 dark:text-gray-300 space-y-2 ml-4">
|
||||
<li>Check <a href="https://laravel.com/docs/mcp"
|
||||
class="link-gta">Laravel
|
||||
MCP
|
||||
Documentation</a></li>
|
||||
<li>Check <a href="https://docs.fivem.net/"
|
||||
class="link-gta">FiveM
|
||||
Documentation</a></li>
|
||||
<li>Review server logs</li>
|
||||
<li>Open a GitHub issue</li>
|
||||
</ol>
|
||||
<p class="text-gray-700 dark:text-gray-300 mt-6 text-lg font-semibold">Happy coding! 🎮</p>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
@@ -0,0 +1,26 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="h-full">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<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'])
|
||||
</head>
|
||||
|
||||
<body class="h-full bg-gray-50 dark:bg-gray-900">
|
||||
<div class="min-h-full">
|
||||
<!-- Navigation -->
|
||||
@include('layouts.partials.navigation')
|
||||
|
||||
<!-- Main Content -->
|
||||
<main>
|
||||
@yield('content')
|
||||
</main>
|
||||
|
||||
<!-- Footer -->
|
||||
@include('layouts.partials.footer')
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,12 @@
|
||||
<footer class="bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 mt-12">
|
||||
<div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
|
||||
<p class="text-center text-sm text-gray-500 dark:text-gray-400">
|
||||
Built with <a href="https://laravel.com/docs/mcp"
|
||||
class="link-gta">Laravel
|
||||
MCP</a>
|
||||
for <a href="https://docs.fivem.net"
|
||||
class="link-gta">FiveM</a>
|
||||
development
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
@@ -0,0 +1,35 @@
|
||||
<nav class="bg-white dark:bg-gray-800 shadow-sm">
|
||||
<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="shrink-0 flex items-center">
|
||||
<h1 class="text-xl font-bold text-gray-900 dark:text-white">FiveM MCP Server</h1>
|
||||
</div>
|
||||
<div class="hidden sm:ml-6 sm:flex sm:space-x-8">
|
||||
<a href="{{ route('docs.index') }}"
|
||||
class="{{ request()->routeIs('docs.index') ? 'border-gta-orange text-gray-900 dark:text-white' : 'border-transparent text-gray-500 dark:text-gray-400 hover:border-gray-300 dark:hover:border-gray-600 hover:text-gray-700 dark:hover:text-gray-300' }} inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">
|
||||
Home
|
||||
</a>
|
||||
<a href="{{ route('docs.quickstart') }}"
|
||||
class="{{ request()->routeIs('docs.quickstart') ? 'border-gta-orange text-gray-900 dark:text-white' : 'border-transparent text-gray-500 dark:text-gray-400 hover:border-gray-300 dark:hover:border-gray-600 hover:text-gray-700 dark:hover:text-gray-300' }} inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">
|
||||
Quick Start
|
||||
</a>
|
||||
<a href="{{ route('docs.documentation') }}"
|
||||
class="{{ request()->routeIs('docs.documentation') ? 'border-gta-orange text-gray-900 dark:text-white' : 'border-transparent text-gray-500 dark:text-gray-400 hover:border-gray-300 dark:hover:border-gray-600 hover:text-gray-700 dark:hover:text-gray-300' }} inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">
|
||||
Documentation
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<a href="https://github.com/adrianmejias/fivem-mcp" target="_blank" rel="noopener noreferrer"
|
||||
class="text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 inline-flex items-center px-3 py-2 text-sm font-medium">
|
||||
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path
|
||||
d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v 3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
|
||||
</svg>
|
||||
<span class="ml-2">GitHub</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
@@ -42,6 +42,20 @@ it('documentation renders correct view', function () {
|
||||
$response->assertViewIs('docs.documentation');
|
||||
});
|
||||
|
||||
it('documentation page includes dynamic tools data', function () {
|
||||
$response = $this->get('/documentation');
|
||||
|
||||
$response->assertViewHas('tools');
|
||||
$response->assertViewHas('resources');
|
||||
$response->assertViewHas('prompts');
|
||||
|
||||
expect($response->viewData('tools'))->toBeArray();
|
||||
expect($response->viewData('resources'))->toBeArray();
|
||||
expect($response->viewData('prompts'))->toBeArray();
|
||||
|
||||
expect($response->viewData('tools'))->not()->toBeEmpty();
|
||||
});
|
||||
|
||||
it('nonexistent route returns 404', function () {
|
||||
$response = $this->get('/nonexistent-page-xyz');
|
||||
|
||||
|
||||
+52
-1
@@ -8,7 +8,58 @@ export default defineConfig({
|
||||
input: ['resources/css/app.css', 'resources/js/app.js'],
|
||||
refresh: true,
|
||||
}),
|
||||
tailwindcss(),
|
||||
tailwindcss({
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
gta: {
|
||||
dark: '#1a1a1a',
|
||||
light: '#f8fafc',
|
||||
orange: '#F57C00',
|
||||
cyan: '#1de9b6',
|
||||
gray: '#334155',
|
||||
indigo: '#3b82f6',
|
||||
slate: {
|
||||
50: '#f8fafc',
|
||||
100: '#f1f5f9',
|
||||
200: '#e2e8f0',
|
||||
300: '#cbd5e1',
|
||||
400: '#94a3b8',
|
||||
500: '#64748b',
|
||||
600: '#475569',
|
||||
700: '#334155',
|
||||
800: '#1e293b',
|
||||
900: '#0f172a',
|
||||
},
|
||||
accent: {
|
||||
50: '#fff7ed',
|
||||
100: '#ffedd5',
|
||||
200: '#fed7aa',
|
||||
300: '#fdba74',
|
||||
400: '#fb923c',
|
||||
500: '#f57c00',
|
||||
600: '#ea580c',
|
||||
700: '#c2410c',
|
||||
800: '#9a3412',
|
||||
900: '#7c2d12',
|
||||
},
|
||||
neon: {
|
||||
50: '#ecfdf5',
|
||||
100: '#d1fae5',
|
||||
200: '#a7f3d0',
|
||||
300: '#6ee7b7',
|
||||
400: '#34d399',
|
||||
500: '#1de9b6',
|
||||
600: '#10b981',
|
||||
700: '#059669',
|
||||
800: '#047857',
|
||||
900: '#065f46',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
}),
|
||||
],
|
||||
server: {
|
||||
watch: {
|
||||
|
||||
Reference in new issue
Block a user