@unabridged/midwest 0.21.1 → 0.22.1

package/README.md

@@ -109,6 +109,69 @@ bin/rails midwest:generate:component YourComponent
 
 The syntax follows [ViewComponent's generator](https://viewcomponent.org/guide/generators.html).
 
+### MCP Server
+
+Midwest ships an [MCP](https://modelcontextprotocol.io) server that gives AI agents live access to the component API. To connect, add to `.mcp.json`:
+
+```json
+{
+  "mcpServers": {
+    "midwest": {
+      "command": "bundle",
+      "args": ["exec", "midwest_mcp"]
+    }
+  }
+}
+```
+
+The server exposes 8 tools: `list_components`, `get_component_api`, `search_components`, `get_component_examples`, `get_helper_methods`, `get_form_builder_info`, `get_component_relationships`, and `validate_component_usage`.
+
+### Component Guidance
+
+The MCP server includes a guidance system that helps agents avoid common composition mistakes. Guidance is stored in `lib/midwest/mcp/data/component_guidance.yml` and surfaced through MCP tools automatically.
+
+Two data sources feed into guidance:
+
+- **Auto-detected**: Template scanning discovers which components internally render other components (e.g., `StatComponent` renders a `CardComponent`). This powers redundant nesting warnings.
+- **Curated**: Anti-patterns and best practices added to the YAML file from real agent mistakes observed in the field.
+
+Use `bin/guidance` to manage guidance data:
+
+```bash
+bin/guidance              # List components with guidance and auto-detected internal renders
+bin/guidance show stat    # Show full guidance for a component
+bin/guidance add          # Describe a pattern in plain text; Claude formats and appends it
+bin/guidance scan         # Display the internally-renders graph for all components
+bin/guidance check        # Validate YAML keys against the component index
+```
+
+The `add` command opens your `$EDITOR` for you to describe an anti-pattern or best practice in plain English. When you save and close, the Claude CLI processes your description into properly formatted YAML and appends it to the guidance file. This is the fastest way to capture a mistake you spotted an agent making in the field.
+
+You can also edit `lib/midwest/mcp/data/component_guidance.yml` directly:
+
+```yaml
+stat_component:
+  anti_patterns:
+    - title: "Wrapping stat in a card"
+      description: "StatComponent already renders a CardComponent internally."
+      bad: |
+        <%= midwest_card do %>
+          <%= midwest_stat value: "1,234", label: "Users" %>
+        <% end %>
+      good: |
+        <%= midwest_stat value: "1,234", label: "Users" %>
+  best_practices:
+    - title: "Group stats in a grid"
+      description: "Use midwest_grid to lay out multiple stats."
+      example: |
+        <%= midwest_grid columns: 3 do %>
+          <%= midwest_stat value: "1,234", label: "Users" %>
+          <%= midwest_stat value: "567", label: "Orders" %>
+        <% end %>
+```
+
+Run `bin/guidance check` after editing to verify all component keys are valid.
+
 ### Deploying your application
 
 In order to deploy your application the deploy server will need access to the private repo. One way to accomplish that is to add the deploy key on this repo to the deploy server. You should be able to create the key from the values in the Shared 1Password vault entry "GitHub - Midwest"

package/app/assets/javascript/midwest/index.ts

@@ -13,7 +13,6 @@ import Form from '../../../components/midwest/form/form_controller'
 import CountdownTimer from '../../../components/midwest/countdown_timer_component/countdown_timer_component_controller'
 import Badge from '../../../components/midwest/badge_component/badge_component_controller'
 import Confirmation from '../../../components/midwest/confirmation_component/confirmation_component_controller'
-import AvatarGroup from '../../../components/midwest/avatar_group_component/avatar_group_component_controller'
 import Chart from '../../../components/midwest/chart_component/chart_component_controller'
 import Range from '../../../components/midwest/form/range_component/range_component_controller'
 import Rating from '../../../components/midwest/rating_component/rating_component_controller'
@@ -29,6 +28,10 @@ import ShowIf from '../../../components/midwest/show_if_component/show_if_compon
 import TreeView from '../../../components/midwest/tree_view_component/tree_view_component_controller'
 import CommandPalette from '../../../components/midwest/command_palette_component/command_palette_component_controller'
 import Repeatable from '../../../components/midwest/form/repeatable_component/repeatable_component_controller'
+import PasswordRequirements from '../../../components/midwest/password_requirements_component/password_requirements_component_controller'
+import CodeBlock from '../../../components/midwest/code_block_component/code_block_component_controller'
+import DatePicker from '../../../components/midwest/form/date_picker_component/date_picker_component_controller'
+import TimePicker from '../../../components/midwest/form/time_picker_component/time_picker_component_controller'
 /* IMPORTS */
 
 export { Card, Banner, CountdownTimer, Chart }
@@ -49,7 +52,6 @@ export function registerMidwestControllers (application: any) {
   application.register('midwest-form', Form)
   application.register('midwest-badge', Badge)
   application.register('midwest-confirmation', Confirmation)
-  application.register('midwest-avatar-group', AvatarGroup)
   application.register('midwest-chart', Chart)
   application.register('midwest-range', Range)
   application.register('midwest-rating', Rating)
@@ -65,5 +67,9 @@ export function registerMidwestControllers (application: any) {
   application.register('midwest-tree-view', TreeView)
   application.register('midwest-command-palette', CommandPalette)
   application.register('midwest-repeatable', Repeatable)
+  application.register('midwest-password-requirements', PasswordRequirements)
+  application.register('midwest-code-block', CodeBlock)
+  application.register('midwest-date-picker', DatePicker)
+  application.register('midwest-time-picker', TimePicker)
   /* EXPORTS */
 }