Prototyp · Vorschau: alle Server aus der offiziellen Registry, alle 30 Minuten synchronisiert. Bewertungen und Benutzerkonten folgen in einem späteren Schritt.
PopNx MCPMCP-Server für alle, die KI nutzen · in einfachen Worten erklärt
Einsteigermodus An
FarbenSystemHellDunkel
SpracheไทยEnglish中文日本語한국어EspañolDeutsch
☰ MenüEinstellungen
Einsteigermodus An
FarbenSystemHellDunkel
SpracheไทยEnglish中文日本語한국어EspañolDeutsch

Digitaltableteur

von PetriLahdelmaVersion 2.0.0i★ –iLäuft in der Cloud
Name in der Registrycom.digitaltableteur/mcp

Installieren

Überblick

Beschreibung vom Entwickler (englisches Original)

Design system contracts, docs search, and usage validation for @digitaltableteur components.

Die drei Säulen von PopNx MCP

Diese drei werden nie zu einer Punktzahl zusammengefasst: Meinungen, Messungen und Beliebtheit sind verschiedene Dinge.

Was du damit machen kannst

Für diesen Server haben wir noch keine Zusammenfassung in einfacher Sprache geschrieben. Unten stehen die Fakten, die wir aus der Registry gelesen haben.

  • Verbindung: Läuft in der Cloud
  • Transport: Streamable HTTP
  • Kategorie: Design, Bilder & Audio

Installation

Wähle die KI-App, die du nutzt, und kopiere die Einstellungen.

Bevor du installierst

  • Basischecks: 1 von 1 bestanden
  • Läuft auf dem Server des Entwicklers: Was du fragst, läuft über dessen Server.
  • Die Registry nennt keinen Schlüssel zum Eintragen.

Du brauchst

Welche App nutzt du?

Wähle oben deine App. Wir merken sie uns, damit der Button beim nächsten Mal „In … installieren“ anzeigt.

Funktioniert in Claude im Web, auf dem Desktop und auf dem Handy:

  1. Öffne Settings → Connectors
  2. Tippe auf Add custom connector
  3. Füge die Adresse unten ein und tippe auf Add
  4. Wenn eine Anmeldung verlangt wird, melde dich beim Dienst des Entwicklers an
SettingsConnectors1+ Add2https://…3
https://www.digitaltableteur.com/mcp

Führe das in deinem Terminal aus

claude mcp add --transport http digitaltableteur https://www.digitaltableteur.com/mcp

In Cursor öffnen

Oder kopier die Einstellungen selbst

In .cursor/mcp.json in deinem Projekt oder in ~/.cursor/mcp.json einfügen

{
  "mcpServers": {
    "digitaltableteur": {
      "url": "https://www.digitaltableteur.com/mcp"
    }
  }
}

Dein Browser fragt, ob er die App öffnen darf, dann zeigt die App die Einstellungen und bittet dich um Bestätigung. Schlüsselwerte bleiben leer, damit du sie selbst einträgst.

In VS Code öffnen

Oder kopier die Einstellungen selbst

In .vscode/mcp.json in deinem Projekt einfügen

{
  "servers": {
    "digitaltableteur": {
      "type": "http",
      "url": "https://www.digitaltableteur.com/mcp"
    }
  }
}

Dein Browser fragt, ob er die App öffnen darf, dann zeigt die App die Einstellungen und bittet dich um Bestätigung. Schlüsselwerte bleiben leer, damit du sie selbst einträgst.

ChatGPT verbindet sich nur mit Servern im Internet:

  1. Öffne ChatGPT im Web → Settings → Connectors (Apps)
  2. Tippe auf Create oder Add (bei manchen Tarifen musst du zuerst Developer mode unter Advanced einschalten)
  3. Füge die Adresse unten ein, gib ihr einen Namen und speichere
  4. Wenn eine Anmeldung verlangt wird, melde dich beim Dienst des Entwicklers an
SettingsConnectors1+ Create2https://…3
https://www.digitaltableteur.com/mcp

