Skip to content

Conversation

@KemingHe
Copy link

@KemingHe KemingHe commented Aug 4, 2025

Resolves #10204

📝 Description

Add complete Docker containerization for the Chakra UI MCP server with automated CI/CD publishing to GitHub Container Registry. This enables both individual developers and teams to deploy the MCP server without local dependency management.

⛳️ Current behavior (updates)

  • MCP server only available via NPM (npx @chakra-ui/react-mcp)
  • Requires Node.js and pnpm setup for local development
  • No containerized deployment option for teams/organizations
  • Manual Docker builds needed for custom deployments

🚀 New behavior

  • Dual-mode containerization: stdio (local) and HTTP (remote) via MCP_MODE env var
  • Automated multi-arch builds: linux/amd64 + linux/arm64 published to GHCR on MCP releases
  • Developer-friendly testing: Manual dispatch workflow with dry-run capabilities
  • Security-first design: Non-root user, optimized build context, minimal attack surface
  • Comprehensive documentation: Workflow architecture, Docker usage guides, developer onboarding

Key Features:

  • Pull from GHCR: docker pull ghcr.io/chakra-ui/chakra-ui/react-mcp:2.0.5
  • Local stdio usage: No NPM/Node.js setup required for end users
  • HTTP deployment: Team servers with docker run -p 3000:3000 -e MCP_MODE=http
  • CI automation: Triggered by @chakra-ui/react-mcp@* tags + manual testing

💣 Is this a breaking change (Yes/No): No

All existing NPM usage remains unchanged. Docker is an additional deployment option.

📝 Additional Information

Testing Status:Workflow build passed successfully

Review Focus Areas:

  • CI Configuration: Multi-arch workflow, GHCR integration, manual dispatch logic
  • Documentation: .github/workflows/README.md system architecture, apps/mcp/Docker.md usage guide
  • Security: Non-root container, optimized .dockerignore, minimal dependencies

Business Value:

  • Individual developers: Skip NPM setup, direct Docker usage for MCP tooling
  • Organizations: HTTP mode for shared team deployments and remote access
  • Maintainers: Automated Docker publishing aligned with existing MCP release process

@vercel
Copy link

vercel bot commented Aug 4, 2025

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Preview Updated (UTC)
chakra-ui-storybook Ready Ready Preview Oct 19, 2025 5:15pm
chakra-v3-docs Ready Ready Preview Oct 19, 2025 5:15pm

💡 Enable Vercel Agent with $100 free credit for automated AI reviews

@changeset-bot
Copy link

changeset-bot bot commented Aug 4, 2025

⚠️ No Changeset found

Latest commit: 511deaf

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

@KemingHe
Copy link
Author

KemingHe commented Aug 4, 2025

⚠️ No Changeset found

Latest commit: 6b77975

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets
Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

No changeset intended, this is not a core package update PR. The @chakra-ui/react-mcp has already been excluded according to .changeset/config.json.

@segunadebayo
Copy link
Member

Amazing work @KemingHe

Will review this shortly and get it merged

@KemingHe KemingHe force-pushed the feat/containerize-mcp-server/KemingHe branch from a11484a to 32c9b95 Compare August 5, 2025 17:38
@KemingHe KemingHe force-pushed the feat/containerize-mcp-server/KemingHe branch from 4c1e34a to b786995 Compare August 6, 2025 17:42
@KemingHe KemingHe force-pushed the feat/containerize-mcp-server/KemingHe branch from b786995 to 4b703c8 Compare August 6, 2025 19:36
@KemingHe KemingHe force-pushed the feat/containerize-mcp-server/KemingHe branch from 4b703c8 to cc70f31 Compare August 8, 2025 10:46
@KemingHe KemingHe marked this pull request as draft August 10, 2025 00:11
@KemingHe KemingHe force-pushed the feat/containerize-mcp-server/KemingHe branch from 1d2edba to 972d914 Compare August 11, 2025 17:11
@KemingHe KemingHe force-pushed the feat/containerize-mcp-server/KemingHe branch from 972d914 to 8054ea0 Compare August 15, 2025 21:33
@KemingHe KemingHe force-pushed the feat/containerize-mcp-server/KemingHe branch from 8054ea0 to 93dd813 Compare August 18, 2025 22:26
@KemingHe KemingHe force-pushed the feat/containerize-mcp-server/KemingHe branch from 93dd813 to 29d74e7 Compare August 19, 2025 14:59
@KemingHe KemingHe force-pushed the feat/containerize-mcp-server/KemingHe branch from 29d74e7 to 7cb090d Compare August 21, 2025 16:29
@gregboero
Copy link

