プロトタイプ · プレビュー版：公式レジストリのすべてのサーバーを掲載し、30分ごとに同期しています。レビューとアカウント機能は今後のステップで始まります。
PopNx MCPAIを使う人のためのMCPサーバー · やさしい言葉で解説
初心者モード オフ
配色システムに合わせるライトダーク
言語ไทยEnglish中文日本語한국어EspañolDeutsch
☰ メニュー設定
初心者モード オフ
配色システムに合わせるライトダーク
言語ไทยEnglish中文日本語한국어EspañolDeutsch

Digitaltableteur

作者：PetriLahdelmaバージョン 2.0.0i★ –iクラウドで動く
レジストリ名com.digitaltableteur/mcp

インストール

概要

作者による説明（英語の原文）

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

PopNx MCPの3つの柱

この3つを1つのスコアにまとめることはしません。意見、測定、人気はそれぞれ別のものだからです。

できること

このサーバーのやさしい解説はまだ書いていません。以下はレジストリから読み取った事実です。

  • 接続方法: クラウドで動く
  • トランスポート: Streamable HTTP
  • カテゴリ: デザイン・画像・音声

インストール

使っているAIアプリを選んで、設定をコピーしてください。

インストールの前に

必要なもの

どのアプリを使っていますか？

上でアプリを選んでください。選んだアプリを覚えておくので、次からはボタンに「…にインストール」と表示されます。

ウェブ、デスクトップ、モバイルのClaudeで使えます：

  1. Settings → Connectors を開く
  2. Add custom connector を押す
  3. 下のアドレスを貼り付けて Add を押す
  4. サインインを求められたら、作者のサービスにサインインする
SettingsConnectors1+ Add2https://…3
https://www.digitaltableteur.com/mcp

ターミナルでこれを実行します

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

Cursorで開く

または、設定を自分でコピーする

プロジェクトの .cursor/mcp.json、または ~/.cursor/mcp.json に貼り付けます

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

ブラウザがアプリを開いてよいか確認し、そのあとアプリが設定を表示して確認を求めます。キーの値は空欄のままなので、自分で入力してください。

VS Codeで開く

または、設定を自分でコピーする

プロジェクトの .vscode/mcp.json に貼り付けます

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

ブラウザがアプリを開いてよいか確認し、そのあとアプリが設定を表示して確認を求めます。キーの値は空欄のままなので、自分で入力してください。

ChatGPTがつなげるのは、インターネット上のサーバーだけです：

  1. ウェブ版のChatGPTを開き → Settings → Connectors (Apps)
  2. Create または Add を押す（プランによっては、先に Advanced で Developer mode をオンにする必要があります）
  3. 下のアドレスを貼り付け、名前を付けて保存する
  4. サインインを求められたら、作者のサービスにサインインする
SettingsConnectors1+ Create2https://…3
https://www.digitaltableteur.com/mcp

メニューの名前は、プランや時期によって少し違うことがあります。

選んだアプリは、この端末のCookieに保存されます。アカウントは不要です。

この設定は、作者のレジストリ登録情報から作成しています。READMEと違う場合は、READMEに従ってください。

できること

ツールの名前と説明は、サーバーが2026年11月8日に返したそのままの内容です。書いたのは作者で、私たちではありません。プレーンテキストとして表示しています。

  • list_case_studies

    List Digitaltableteur portfolio case studies with slug, title, category, tags and URLs.

  • get_case_study

    Get one case study by URL slug (e.g. dsharp-design-system, helsinki-design-system).

  • list_pricing_packages

    List every consulting offer on the pricing page: name, price as shown, duration, pricing model (fixed_scope, hourly, monthly or quoted) and URL.

  • get_hourly_rate

    Get the hourly rates in EUR as the pricing page shows them: the standard rate and the partnership rate with its conditions. VAT excluded.

  • list_services

    List core consulting services (design system audit, component library, tokens, AI DesignOps).

  • list_expertise_stacks

    List technology and practice areas (React, Next.js, Storybook, Figma, TypeScript, etc.).

  • list_audiences

    List client audiences Digitaltableteur serves (startups, scaleups, enterprise, etc.).

  • get_open_hours

    Get Digitaltableteur office hours in Europe/Helsinki timezone.

  • get_consulting_fit

    Map a visitor problem statement to the best-matching consulting service.

  • search

    Search the @dt design-system docs registry by name, keyword or UI intent. Returns budgeted briefs (import line, key props, related components) with a hint for the follow-up get call.

  • get

    Get the full docs-registry entry for one component: usage guidance, props, example story source and theming tokens.

  • validate_component_usage

    Check proposed @dt JSX against the component contracts: prop relationships, forbidden prop combinations, deprecated props and raw-UI replacements. Pass a TSX snippet or a component name with props.