Menünamen können sich je nach Tarif und mit der Zeit leicht unterscheiden.

Deine Auswahl bleibt in einem Cookie auf diesem Gerät; kein Konto nötig.

Diese Einstellungen werden aus dem Registry-Eintrag des Entwicklers erzeugt. Wenn in der README etwas anderes steht, folge der README.

Was er kann

Die Tool-Liste dieses Servers haben wir noch nicht gelesen; wir prüfen die Endpunkte reihum.

Basischecksi

Wir prüfen Informationen, die jeder sehen kann; den Code haben wir nicht gelesen. Checks, die nicht zutreffen, werden nicht mitgezählt. · Geprüft am 6. Nov. 2026

  • ✓ Bestanden

    Entwickler passt zum Repo

    Der Registry-Name wurde über die Domain digitaltableteur.com bestätigt (die Registry prüft, wem die Domain gehört)

  • … Noch nicht geprüft

    Wird noch gepflegt

    Dieses Repo haben wir noch nicht von GitHub gelesen

  • … Noch nicht geprüft

    Hat eine Lizenz

    Dieses Repo haben wir noch nicht von GitHub gelesen

  • … Noch nicht geprüft

    Endpunkt antwortet

    Noch nicht geprüft; wir prüfen die Endpunkte reihum

  • … Noch nicht geprüft

    Anmeldung mit OAuth

    Noch nicht geprüft; wir prüfen die Endpunkte reihum

  • … Noch nicht geprüft

    Keine versteckten Anweisungen in Tool-Beschreibungen

    Noch nicht geprüft; wir lesen die Tool-Liste, wenn wir den Endpunkt prüfen

Im Vergleich mit anderen in Design, Bilder & Audioi

  • Mehr Sterne als 0 % der anderen 2169 Server in dieser Kategorie
  • Neuer in der Registry veröffentlicht als 39 % der anderen 2169 Server in dieser Kategorie
  • Basischecks gleich gut wie oder besser als bei 100 % der anderen 2169 Server in dieser Kategorie

Verglichen mit allen aktiven Servern dieser Kategorie in der Registry. Sterne zählen nur, wenn dem Herausgeber das Repo gehört.

Häufige Fragen

Ist Digitaltableteur sicher?

Er hat 1 von 1 zutreffenden Basischecks bestanden. Den Code haben wir nicht gelesen. Bevor du einen Schlüssel oder Token hinzufügst, sieh nach, welche Zugriffe der Server verlangt, und nutze einen Schlüssel, der nur die Berechtigungen hat, die du brauchst.

Welche Schlüssel oder Codes braucht er?

Die Registry nennt keinen erforderlichen Schlüssel, manche Server bitten dich aber bei der ersten Nutzung, dich anzumelden.

Läuft er auf meinem Computer oder in der Cloud?

Er läuft in der Cloud des Entwicklers. Du verbindest dich übers Internet, ohne etwas zu installieren, aber was du sendest, läuft über die Server des Entwicklers.

Wird er noch gepflegt?

Das GitHub-Repo wurde zuletzt – geändert, und die neueste Version (2.0.0) kam vor 42 Tagen in die Registry.

Welche Apps können ihn nutzen?

Apps, die MCP unterstützen, etwa Claude Desktop, Claude Code, Cursor und VS Code. Er verbindet sich per URL, also funktionieren auch Apps, die Remote-MCP-Server akzeptieren, zum Beispiel ChatGPT im Entwicklermodus.

Was kann ich stattdessen nutzen?

In derselben Kategorie: Figma Context MCP, Claude Real Video, Figma MCP Server

Alternativen

Server derselben Kategorie von anderen Entwicklern, sortiert nach Sternen.

So liest du eine Karte:★ GitHub-SterneiDrei Säulen: Bewertungen · Checks · NutzungiAktualisiert = neueste Version in der Registry veröffentlichti

Give your coding agent access to your Figma data. Implement designs in any framework in one-shot.

