mirror of
https://github.com/ArthurDanjou/artmcp.git
synced 2026-01-14 14:54:22 +01:00
428 lines
15 KiB
Vue
428 lines
15 KiB
Vue
<script setup lang="ts">
|
|
const tools = [
|
|
{
|
|
name: 'activity',
|
|
description: 'Real-time current activity and status of Arthur Danjou, including what he\'s currently working on.',
|
|
inputs: []
|
|
},
|
|
{
|
|
name: 'resume-link',
|
|
description: 'Retrieves a direct download link to Arthur Danjou\'s professional resume in the specified language.',
|
|
inputs: [{ name: 'lang', type: 'string', description: 'The language for the resume: \'en\' for English or \'fr\' for French' }]
|
|
},
|
|
{
|
|
name: 'stats',
|
|
description: 'Detailed coding statistics and analytics from WakaTime, including programming languages, time spent coding, and productivity metrics.',
|
|
inputs: []
|
|
},
|
|
{
|
|
name: 'status-page',
|
|
description: 'Real-time status, uptime monitoring, and incident reports for Arthur Danjou\'s homelab infrastructure, powered by UptimeKuma.',
|
|
inputs: []
|
|
},
|
|
{
|
|
name: 'uses-by-category',
|
|
description: 'Retrieves a filtered list of tools, software, and hardware used by Arthur Danjou based on a specific category.',
|
|
inputs: [{ name: 'categoryName', type: 'string', description: 'The category to filter by: \'homelab\', \'ide\', \'hardware\', or \'software\'' }]
|
|
},
|
|
{
|
|
name: 'weather',
|
|
description: 'Get current weather for a city.',
|
|
inputs: [{ name: 'city', type: 'string', description: 'City name' }]
|
|
}
|
|
]
|
|
|
|
const prompts = [
|
|
{ name: 'activity', description: 'Retrieve Arthur Danjou\'s current real-time activity status' },
|
|
{ name: 'contact', description: 'Retrieve contact information and social media links' },
|
|
{ name: 'hobbies', description: 'Retrieve information about hobbies and interests' },
|
|
{ name: 'languages', description: 'Retrieve languages spoken with proficiency levels' },
|
|
{ name: 'profile', description: 'Retrieve comprehensive professional profile information' },
|
|
{ name: 'projects', description: 'Retrieve list of personal and professional projects' },
|
|
{ name: 'resume', description: 'Request and retrieve professional resume in specified language' },
|
|
{ name: 'skills', description: 'Retrieve comprehensive list of technical skills' },
|
|
{ name: 'stats', description: 'Retrieve detailed coding statistics from WakaTime' },
|
|
{ name: 'status-page', description: 'Retrieve real-time status page of homelab infrastructure' },
|
|
{ name: 'uses-by-category', description: 'Retrieve tools, software, and hardware by category' }
|
|
]
|
|
|
|
const resources = [
|
|
{ uri: 'resource://artmcp/profile', title: 'Professional Profile', description: 'Biography, location, availability, career goals' },
|
|
{ uri: 'resource://artmcp/contact', title: 'Contact Information', description: 'Email, LinkedIn, GitHub, social media links' },
|
|
{ uri: 'resource://artmcp/education', title: 'Education', description: 'Degrees, institutions, academic achievements' },
|
|
{ uri: 'resource://artmcp/experiences', title: 'Experiences', description: 'Professional work experiences and roles' },
|
|
{ uri: 'resource://artmcp/hobbies', title: 'Hobbies & Interests', description: 'Personal hobbies and passions' },
|
|
{ uri: 'resource://artmcp/languages', title: 'Spoken Languages', description: 'Languages with proficiency levels' },
|
|
{ uri: 'resource://artmcp/projects', title: 'Projects Portfolio', description: 'Technical projects and achievements' },
|
|
{ uri: 'resource://artmcp/skills', title: 'Skills', description: 'Technical skills and tools mastered' },
|
|
{ uri: 'resource://artmcp/uses', title: 'Tech Stack & Tools', description: 'Tools, software, and hardware used' }
|
|
]
|
|
|
|
const apiEndpoints = [
|
|
{ method: 'GET', path: '/api/profile', description: 'Profile information' },
|
|
{ method: 'GET', path: '/api/contact', description: 'Contact information' },
|
|
{ method: 'GET', path: '/api/skills', description: 'Technical skills' },
|
|
{ method: 'GET', path: '/api/experiences', description: 'Work experiences' },
|
|
{ method: 'GET', path: '/api/education', description: 'Education background' },
|
|
{ method: 'GET', path: '/api/projects', description: 'Projects portfolio' },
|
|
{ method: 'GET', path: '/api/languages', description: 'Spoken languages' },
|
|
{ method: 'GET', path: '/api/hobbies', description: 'Hobbies and interests' },
|
|
{ method: 'GET', path: '/api/uses', description: 'Tech stack and tools' },
|
|
{ method: 'GET', path: '/api/activity', description: 'Real-time activity' },
|
|
{ method: 'GET', path: '/api/stats', description: 'Coding statistics' },
|
|
{ method: 'GET', path: '/api/status-page', description: 'Status page' },
|
|
{ method: 'GET', path: '/api/resumes/{en|fr}', description: 'Download resume' }
|
|
]
|
|
</script>
|
|
|
|
<template>
|
|
<div class="min-h-screen bg-gray-50 dark:bg-gray-900">
|
|
<!-- Hero Header -->
|
|
<div class="bg-linear-to-br from-primary to-primary-600 dark:from-primary-900 dark:to-primary-800">
|
|
<UContainer class="py-16">
|
|
<div class="text-center text-white">
|
|
<UBadge
|
|
color="neutral"
|
|
variant="subtle"
|
|
size="lg"
|
|
class="mb-4"
|
|
>
|
|
Model Context Protocol
|
|
</UBadge>
|
|
<h1 class="text-4xl sm:text-5xl font-bold mb-4">
|
|
ArtMCP Documentation
|
|
</h1>
|
|
<p class="text-xl text-white/90 mb-8 max-w-2xl mx-auto">
|
|
Complete documentation for ArtMCP - Arthur Danjou's Model Context Protocol Server
|
|
</p>
|
|
<div class="flex flex-col sm:flex-row gap-4 justify-center">
|
|
<UButton
|
|
to="/"
|
|
size="lg"
|
|
color="neutral"
|
|
variant="solid"
|
|
icon="i-heroicons-arrow-left"
|
|
>
|
|
Back to Home
|
|
</UButton>
|
|
<UButton
|
|
to="https://github.com/ArthurDanjou/artapi"
|
|
target="_blank"
|
|
size="lg"
|
|
color="neutral"
|
|
variant="outline"
|
|
icon="i-simple-icons-github"
|
|
>
|
|
View on GitHub
|
|
</UButton>
|
|
</div>
|
|
</div>
|
|
</UContainer>
|
|
</div>
|
|
|
|
<!-- Main Content -->
|
|
<UContainer class="py-12">
|
|
<!-- Overview -->
|
|
<UCard
|
|
class="mb-8"
|
|
:ui="{ body: 'p-8' }"
|
|
variant="outline"
|
|
>
|
|
<h2 class="text-3xl font-bold mb-4">
|
|
What is ArtMCP?
|
|
</h2>
|
|
<p class="text-lg text-gray-600 dark:text-gray-400 mb-4">
|
|
ArtMCP provides AI assistants and applications with structured access to Arthur Danjou's professional information through the Model Context Protocol. This includes:
|
|
</p>
|
|
<div class="grid md:grid-cols-2 gap-4">
|
|
<div class="flex items-start gap-3">
|
|
<UIcon
|
|
name="i-heroicons-check-circle"
|
|
class="w-6 h-6 text-green-500 shrink-0 mt-0.5"
|
|
/>
|
|
<div>
|
|
<p class="font-medium">
|
|
Comprehensive profile data and biography
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-start gap-3">
|
|
<UIcon
|
|
name="i-heroicons-check-circle"
|
|
class="w-6 h-6 text-green-500 shrink-0 mt-0.5"
|
|
/>
|
|
<div>
|
|
<p class="font-medium">
|
|
Work experiences and professional background
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-start gap-3">
|
|
<UIcon
|
|
name="i-heroicons-check-circle"
|
|
class="w-6 h-6 text-green-500 shrink-0 mt-0.5"
|
|
/>
|
|
<div>
|
|
<p class="font-medium">
|
|
Portfolio of projects and achievements
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-start gap-3">
|
|
<UIcon
|
|
name="i-heroicons-check-circle"
|
|
class="w-6 h-6 text-green-500 shrink-0 mt-0.5"
|
|
/>
|
|
<div>
|
|
<p class="font-medium">
|
|
Technical skills and expertise
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-start gap-3">
|
|
<UIcon
|
|
name="i-heroicons-check-circle"
|
|
class="w-6 h-6 text-green-500 shrink-0 mt-0.5"
|
|
/>
|
|
<div>
|
|
<p class="font-medium">
|
|
Education and academic background
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-start gap-3">
|
|
<UIcon
|
|
name="i-heroicons-check-circle"
|
|
class="w-6 h-6 text-green-500 shrink-0 mt-0.5"
|
|
/>
|
|
<div>
|
|
<p class="font-medium">
|
|
Real-time activity and coding statistics
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</UCard>
|
|
|
|
<!-- Quick Start -->
|
|
<UCard
|
|
class="mb-8"
|
|
:ui="{ body: 'p-8' }"
|
|
variant="outline"
|
|
>
|
|
<h2 class="text-3xl font-bold mb-6">
|
|
Quick Start
|
|
</h2>
|
|
<p class="text-gray-600 dark:text-gray-400 mb-6">
|
|
Get started with ArtMCP in seconds by installing it in your favorite AI assistant:
|
|
</p>
|
|
|
|
<div class="grid md:grid-cols-2 gap-6">
|
|
<div>
|
|
<h3 class="text-xl font-semibold mb-4">
|
|
MCP Configuration
|
|
</h3>
|
|
<UCard
|
|
:ui="{
|
|
body: 'bg-gray-900 dark:bg-gray-950'
|
|
}"
|
|
>
|
|
<pre class="text-sm text-gray-100 overflow-x-auto">
|
|
<code>{
|
|
"mcpServers": {
|
|
"artmcp": {
|
|
"url": "https://api.arthurdanjou.fr/mcp"
|
|
}
|
|
}
|
|
}</code>
|
|
</pre>
|
|
</UCard>
|
|
</div>
|
|
|
|
<div>
|
|
<h3 class="text-xl font-semibold mb-4">
|
|
Direct Connection
|
|
</h3>
|
|
<UCard
|
|
:ui="{
|
|
body: 'bg-gray-900 dark:bg-gray-950'
|
|
}"
|
|
>
|
|
<pre class="text-sm text-gray-100 overflow-x-auto"><code>https://api.arthurdanjou.fr/mcp</code></pre>
|
|
</UCard>
|
|
<p class="text-sm text-gray-600 dark:text-gray-400 mt-2">
|
|
Use this URL to connect your MCP client directly
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</UCard>
|
|
|
|
<!-- Tools Section -->
|
|
<UCard
|
|
class="mb-8"
|
|
:ui="{ body: 'p-8' }"
|
|
variant="outline"
|
|
>
|
|
<h2 class="text-3xl font-bold mb-4">
|
|
Tools
|
|
</h2>
|
|
<p class="text-gray-600 dark:text-gray-400 mb-6">
|
|
Executable functions that AI assistants can call to perform actions or retrieve dynamic data.
|
|
</p>
|
|
|
|
<UAccordion
|
|
:items="tools.map(tool => ({
|
|
label: tool.name,
|
|
icon: 'i-heroicons-wrench-screwdriver',
|
|
defaultOpen: false,
|
|
content: tool.description,
|
|
slot: 'tool-' + tool.name
|
|
}))"
|
|
>
|
|
<template
|
|
v-for="tool in tools"
|
|
:key="tool.name"
|
|
#[`tool-${tool.name}`]
|
|
>
|
|
<div class="p-4">
|
|
<p class="text-gray-700 dark:text-gray-300 mb-4">
|
|
{{ tool.description }}
|
|
</p>
|
|
<div
|
|
v-if="tool.inputs.length > 0"
|
|
class="border-t border-gray-200 dark:border-gray-700 pt-4"
|
|
>
|
|
<h4 class="font-semibold mb-2">
|
|
Inputs:
|
|
</h4>
|
|
<ul class="space-y-2">
|
|
<li
|
|
v-for="input in tool.inputs"
|
|
:key="input.name"
|
|
class="flex gap-2"
|
|
>
|
|
<UBadge
|
|
color="primary"
|
|
variant="subtle"
|
|
>
|
|
{{ input.name }}
|
|
</UBadge>
|
|
<span class="text-sm text-gray-600 dark:text-gray-400">{{ input.description }}</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</UAccordion>
|
|
</UCard>
|
|
|
|
<!-- Prompts Section -->
|
|
<UCard
|
|
class="mb-8"
|
|
:ui="{ body: 'p-8' }"
|
|
variant="outline"
|
|
>
|
|
<h2 class="text-3xl font-bold mb-4">
|
|
Prompts
|
|
</h2>
|
|
<p class="text-gray-600 dark:text-gray-400 mb-6">
|
|
Pre-configured conversation starters that guide AI assistants on how to query specific information.
|
|
</p>
|
|
|
|
<div class="grid md:grid-cols-2 gap-4">
|
|
<UCard
|
|
v-for="prompt in prompts"
|
|
:key="prompt.name"
|
|
:ui="{ body: 'p-4' }"
|
|
variant="outline"
|
|
>
|
|
<div class="flex items-start gap-3">
|
|
<UIcon
|
|
name="i-heroicons-chat-bubble-left-right"
|
|
class="w-5 h-5 text-primary shrink-0 mt-0.5"
|
|
/>
|
|
<div>
|
|
<h3 class="font-semibold mb-1">
|
|
{{ prompt.name }}
|
|
</h3>
|
|
<p class="text-sm text-gray-600 dark:text-gray-400">
|
|
{{ prompt.description }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</UCard>
|
|
</div>
|
|
</UCard>
|
|
|
|
<!-- Resources Section -->
|
|
<UCard
|
|
class="mb-8"
|
|
:ui="{ body: 'p-8' }"
|
|
variant="outline"
|
|
>
|
|
<h2 class="text-3xl font-bold mb-4">
|
|
Resources
|
|
</h2>
|
|
<p class="text-gray-600 dark:text-gray-400 mb-6">
|
|
Static or semi-static data endpoints that provide structured information.
|
|
</p>
|
|
|
|
<div class="space-y-3">
|
|
<UCard
|
|
v-for="resource in resources"
|
|
:key="resource.uri"
|
|
:ui="{ body: 'p-4' }"
|
|
variant="outline"
|
|
>
|
|
<div class="flex flex-col gap-2">
|
|
<div class="flex items-center gap-2">
|
|
<UIcon
|
|
name="i-heroicons-document-text"
|
|
class="w-5 h-5 text-primary"
|
|
/>
|
|
<h3 class="font-semibold">
|
|
{{ resource.title }}
|
|
</h3>
|
|
</div>
|
|
<code class="text-xs text-gray-600 dark:text-gray-400 bg-gray-100 dark:bg-gray-800 px-2 py-1 rounded">
|
|
{{ resource.uri }}
|
|
</code>
|
|
<p class="text-sm text-gray-600 dark:text-gray-400">
|
|
{{ resource.description }}
|
|
</p>
|
|
</div>
|
|
</UCard>
|
|
</div>
|
|
</UCard>
|
|
|
|
<!-- API Endpoints Section -->
|
|
<UCard :ui="{ body: 'p-8' }">
|
|
<h2 class="text-3xl font-bold mb-4">
|
|
REST API Endpoints
|
|
</h2>
|
|
<p class="text-gray-600 dark:text-gray-400 mb-6">
|
|
All resources are also available as REST API endpoints for direct HTTP access.
|
|
</p>
|
|
|
|
<div class="space-y-2">
|
|
<div
|
|
v-for="endpoint in apiEndpoints"
|
|
:key="endpoint.path"
|
|
class="flex items-center gap-3 p-3 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
|
|
>
|
|
<UBadge
|
|
color="success"
|
|
variant="subtle"
|
|
class="font-mono text-xs"
|
|
>
|
|
{{ endpoint.method }}
|
|
</UBadge>
|
|
<code class="text-sm font-mono text-gray-900 dark:text-gray-100 flex-1">{{ endpoint.path }}</code>
|
|
<span class="text-sm text-gray-600 dark:text-gray-400">{{ endpoint.description }}</span>
|
|
</div>
|
|
</div>
|
|
</UCard>
|
|
</UContainer>
|
|
</div>
|
|
</template>
|