|
| 1 | +# frozen_string_literal: true |
| 2 | + |
| 3 | +class Views::Docs::Mcp < Views::Base |
| 4 | + def view_template |
| 5 | + div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do |
| 6 | + render Docs::Header.new( |
| 7 | + title: "MCP Server", |
| 8 | + description: "Connect AI agents to Ruby UI components, source, examples, and install commands." |
| 9 | + ) |
| 10 | + |
| 11 | + # About MCP |
| 12 | + div(class: "space-y-4") do |
| 13 | + Heading(level: 2) { "About MCP" } |
| 14 | + p(class: "text-foreground/80 leading-relaxed") do |
| 15 | + plain "MCP (Model Context Protocol) is an open standard for connecting AI assistants to external data sources and tools. " |
| 16 | + plain "Ruby UI exposes an MCP server so your AI agent can list available components, view their source files, search the docs, and generate the exact install command for your app." |
| 17 | + end |
| 18 | + end |
| 19 | + |
| 20 | + # Setup |
| 21 | + div(class: "space-y-6") do |
| 22 | + Heading(level: 2) { "Setup" } |
| 23 | + p(class: "text-foreground/80") { "Add the Ruby UI MCP server to your editor or AI client using the snippets below." } |
| 24 | + |
| 25 | + # Claude Code |
| 26 | + div(class: "space-y-2") do |
| 27 | + Heading(level: 3) { "Claude Code" } |
| 28 | + Codeblock("claude mcp add --transport http ruby-ui https://rubyui.com/mcp", syntax: :shell, clipboard: true) |
| 29 | + end |
| 30 | + |
| 31 | + # Cursor |
| 32 | + div(class: "space-y-2") do |
| 33 | + Heading(level: 3) { "Cursor" } |
| 34 | + p(class: "text-sm text-foreground/70") { "Add to .cursor/mcp.json:" } |
| 35 | + Codeblock(cursor_config_json, syntax: :json, clipboard: true) |
| 36 | + end |
| 37 | + |
| 38 | + # Claude Desktop |
| 39 | + div(class: "space-y-2") do |
| 40 | + Heading(level: 3) { "Claude Desktop" } |
| 41 | + p(class: "text-sm text-foreground/70") { "Add to claude_desktop_config.json:" } |
| 42 | + Codeblock(generic_config_json, syntax: :json, clipboard: true) |
| 43 | + end |
| 44 | + |
| 45 | + # Windsurf |
| 46 | + div(class: "space-y-2") do |
| 47 | + Heading(level: 3) { "Windsurf" } |
| 48 | + p(class: "text-sm text-foreground/70") { "Add to mcp_config.json:" } |
| 49 | + Codeblock(generic_config_json, syntax: :json, clipboard: true) |
| 50 | + end |
| 51 | + |
| 52 | + # VS Code |
| 53 | + div(class: "space-y-2") do |
| 54 | + Heading(level: 3) { "VS Code" } |
| 55 | + p(class: "text-sm text-foreground/70") { "Add to .vscode/mcp.json:" } |
| 56 | + Codeblock(generic_config_json, syntax: :json, clipboard: true) |
| 57 | + end |
| 58 | + |
| 59 | + # Zed |
| 60 | + div(class: "space-y-2") do |
| 61 | + Heading(level: 3) { "Zed" } |
| 62 | + p(class: "text-sm text-foreground/70") { "Add to settings.json:" } |
| 63 | + Codeblock(zed_config_json, syntax: :json, clipboard: true) |
| 64 | + end |
| 65 | + end |
| 66 | + |
| 67 | + # Usage |
| 68 | + div(class: "space-y-4") do |
| 69 | + Heading(level: 2) { "Usage" } |
| 70 | + p(class: "text-foreground/80") { "Once connected, ask your agent questions like:" } |
| 71 | + ul(class: "list-disc list-inside space-y-1 text-foreground/80") do |
| 72 | + li { "Install Button and Dialog from Ruby UI." } |
| 73 | + li { "Show me the source of the Card component." } |
| 74 | + li { "Search Ruby UI for a date input." } |
| 75 | + li { "Audit my Ruby UI install." } |
| 76 | + end |
| 77 | + end |
| 78 | + |
| 79 | + # Tools |
| 80 | + div(class: "space-y-4") do |
| 81 | + Heading(level: 2) { "Tools" } |
| 82 | + p(class: "text-foreground/80") { "The MCP server exposes the following tools:" } |
| 83 | + div(class: "overflow-x-auto rounded-md border") do |
| 84 | + table(class: "w-full text-sm") do |
| 85 | + thead(class: "border-b bg-muted/50") do |
| 86 | + tr do |
| 87 | + th(class: "px-4 py-3 text-left font-medium") { "Tool" } |
| 88 | + th(class: "px-4 py-3 text-left font-medium") { "Description" } |
| 89 | + end |
| 90 | + end |
| 91 | + tbody do |
| 92 | + tools_list.each_with_index do |(tool, description), i| |
| 93 | + tr(class: i.even? ? "" : "bg-muted/30") do |
| 94 | + td(class: "px-4 py-3 font-mono text-xs") { tool } |
| 95 | + td(class: "px-4 py-3 text-foreground/80") { description } |
| 96 | + end |
| 97 | + end |
| 98 | + end |
| 99 | + end |
| 100 | + end |
| 101 | + end |
| 102 | + |
| 103 | + # Troubleshooting |
| 104 | + div(class: "space-y-4") do |
| 105 | + Heading(level: 2) { "Troubleshooting" } |
| 106 | + ul(class: "list-disc list-inside space-y-2 text-foreground/80") do |
| 107 | + li { "Endpoint must be reachable; corporate proxies may block streamable HTTP." } |
| 108 | + li { "If the agent can't find components, ask it to call get_project_registries first." } |
| 109 | + li { "Run bundle exec rails g ruby_ui:component <Name> only inside a Rails app with ruby_ui in its Gemfile." } |
| 110 | + end |
| 111 | + end |
| 112 | + end |
| 113 | + end |
| 114 | + |
| 115 | + private |
| 116 | + |
| 117 | + def cursor_config_json |
| 118 | + <<~JSON |
| 119 | + { |
| 120 | + "mcpServers": { |
| 121 | + "ruby-ui": { "url": "https://rubyui.com/mcp" } |
| 122 | + } |
| 123 | + } |
| 124 | + JSON |
| 125 | + end |
| 126 | + |
| 127 | + def generic_config_json |
| 128 | + cursor_config_json |
| 129 | + end |
| 130 | + |
| 131 | + def zed_config_json |
| 132 | + <<~JSON |
| 133 | + { |
| 134 | + "context_servers": { |
| 135 | + "ruby-ui": { "source": "http", "url": "https://rubyui.com/mcp" } |
| 136 | + } |
| 137 | + } |
| 138 | + JSON |
| 139 | + end |
| 140 | + |
| 141 | + def tools_list |
| 142 | + [ |
| 143 | + ["get_project_registries", "Lists available registries."], |
| 144 | + ["list_items_in_registries", "Returns all components with descriptions."], |
| 145 | + ["search_items_in_registries", "Fuzzy search by name, description, or docs."], |
| 146 | + ["view_items_in_registries", "Returns full source files and dependencies."], |
| 147 | + ["get_item_examples_from_registries", "Returns code examples per component."], |
| 148 | + ["get_add_command_for_items", "Returns a validated rails g ruby_ui:component … command."], |
| 149 | + ["get_audit_checklist", "Returns a post-install verification checklist."], |
| 150 | + ["get_install_command_for_project", "Returns commands to bootstrap ruby_ui in a fresh Rails project."] |
| 151 | + ] |
| 152 | + end |
| 153 | +end |
0 commit comments