Läuft auf deinem Computer★ 16.165MITAktualisiert vor 5 Monaten
Installieren

Claude Real Video

von HUANGCHIHHUNGLeo

Let any LLM watch a video locally — and search everything it has ever watched.

Läuft auf deinem Computer★ 2.284MITAktualisiert vor 2 Monaten
Installieren

The Figma MCP server brings Figma design context directly into your AI workflow.

Läuft in der Cloud★ 2.152Aktualisiert vor 13 Monaten
Installieren

README vom Entwickler

README öffnen

Unverändert aus dem Repo des Entwicklers übernommen. PopNx MCP hat den Inhalt weder geprüft noch empfiehlt es ihn. HTML, Bilder und Skripte wurden entfernt. Links führen von dieser Website weg.

 _____   _______

| \ | | | | | | | | | | | | | | | || | | | |_____/ |_|

Digitaltableteur

"Iteration beats perfection—ship today, learn tomorrow, refine forever."

Digitaltableteur is a hybrid monorepo portfolio website featuring both Next.js 16 (production) and Vite (legacy) applications. Built with React 19 and TypeScript 6.x, it showcases a comprehensive design system, multi-language support (EN/FI/SV), AI-powered chat interface, and enterprise-grade tooling including Sentry observability, Linear issue management, and MCP (Model Context Protocol) integrations.

🚀 Features

Core Architecture
  • Hybrid Monorepo: Next.js 16 App Router (production) + Vite 6.4 (legacy) in parallel migration
  • AI Documentation System: Hierarchical CLAUDE.md/AGENTS.md structure optimized for AI assistants
  • Design System: 50+ components with CSS Modules, design tokens, Storybook, and visual regression testing
  • Type Safety: TypeScript 6.x strict mode with comprehensive interfaces and JSDoc documentation
User Experience
  • Multi-language Support: Complete i18n with English, Finnish, and Swedish (100% translation coverage)
  • AI Chat Interface: OpenAI-powered chat with guided email workflow, dynamic component injection, markdown rendering
  • Responsive Design: Mobile-first with progressive enhancement (backdrop-filter, gap, :has() selector)
  • Progressive Web App: Service worker caching, offline support, native share API integration
  • Accessibility: WCAG AA compliant with axe-core testing, semantic HTML, ARIA attributes, keyboard navigation
Content & Media
  • Blog Platform: Sanity CMS integration with MDX, syntax highlighting, reading time estimates
  • Secure CV Download: Password-protected with API validation and rate limiting
  • Image Optimization: Next.js Image component, lazy loading, responsive srcset generation
  • Contact Integration: EmailJS with guided multi-step workflow, validation, and accessibility
Developer Experience
  • Storybook 10: Component development with WIP badge system, visual regression testing
  • Testing: Vitest + Testing Library (>80% coverage target), accessibility tests, E2E with Playwright
  • MCP Integrations: GitHub, Figma, Context7, TypeScript LSP, Sentry for AI-assisted development
  • Linear Automation: Programmatic issue creation/update, label management, state workflows
  • Sentry Observability: Error tracking, performance monitoring, release health, MCP query interface
Performance & SEO
  • Code Splitting: Dynamic imports with React.lazy() (Vite) and next/dynamic (Next.js)
  • Bundle Optimization: Tree shaking, minification, aggressive cache busting with content hashes
  • SEO: Dynamic metadata with generateMetadata(), sitemap.xml, robots.txt, structured data
  • Analytics: Google Analytics 4 integration with privacy controls

🏁 Getting Started

Prerequisites
  • Node.js 18+ (LTS recommended)
  • npm 9+ or compatible package manager
Installation
# Clone repository

git clone https://github.com/PetriLahdelma/digitaltableteur.git cd digitaltableteur

Install dependencies

npm install

Copy environment template

cp .env.example .env.local

Environment Configuration

Required for development:

# Analytics

VITE_GA_ID=G-XXXXXXXXXX # Google Analytics 4

Email Services