Hello, any news on this feature? It’s something my team is really looking forward to.

@KemingHe
Copy link
Author

Hello, any news on this feature? It’s something my team is really looking forward to.

@gregboero

I will get this polished up by end of the week.

@segunadebayo

I will ping you when it's ready for review and publishing.

refs chakra-ui#10204

CHANGES
- Add multi-stage Dockerfile with stdio/HTTP mode switching
- Create comprehensive Docker.md with quick start guide
- Implement optimized .dockerignore for efficient builds
- Update README.md with Docker setup instructions
- Align GHCR naming to ghcr.io/chakra-ui/chakra-ui/react-mcp

IMPACT
- Users can run MCP server in containers with same features as npx
- Easy mode switching via MCP_MODE environment variable
- Production-ready container with health checks and optimizations

TECHNICAL NOTES
- Foundation for part 1/2 of chakra-ui#10204 (GitHub Actions publishing next)
- Uses main pnpm-lock.yaml with filtered workspace installation
- Supports both stdio (default) and HTTP modes without functional changes
- Clean separation of Docker concerns from core MCP functionality
refs chakra-ui#10204

CHANGES
- Fix HTTP mode CMD path from dist/http.js to api/index.js
- Add non-root mcpuser for container security
- Copy missing api/ directory from build stage
- Update Docker.md with local development examples

IMPACT
- HTTP mode now works correctly alongside stdio mode
- Enhanced container security with non-root execution
- Both modes tested and verified with secure setup

TECHNICAL NOTES
- Part 1/2 of Docker/GHCR implementation foundation
- Maintains feature parity with npx version
CHANGES
- Add multi-arch Docker workflow for GHCR publishing
- Implement manual dispatch testing without disrupting auto releases
- Create comprehensive workflows documentation system
- Fix Docker.md version tag alignment (remove "v" prefix)

IMPACT
- MCP maintainers get automated Docker publishing on releases
- Contributors can dry-run test Docker builds before merging
- New developers have clear CI/CD system documentation

TECHNICAL NOTES
- Multi-platform builds: linux/amd64, linux/arm64
- Triggered by @chakra-ui/react-mcp@* tags + workflow_dispatch
- SHOULD_PUSH env var controls push vs dry-run behavior
- Complete system architecture in workflows README
- Completes 2/2 Docker implementation (pending testing)
CHANGES
- Fix stdio mode to use Docker args (-e) instead of NPM env field
- Correct HTTP mode header name from CHAKRA_PRO_API_KEY to x-api-key
- Add explicit CHAKRA_PRO_API_KEY environment variable to Dockerfile
- Update documentation for both deployment modes

IMPACT
- Chakra UI Pro features now properly accessible in Docker deployments
- Consistent API key handling across stdio and HTTP transport modes
- Clear separation between host process (NPM) and container environment (Docker)

TECHNICAL NOTES
- Docker containers require -e flags for internal environment variables
- NPM env field sets host process environment, not container environment
- HTTP mode uses standard x-api-key header following REST conventions
- Explicit ENV declaration improves Dockerfile transparency
CHANGES
- Add comprehensive Docker Image Publishing section to workflows README
- Document step-by-step manual workflow instructions with GitHub Actions links
- Clarify Docker tag independence from internal @chakra-ui/react-mcp version
- Reference apps/mcp/package.json for version info instead of hard-coding
- Improve workflow input descriptions for manual dispatch clarity

