timepicker-ui-mcp — Claude Code MCP server: features and install
An MCP server that gives coding agents direct access to timepicker-ui documentation, theme options, validation logic, and code snippets.
claude mcp add timepicker-ui-mcp -- npx -y timepicker-ui-mcpWhat timepicker-ui-mcp does
The server supplies AI assistants with context for the timepicker-ui web library. It exposes information about constructor options, event hooks, and time validation rules.
The underlying picker operates without third-party dependencies across vanilla JS, React, Vue, or SSR environments. Through this server, the assistant drafts configurations for clock and wheel layouts, theme switches like blueprint or dark, and range plugins.
Running the server requires Node.js because the launch command relies on npx. You must still import the required CSS files into your web project, or the rendered picker will lack styling.
What it helps with
- Generate initialization code for TimepickerUI with custom clock steps
- Configure isTimeDisabled callbacks to restrict specific hours
- Wire up range or timezone plugins without consulting external docs
- Look up public instance methods like setValue and destroy
Example prompts for the agent
- Write a TimepickerUI configuration with 24-hour mode and the crane theme
- Show how to disable specific hours in timepicker-ui using isTimeDisabled
- How do I set up a linked time range picker using RangePlugin?
How to install timepicker-ui-mcp
Platform CLI
claude mcp add timepicker-ui-mcp -- npx -y timepicker-ui-mcpPlatform CLI
codex mcp add timepicker-ui-mcp -- npx -y timepicker-ui-mcpConfig file
{
"mcpServers": {
"timepicker-ui-mcp": {
"command": "npx",
"args": [
"-y",
"timepicker-ui-mcp"
]
}
}
}Config file
{
"servers": {
"timepicker-ui-mcp": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"timepicker-ui-mcp"
]
}
}
}Platform CLI
gemini mcp add timepicker-ui-mcp npx -y timepicker-ui-mcpStep by step, with commands for each platform: How to add an MCP server to Claude Code, Codex, Cursor, VS Code, Gemini CLI and more
Questions about timepicker-ui-mcp
How to install timepicker-ui-mcp in Claude Code?
Run claude mcp add timepicker-ui-mcp -- npx -y timepicker-ui-mcp. The assistant loads the server tools immediately.
What does timepicker-ui-mcp do?
It connects AI coding tools to timepicker-ui reference materials, covering options, events, public methods, validation, and layout themes.
Does timepicker-ui require extra runtime libraries?
No, the core library has zero runtime dependencies and stays around 27 KB gzipped.