VITE_EMAILJS_SERVICE_ID=service_xxx VITE_EMAILJS_TEMPLATE_ID=template_xxx VITE_EMAILJS_PUBLIC_KEY=xxx

MCP Servers (optional for enhanced AI features)

FIGMA_TOKEN=figd_xxx # Figma design access GITHUB_MCP_PAT=github_pat_xxx # GitHub operations CONTEXT7_API_KEY=xxx # Context7 documentation access

Linear Issue Management (optional)

LINEAR_API_KEY=lin_api_xxx LINEAR_TEAM_ID=xxx LINEAR_PROJECT_ID=xxx

Akaunting Accounting (optional, self-hosted)

AKAUNTING_API_USERNAME=admin@digitaltableteur.com AKAUNTING_API_PASSWORD=xxx AKAUNTING_COMPANY_ID=1

Production only:

CV_PASSWORD=xxx                              # Secure resume download

OPENAI_API_KEY=sk-xxx # AI chat functionality SENTRY_DSN=https://xxx@xxx.ingest.sentry.io/xxx SENTRY_AUTH_TOKEN=xxx # Source map upload

See .env.example for complete list with descriptions.

⚒️ Development

Development Servers
# Next.js dev server (production app)

npm run dev # http://localhost:3001

Storybook component development

npm run storybook # http://localhost:6010

Code Quality & Testing
# Type checking

npm run typecheck # TypeScript validation across project

Linting

npm run lint # ESLint + Stylelint npm run lint:fix # Auto-fix linting issues

Testing

npm test # Run all tests (Vitest) npm run test:watch # Watch mode npm run test:coverage # Coverage report (>80% target) npm run test:a11y # Accessibility tests (axe-core) npm run test:visual # Visual regression (Playwright + Storybook)

Pre-commit validation (run before PR)

npm run typecheck && npm run lint && npm test && npm run build

MCP & Automation
# GitHub MCP Server

npm run github:mcp:test # Test connectivity and authentication

Figma MCP Server

npm run figma:mcp:test # Test connectivity and authentication

Context7 MCP Server

npm run context7:mcp # Launch locally (respects CONTEXT7_API_KEY) npm run context7:mcp -- --remote-check # Test remote endpoint

TypeScript LSP Status

npm run ts:mcp:status # Validate TypeScript language server npm run ts:mcp:status:stub # Generate stub status

Linear Issue Management

npx tsx scripts/linear/create-issue.ts # Interactive issue creation npx tsx scripts/linear/update-issue.ts --issue DIG-16 --state "Done" npx tsx scripts/linear/check-issue.ts DIG-16 # Display issue details

Sentry Observability

node scripts/sentry-mcp.js issues digitaltableteur 10 --unresolved npm run generate-sentry-summary # Generate dashboard data

🏗 Build & Deployment

Build Commands
# Next.js production build

npm run build # Output: .next/

Storybook static build

npm run build-storybook # Output: storybook-static/

Deployment
# Vite to GitHub Pages

npm run deploy # Build + gh-pages deployment

Vite + Storybook visual diffs

npm run deploy-with-storybook # Deploy with visual regression report

Manual cache busting

npm run cache-bust # Add version metadata + .nojekyll

Vercel (production - automatic on push to main)

vercel --prod

