Adrian Mejias
f6da6705db
- Removed the old layout file `layout.blade.php` and created a new layout structure in `layouts/app.blade.php`. - Introduced partial views for navigation and footer in `layouts/partials/navigation.blade.php` and `layouts/partials/footer.blade.php`. - Updated the `quickstart.blade.php` to extend the new layout and utilize the new partials. - Enhanced the styling with dark mode support and improved color themes in `vite.config.js`.
374 lines
21 KiB
PHP
374 lines
21 KiB
PHP
@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 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 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 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 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-indigo-500 py-4 px-1 text-center text-sm font-medium text-indigo-600 dark:text-indigo-400">
|
|
<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 dark:bg-indigo-900 text-indigo-800 dark:text-indigo-200">
|
|
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>
|
|
|
|
<!-- Tab Content Container -->
|
|
<div class="tab-content-container">
|
|
<!-- Remote Server Option -->
|
|
<div data-tab-content="remote" class="animate-fade-in active">
|
|
<div class="bg-indigo-50 dark:bg-indigo-900/20 border-l-4 border-indigo-500 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 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 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>{
|
|
"mcpServers": {
|
|
"fivem": {
|
|
"url": "https://your-domain.com/fivem"
|
|
}
|
|
}
|
|
}</code></pre>
|
|
</div>
|
|
|
|
<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>
|
|
|
|
<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>
|
|
</div>
|
|
|
|
<!-- 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 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>{
|
|
"mcpServers": {
|
|
"fivem": {
|
|
"command": "/path/to/php",
|
|
"args": [
|
|
"/path/to/fivem-mcp/artisan",
|
|
"mcp:start",
|
|
"fivem"
|
|
]
|
|
}
|
|
}
|
|
}</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>{
|
|
"mcp": {
|
|
"servers": {
|
|
"fivem": {
|
|
"command": "php",
|
|
"args": ["artisan", "mcp:start", "fivem"],
|
|
"cwd": "/path/to/fivem-mcp"
|
|
}
|
|
}
|
|
}
|
|
}</code></pre>
|
|
|
|
<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>{
|
|
"mcp": {
|
|
"servers": {
|
|
"fivem": {
|
|
"command": "/path/to/php",
|
|
"args": ["/path/to/fivem-mcp/artisan", "mcp:start", "fivem"]
|
|
}
|
|
}
|
|
}
|
|
}</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-indigo-500 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-indigo-500 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>
|
|
@endforeach
|
|
</div>
|
|
@endforeach
|
|
|
|
|
|
</section>
|
|
|
|
<!-- 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>
|
|
@empty
|
|
<p class="text-gray-500 dark:text-gray-400 italic">No resources configured.</p>
|
|
@endforelse
|
|
</section>
|
|
|
|
<!-- 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>
|
|
|
|
@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>
|
|
|
|
<!-- 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>
|
|
|
|
<!-- Development -->
|
|
<section class="mb-12">
|
|
<h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-4">Development</h2>
|
|
|
|
<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>
|
|
|
|
<pre class="bg-gray-900 text-gray-100 rounded p-4 overflow-x-auto mb-4"><code><?php
|
|
|
|
namespace App\Mcp\Tools;
|
|
|
|
use Illuminate\Contracts\JsonSchema\JsonSchema;
|
|
use Laravel\Mcp\Request;
|
|
use Laravel\Mcp\Response;
|
|
use Laravel\Mcp\Server\Attributes\Description;
|
|
use Laravel\Mcp\Server\Tool;
|
|
|
|
#[Description('Your tool description')]
|
|
class YourTool extends Tool
|
|
{
|
|
public function handle(Request $request): Response
|
|
{
|
|
// Tool logic here
|
|
return Response::text('Result');
|
|
}
|
|
|
|
public function schema(JsonSchema $schema): array
|
|
{
|
|
return [
|
|
'param' => $schema->string()->required(),
|
|
];
|
|
}
|
|
}</code></pre>
|
|
|
|
<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>
|
|
|
|
<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 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>
|
|
|
|
<!-- 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>
|
|
|
|
<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>
|
|
|
|
<!-- 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="text-indigo-600 dark:text-indigo-400 hover:text-indigo-500 dark:hover:text-indigo-300">FiveM
|
|
Documentation</a></li>
|
|
<li><a href="https://docs.fivem.net/natives/"
|
|
class="text-indigo-600 dark:text-indigo-400 hover:text-indigo-500 dark:hover:text-indigo-300">FiveM
|
|
Natives Reference</a></li>
|
|
<li><a href="https://coxdocs.dev/"
|
|
class="text-indigo-600 dark:text-indigo-400 hover:text-indigo-500 dark:hover:text-indigo-300">COX
|
|
MySQL
|
|
Documentation</a> - Required
|
|
for database operations</li>
|
|
<li><a href="https://docs.qbcore.org/"
|
|
class="text-indigo-600 dark:text-indigo-400 hover:text-indigo-500 dark:hover:text-indigo-300">QBCore
|
|
Documentation</a></li>
|
|
<li><a href="https://laravel.com/docs/mcp"
|
|
class="text-indigo-600 dark:text-indigo-400 hover:text-indigo-500 dark:hover:text-indigo-300">Laravel
|
|
MCP Documentation</a></li>
|
|
<li><a href="https://modelcontextprotocol.io/"
|
|
class="text-indigo-600 dark:text-indigo-400 hover:text-indigo-500 dark:hover:text-indigo-300">Model
|
|
Context Protocol</a></li>
|
|
</ul>
|
|
</section>
|
|
|
|
<!-- 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>
|
|
|
|
<!-- 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>
|
|
</div>
|
|
@endsection
|