IMPACT
- Core maintainers can confidently publish Docker images automatically or manually
- Clear operational guidance for first release and testing scenarios
- Eliminates confusion between Docker tags and internal package versions
- Reduces maintenance burden with dynamic version references
CHANGES
- Merge Docker.md content into README.md following DRY principles
- Fix GHCR image name alignment across all documentation files
- Replace hardcoded version with package.json import in http.ts
- Add GitHub source links to tool documentation
- Remove dead Docker.md references from workflows README
- Add GHCR README copying step to mcp-docker.yml workflow

IMPACT
- Single source of truth for MCP Docker documentation
- Consistent GHCR image references across all files
- Dynamic versioning eliminates manual updates
- Enhanced tool discoverability with direct source links

TECHNICAL NOTES
- Applied KISS principle: simplified version handling with JSON import
- Applied DRY principle: eliminated duplicate Docker documentation
- Corrected ghcr.io/chakra-ui/chakra-ui/react-mcp → ghcr.io/chakra-ui/react-mcp
- Workflow now copies apps/mcp/README.md to root for GHCR display
CHANGES
- Streamline MCP README description and features for clarity
- Remove hard-coded repository restrictions from Docker workflow
- Add OCI image metadata labels for proper GHCR presentation
- Make image naming dynamic using repository_owner variable

IMPACT
- Workflow now works seamlessly in any fork without configuration
- Container images display proper metadata on GHCR package pages
- Documentation provides clearer value proposition for users

TECHNICAL NOTES
- Eliminated need to edit hard-coded values when testing in forks
- Added org.opencontainers.image labels for description, source, and license
CHANGES
- Implement dynamic container labels using GITHUB_REPOSITORY build arg
- Add comprehensive Dockerfile documentation with stage organization
- Enhance README with API key security guidance and usage clarity
- Fix grammar and improve example consistency throughout docs

IMPACT
- Contributors can build fork-friendly images with correct metadata
- End users gain clearer setup instructions and security best practices
- Enhanced trust through GHCR-compliant container labeling
- Improved maintainability with well-documented Docker stages

TECHNICAL NOTES
- Follows official GitHub Container Registry metadata standards
- Dynamic labels replace hardcoded repository references
- Multi-stage Dockerfile with clear separation of concerns
- Enhanced security documentation for API key handling
@KemingHe
Copy link
Author

Hello, any news on this feature? It’s something my team is really looking forward to.

@gregboero

I will get this polished up by end of the week.

@segunadebayo

I will ping you when it's ready for review and publishing.

Update to @gregboero, @segunadebayo, and the Chakra UI community:

Over the weekend of 10-18, I've spent 10+ hours on the final polish and debugging of the Docker-ized stdio plus http transports of the MCP server. I encountered:

  • Behavioral inconsistencies between consumers:
    • Claude Code (mcp discovery failure)
    • Claude Desktop (lack of http transport support)
    • Cursor (pro tools discovery failure)
    • GitHub Copilot (yet to be tested)
  • Need for clear documentation for API key in http transport headers
  • Need for clear documentation for API key generation process
  • 4-stage full regression testing process until ready for production (each must test with and without API key):
    • Local node stdio.js
    • Local docker stdio
    • Local docker http
    • Preview GHCR and docker pull, then stdio and http transports

I expect another 5-10 hours of additional work to fully and responsibly deliver not just the Docker-ized MCP server, but more importantly design lineage, troubleshooting docs, and updated instructions in root README.md for quick onboarding.

@segunadebayo I'm happy to continue maintaining this critical part of Chakra UI even after merging of this branch to main.

Will keep you all posted! This is fun, believe it or not.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants