Examples for use with the inspector #200
darrelmiller
started this conversation in
Show and tell
Replies: 1 comment
-
|
Hi Darrel, that's amazing given the state of the github repo 2 weeks ago. It should be better today, and hopefully better again in Jan. An A2UI specific inspector is a great idea. We have an A2UI Composer thanks to CopilotKit https://a2ui.org/composer/ and we have talked about an inspector... I honestly would like to wire in storybook.js.org as well, because you kind of have your own component library and can manipulate it in various ways (see thread with storybook founder). So I put it to you:
|
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Uh oh!
There was an error while loading. Please reload this page.
-
I have been trying to get a better understanding of how this A2UI works and I was able to get the Inspector running (it isn't very Windows friendly :-) ) and with some assistance from Copilot I was able to create some examples that would render in Inspector.
I created an address form
[ { "surfaceUpdate": { "surfaceId": "@default", "components": [ { "id": "root", "component": { "Column": { "children": { "explicitList": [ "formTitle", "nameCard", "streetCard", "cityRow", "countryCard" ] } } } }, { "id": "formTitle", "component": { "Text": { "text": { "literalString": "Address Information" }, "usageHint": "h1" } } }, { "id": "nameCard", "component": { "Card": { "child": "nameContent" } } }, { "id": "nameContent", "component": { "Column": { "children": { "explicitList": ["nameLabel", "nameField"] } } } }, { "id": "nameLabel", "component": { "Text": { "text": { "literalString": "Full Name" }, "usageHint": "caption" } } }, { "id": "nameField", "component": { "TextField": { "label": { "literalString": "Full Name" } } } }, { "id": "streetCard", "component": { "Card": { "child": "streetContent" } } }, { "id": "streetContent", "component": { "Column": { "children": { "explicitList": ["streetLabel", "streetField"] } } } }, { "id": "streetLabel", "component": { "Text": { "text": { "literalString": "Street Address" }, "usageHint": "caption" } } }, { "id": "streetField", "component": { "TextField": { "label": { "literalString": "Street Address" } } } }, { "id": "cityRow", "component": { "Row": { "children": { "explicitList": ["cityCard", "zipCard"] } } } }, { "id": "cityCard", "component": { "Card": { "child": "cityContent" } } }, { "id": "cityContent", "component": { "Column": { "children": { "explicitList": ["cityLabel", "cityField"] } } } }, { "id": "cityLabel", "component": { "Text": { "text": { "literalString": "City" }, "usageHint": "caption" } } }, { "id": "cityField", "component": { "TextField": { "label": { "literalString": "City" } } } }, { "id": "zipCard", "component": { "Card": { "child": "zipContent" } } }, { "id": "zipContent", "component": { "Column": { "children": { "explicitList": ["zipLabel", "zipField"] } } } }, { "id": "zipLabel", "component": { "Text": { "text": { "literalString": "ZIP Code" }, "usageHint": "caption" } } }, { "id": "zipField", "component": { "TextField": { "label": { "literalString": "ZIP Code" } } } }, { "id": "countryCard", "component": { "Card": { "child": "countryContent" } } }, { "id": "countryContent", "component": { "Column": { "children": { "explicitList": ["countryLabel", "countryField"] } } } }, { "id": "countryLabel", "component": { "Text": { "text": { "literalString": "Country" }, "usageHint": "caption" } } }, { "id": "countryField", "component": { "MultipleChoice": { "selections": { "path": "/selectedCountry" }, "options": [ { "label": { "literalString": "United States" }, "value": "US" }, { "label": { "literalString": "Canada" }, "value": "CA" }, { "label": { "literalString": "Mexico" }, "value": "MX" }, { "label": { "literalString": "United Kingdom" }, "value": "UK" }, { "label": { "literalString": "Germany" }, "value": "DE" }, { "label": { "literalString": "France" }, "value": "FR" } ], "maxAllowedSelections": 1 } } } ] } }, { "dataModelUpdate": { "surfaceId": "@default", "path": "/", "contents": [ { "key": "selectedCountry", "valueString": "[\"CA\"]" } ] } }, { "beginRendering": { "root": "root", "surfaceId": "@default" } } ]and a credit card entry form
[ { "surfaceUpdate": { "surfaceId": "@default", "components": [ { "id": "root", "component": { "Column": { "children": { "explicitList": [ "formTitle", "cardNumberCard", "cardholderCard", "expiryRow" ] } } } }, { "id": "formTitle", "component": { "Text": { "text": { "literalString": "Payment Information" }, "usageHint": "h1" } } }, { "id": "cardNumberCard", "component": { "Card": { "child": "cardNumberContent" } } }, { "id": "cardNumberContent", "component": { "Column": { "children": { "explicitList": ["cardNumberLabel", "cardNumberField"] } } } }, { "id": "cardNumberLabel", "component": { "Text": { "text": { "literalString": "Card Number" }, "usageHint": "caption" } } }, { "id": "cardNumberField", "component": { "TextField": { "label": { "literalString": "Card Number" }, "text": { "path": "/cardNumber" } } } }, { "id": "cardholderCard", "component": { "Card": { "child": "cardholderContent" } } }, { "id": "cardholderContent", "component": { "Column": { "children": { "explicitList": ["cardholderLabel", "cardholderField"] } } } }, { "id": "cardholderLabel", "component": { "Text": { "text": { "literalString": "Cardholder Name" }, "usageHint": "caption" } } }, { "id": "cardholderField", "component": { "TextField": { "label": { "literalString": "Cardholder Name" }, "text": { "path": "/cardholderName" } } } }, { "id": "expiryRow", "component": { "Row": { "children": { "explicitList": ["expiryCard", "cvvCard"] } } } }, { "id": "expiryCard", "component": { "Card": { "child": "expiryContent" } } }, { "id": "expiryContent", "component": { "Column": { "children": { "explicitList": ["expiryLabel", "expiryField"] } } } }, { "id": "expiryLabel", "component": { "Text": { "text": { "literalString": "Expiry Date (MM/YY)" }, "usageHint": "caption" } } }, { "id": "expiryField", "component": { "TextField": { "label": { "literalString": "Expiry Date" }, "text": { "path": "/expiryDate" } } } }, { "id": "cvvCard", "component": { "Card": { "child": "cvvContent" } } }, { "id": "cvvContent", "component": { "Column": { "children": { "explicitList": ["cvvLabel", "cvvField"] } } } }, { "id": "cvvLabel", "component": { "Text": { "text": { "literalString": "CVV" }, "usageHint": "caption" } } }, { "id": "cvvField", "component": { "TextField": { "label": { "literalString": "CVV" }, "text": { "path": "/cvv" } } } } ] } }, { "beginRendering": { "root": "root", "surfaceId": "@default" } }, { "dataModelUpdate": { "surfaceId": "@default", "path": "/", "contents": [ { "key": "cardNumber", "valueString": "4532 1234 5678 9010" }, { "key": "cardholderName", "valueString": "John Smith" }, { "key": "expiryDate", "valueString": "12/25" }, { "key": "cvv", "valueString": "123" } ] } }, { "beginRendering": { "root": "root", "surfaceId": "@default" } } ]Beta Was this translation helpful? Give feedback.
All reactions