Hybrid Deployment Strategy:

  • Vite App: GitHub Pages (https://digitaltableteur.com)
  • Next.js App: Vercel (https://nextjs-app.vercel.app)
  • Serverless Functions: Vercel (/api/* routes)
  • Routing: Vercel rewrites route specific paths to Next.js (see vercel.json)
Build Optimizations

Vite Build:

  • Tree-shaken JavaScript bundles with content hashes
  • Minified CSS with vendor prefixes and logical properties
  • Compressed images and fonts
  • Service worker for offline caching (Workbox)
  • Aggressive cache busting with filename hashing

Next.js Build:

  • Server-side rendering (SSR) for SEO
  • Static generation for blog posts
  • Image optimization with Next.js Image component
  • API routes as Vercel serverless functions
  • Automatic code splitting per route

🤖 AI Documentation System

Hierarchical Structure

The project uses a hierarchical CLAUDE.md/AGENTS.md system optimized for AI assistants:

Root Documentation (Universal Rules)

├── CLAUDE.md (380 lines) # Comprehensive authority for Claude Code ├── AGENTS.md (150 lines) # Quick reference for generic agents └── .github/copilot-instructions.md # GitHub Copilot specific

Subdirectory Documentation (Specific Context) ├── app/CLAUDE.md + AGENTS.md # Next.js App Router patterns ├── shared/components/CLAUDE.md + AGENTS.md # Component library rules ├── docs/AGENTS.md # Documentation navigation └── scripts/AGENTS.md # Automation patterns

Claude Code Configuration ├── .claude/settings.json # Hooks (auto-format, safety checks) └── .claude/commands/ # Custom slash commands ├── review.md # Comprehensive code review ├── fix-issue.md # GitHub issue workflow ├── create-component.md # Component generation └── create-linear-issue.md # Issue creation

Key Features

CLAUDE.md (Claude Code Authority)

  • 200-400 lines per file
  • Treated as immutable system rules
  • Read hierarchically (up from CWD + discovers subdirectories)
  • Comprehensive patterns with file examples

AGENTS.md (Generic AI Quick Reference)

  • 100-200 lines per file
  • JIT (Just-In-Time) indexing with search commands
  • Minimal duplication, maximum efficiency
  • Copy-paste ready commands

Claude Code Enhancements

  • Hooks: Auto-format (Prettier), dangerous command blocking
  • Custom Commands: /review, /fix-issue, /create-component, /create-linear-issue
  • Token Efficiency: 60-80% reduction per query vs monolithic docs
Usage

Claude Code (automatic):

/review                         # Comprehensive code review

/fix-issue 123 # Analyze and fix GitHub issue /create-component Button # Generate component (5 files) /create-linear-issue Implement X # Create Linear issue

Generic AI Agents (manual reference):

cat AGENTS.md                           # Root rules

cat app/AGENTS.md # Next.js patterns cat shared/components/AGENTS.md # Component rules

Documentation:

  • Migration Guide
  • System Summary
  • Visual Tree

🎨 Design Asset Management

Fetch Figma design

If you need the raw design data, you can download the Figma file as JSON. Set the FIGMA_TOKEN environment variable with your personal access token, then run:

npm run fetch-figma

Synchronizes design tokens and assets from Figma using the API. The file is saved as figma.json in the project root.

SEO & Content Generation
npm run generate:sitemap    # Generate XML sitemap

npm run generate:llms # Create LLM-friendly content index npm run generate:alt-text # Generate accessibility descriptions (requires OPENAI_API_KEY)

generate:alt-text streams local image bytes to the OpenAI Vision API so it can describe the actual artwork; add OPENAI_API_KEY (and optionally OPENAI_ALT_MODEL) to .env.local before running, or append --force to regenerate every alt attribute.

Sanity Blog Publishing

Quick Publish Workflow:

# Publish single article from Sanity

npm run sanity:publish-single

Publish all articles

npm run sanity:publish

  • See docs/SANITY_PUBLISHING_AUTOMATION.md for the complete automated publishing workflow
  • See docs/SANITY_MIGRATION.md for the full migration workflow (React → Sanity via sanity:parse-posts / sanity:convert / sanity:upload, Sanity → MDX via sanity:sync-from-remote, redirects generation, cleanup helpers)

🏗 Architecture

Hybrid Monorepo Structure
digitaltableteur/

├── app/ # Next.js 16 App Router (production) │ ├── layout.tsx # Root layout with providers │ ├── page.tsx # Home page (server component) │ ├── about/page.tsx # Route pages │ ├── blog/[slug]/page.tsx # Dynamic routes │ └── api/*/route.ts # API routes (Vercel functions) │ ├── src/

Nur der Anfang wird gezeigt; den Rest findest du im Repo

PopNx fragen