OriginUI MCP Server

Pesquise e instale componentes do OriginUI, com detalhes obtidos dinamicamente do registro JSON do OriginUI.

Documentação

Servidor MCP OriginUI

Um servidor Model Context Protocol (MCP) que fornece acesso aos componentes OriginUI, permitindo que agentes Claude Code pesquisem, naveguem e instalem componentes OriginUI de forma integrada.

Recursos

Pesquisa de Componentes: Pesquise componentes por nome, categoria ou tags
Detalhes do Componente: Obtenha informações abrangentes sobre componentes específicos
Comandos de Instalação: Gere comandos pnpm dlx shadcn@latest add adequados
Pré-visualizações Visuais: Obtenha capturas de tela e descrições visuais dos componentes para avaliar a adequação
Pré-visualização do Componente: Visualize informações de estilo e exemplos de uso
Filtragem por Categoria: Navegue por componentes por categoria (botões, entradas, formulários, etc.)

🚀 Início Rápido

TL;DR: Adicione isto ao seu arquivo ~/.claude-code/mcp.json:

{
  "mcpServers": {
    "origin-ui": {
      "command": "npx",
      "args": ["--yes", "github:kelvinchng/origin-ui-mcp"],
      "env": {}
    }
  }
}

Reinicie o Claude Code e pergunte: "Quais componentes de botão do OriginUI estão disponíveis?"

Instalação

Opção 1: Usar com npx (Recomendado - Sem Necessidade de Clonagem!)

Nenhuma instalação necessária! Você pode usar o servidor MCP diretamente do repositório GitHub com npx.

Opção 2: Clonar e Compilar Localmente

git clone https://github.com/kelvinchng/origin-ui-mcp.git
cd origin-ui-mcp
npm install
npm run build

Opção 3: Instalação Global (Em Breve)

npm install -g origin-ui-mcp

Integração com Claude Code

Passo 1: Adicionar à Configuração MCP do Claude Code

Crie ou edite seu arquivo de configuração MCP do Claude Code em ~/.claude-code/mcp.json:

Opção A: Usando npx (Recomendado)

{
  "mcpServers": {
    "origin-ui": {
      "command": "npx",
      "args": ["--yes", "github:kelvinchng/origin-ui-mcp"],
      "env": {}
    }
  }
}

Opção B: Usando clone local

{
  "mcpServers": {
    "origin-ui": {
      "command": "node",
      "args": ["/absolute/path/to/origin-ui-mcp/dist/index.js"],
      "env": {}
    }
  }
}

Nota: Com a Opção A (npx), nenhuma instalação manual ou configuração de caminho é necessária!

Passo 2: Reiniciar o Claude Code

Após adicionar a configuração MCP, reinicie o Claude Code para carregar o servidor MCP OriginUI.

Passo 3: Verificar a Integração

Você pode verificar se a integração está funcionando perguntando ao Claude Code:

"What OriginUI components are available for buttons?"

O Claude Code agora deve ser capaz de pesquisar, descrever e fornecer comandos de instalação para componentes OriginUI.

Exemplos de Uso

Uma vez integrado ao Claude Code, você pode fazer perguntas como:

"Encontre componentes relacionados a pagamento"
"Como instalo o componente de botão?"
"Quais opções de estilo o componente de cartão possui?"
"Mostre-me todos os componentes de navegação"
"Preciso de um componente para formulários de entrada de usuário"

O Claude Code usará o servidor MCP para fornecer informações precisas e comandos de instalação.

📸 Avaliação Visual de Componentes

Um dos principais recursos é a capacidade de obter pré-visualizações visuais dos componentes para ajudar LLMs a fazer melhores recomendações:

"Show me what the payment component looks like"
"Get a screenshot of the button component"
"I want to see the visual style of navigation components"

O servidor MCP fornecerá:

Descrições visuais da aparência do componente
Links para exemplos ao vivo no OriginUI
Informações específicas de tema (modos claro/escuro)
Detalhes de responsividade móvel
Recomendações de caso de uso baseadas no estilo visual

Ferramentas Disponíveis

`search_components`

Pesquise componentes OriginUI por nome, categoria ou tags.

Parâmetros:

query (string, obrigatório): Consulta de pesquisa
category (string, opcional): Filtrar por categoria
limit (número, opcional): Máximo de resultados (padrão: 10)

Exemplo:

search_components({
  query: "payment",
  category: "form",
  limit: 5
})

`get_component_details`

Obtenha informações detalhadas sobre um componente específico.

Parâmetros:

componentId (string, obrigatório): ID do componente (ex.: "comp-163")

Exemplo:

get_component_details({
  componentId: "comp-163"
})

`list_components`

Liste todos os componentes disponíveis com informações básicas.

Parâmetros:

category (string, opcional): Filtrar por categoria
limit (número, opcional): Máximo de resultados (padrão: 50)

`get_install_command`

Obtenha o comando de instalação para um componente específico.

Parâmetros:

componentId (string, obrigatório): ID do componente

Retorna:

pnpm dlx shadcn@latest add https://originui.com/r/comp-163.json

`get_component_preview`

Obtenha a pré-visualização do componente com informações de estilo e exemplos de uso.

Parâmetros:

componentId (string, obrigatório): ID do componente

`get_component_screenshot`

Obtenha a pré-visualização visual do componente para ajudar a avaliar se ele se adequa ao seu projeto.

Parâmetros:

componentId (string, obrigatório): ID do componente
theme (string, opcional): Preferência de tema ("light", "dark", "both")

Retorna:

Descrições visuais da aparência do componente
Capturas de tela quando disponíveis
Links para exemplos ao vivo
Recomendações de caso de uso
Instruções de instalação

Categorias de Componentes

button - Componentes de botão
input - Entradas e controles de formulário
select - Componentes de seleção e dropdown
navbar - Componentes de navegação
card - Componentes de cartão e contêiner
form - Componentes relacionados a formulários
layout - Componentes de layout
navigation - Elementos de navegação
feedback - Componentes de feedback e status
data-display - Componentes de exibição de dados
overlay - Componentes de modal e sobreposição
typography - Componentes de texto e tipografia
media - Componentes de mídia

Exemplo de Uso com Claude Code

// Search for button components
const buttons = await search_components({
  query: "button",
  category: "button",
  limit: 10
});

// Get details for a specific component
const details = await get_component_details({
  componentId: "comp-163"
});

// Get installation command
const installCmd = await get_install_command({
  componentId: "comp-163"
});

// Get visual preview to assess fit
const screenshot = await get_component_screenshot({
  componentId: "comp-163",
  theme: "both"
});

// Install the component
// pnpm dlx shadcn@latest add https://originui.com/r/comp-163.json

Desenvolvimento

# Install dependencies
npm install

# Build the project
npm run build

# Run in development mode
npm run dev

# Start the MCP server
npm start

Como Funciona

Descoberta de Componentes: O servidor mantém um registro de componentes OriginUI com metadados
Busca Dinâmica: Os detalhes dos componentes são obtidos do registro JSON do OriginUI sob demanda
Cache: Os componentes são armazenados em cache por 5 minutos para melhorar o desempenho
Instalação: Gera comandos pnpm dlx shadcn@latest add adequados com URLs corretas

Contribuindo

Faça um fork do repositório
Crie um branch de funcionalidade
Faça suas alterações
Adicione testes se aplicável
Envie um pull request

Licença

Licença MIT - consulte o arquivo LICENSE para obter detalhes.