基本チェックi

誰でも見られる情報をチェックしており、コードは読んでいません。当てはまらない項目は数に入れていません。 · 2026年11月9日にチェック

  • ✓ 合格

    作者とリポジトリが一致

    レジストリ名はドメイン digitaltableteur.com で確認済みです（レジストリがドメインの所有を確認しています）

  • … 未チェック

    今もメンテナンスされている

    このリポジトリはまだGitHubから読み取っていません

  • … 未チェック

    ライセンスがある

    このリポジトリはまだGitHubから読み取っていません

  • ✓ 合格

    エンドポイントが応答する

    1080ミリ秒で応答（HTTP 200）

  • – 対象外

    OAuthでサインイン

    サインイン不要

  • ✓ 合格

    ツールの説明に隠れた指示がない

    12件のツールの説明を読み、AIへの隠れた指示は見つかりませんでした

デザイン・画像・音声のほかのサーバーとの比較i

  • このカテゴリのほかの2805件のうち0%よりスターが多い
  • このカテゴリのほかの2805件のうち38%より最近レジストリに公開
  • 基本チェックの結果が、このカテゴリのほかの2805件のうち100%と同じかそれ以上

レジストリでこのカテゴリにある有効なすべてのサーバーと比較しています。スターは、公開者がリポジトリの所有者である場合だけ数えます。

よくある質問

Digitaltableteurは安全ですか？

当てはまる基本チェック3項目のうち3項目に合格しました。コードは読んでいません。キーやトークンを追加する前に、サーバーがどんなアクセスを求めているかを確認し、必要な権限だけを持つキーを使ってください。

どんなキーやコードが必要ですか？

レジストリには必須のキーは載っていません。ただし、最初に使うときにサインインを求めるサーバーもあります。

パソコンで動きますか、それともクラウドですか？

作者のクラウドで動きます。インストール不要でインターネット経由でつながりますが、送った内容は作者のサーバーを通ります。

今もメンテナンスされていますか？

GitHubリポジトリの最終更新は–、最新バージョン（2.0.0）がレジストリに届いたのは44 日前です。

どのアプリで使えますか？

Claude Desktop、Claude Code、Cursor、VS CodeなどのMCP対応アプリで使えます。URLでつながるので、リモートMCPサーバーに対応したアプリ（開発者モードのChatGPTなど）でも使えます。

代わりに使えるものは？

同じカテゴリには：Figma Context MCP, Claude Real Video, Figma MCP Server

代わりの候補

同じカテゴリで、ほかの作者が作ったサーバー。スターの多い順。

カードの見方：↓ 週あたりのダウンロードi★ GitHubスターi3つの柱：レビュー · チェック · 利用状況i更新＝最新バージョンをレジストリに公開した日i

Figma Context MCP

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

作者：GLips広く使われている↓ 16.1万/週★ 1.6万5 か月前更新

パソコンで動く
インストール

Claude Real Video

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

作者：HUANGCHIHHUNGLeo広く使われている↓ 1106/週★ 22842 か月前更新

パソコンで動く
インストール

Figma MCP Server

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

作者：figma広く使われている★ 215213 か月前更新

クラウドで動く✓ mcp.figma.com
インストール

作者のREADME

READMEを開く

作者のリポジトリから書かれたとおりにコピーしたものです。PopNx MCPは内容を確認・推奨していません。HTML、画像、スクリプトは取り除いています。リンクはこのサイトの外へ移動します。

 _____   _______

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

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/

冒頭だけを表示しています。続きはリポジトリで読めます

PopNxに聞く