Create Copilot: Best Practices -- Share Your Results and Screenshots!

[adamLC]

Hi everyone!

We’ve just launched the very first version of Create Copilot and it’s been fantastic seeing what you’ve all been creating so far! To help you get even more out of it, we thought we’d write up a simple guide to the best practices, tips, and general things to expect in this first version.

Work Step-By-Step

Create Copilot currently works in one mode at a time:

• Create a Layout
• Edit an existing layout
• Edit scripts

It won’t mix layout creation and script editing in one prompt (by design). This keeps performance high and avoids overwriting scripts every time you tweak a layout.

Layout Creation

• Start prompts with something like “Create a layout for a…” and describe the structure clearly.
• Layout generation usually takes 2–3 minutes (longer for complex ones).
• You’ll see a stop icon while it’s working.
• Copilot knows all the new Material widgets, including the improved List widget.
• You can only use theming prompts when creating a layout, not to edit an existing layout. (Theme editing via AI is coming soon.)
  
  

Responsive Design

• Most layouts will be responsive by default. You can explicitly ask for a layout that is not responsive if you do not want this.
• Create Copilot has full knowledge of the new responsive layout library, including the concept that different objects should be shown at given breakpoints, the creation of rows and columns and setting appropriate properties on a wide range of layouts.

Layout Editing

• Edits will be applied to the current layout or current selection (which is labelled within the copilot window). Describe changes in clear language so that it knows you want to change the layout not build a new one or edit scripts.
  

  

• A layout history is stored so if you aren’t happy with the changes you can return to a previous version of the layout using the “Restore” button.

</> Script Editing

• Once you have a working layout, you can say something like “write scripts to make my entire [purpose of layout] work”.
• Script editing is capable of working on multiple objects within one layout, or on a single object or handler. You will be able to see all the changes before applying them, and revert them later if you don’t like them.
• Click the “View Diff” button to see the difference across your handler as a whole:
  
  

Coming Soon

• Support for the cloud datastore
• Support for cloud media assets
• Theme editing during the edit phase
• AI-generated Actions

We Really Want to See What You’re Making

Your experiences are incredibly valuable right now.

Whether it’s something Copilot generated perfectly, something unexpected, or something that confused you — please share it.

We’d love to see:

• Screenshots of generated layouts or scripts
• The prompts you used
• Successes, surprises, glitches
• Anything you think could help us improve

A huge thank you for your continued feedback and support. Every comment, screenshot, and shared experience helps shape the future of Create and we’re really excited to show you what’s coming next!

[marksmithhfx]

This is my first attempt at using Create Copilot. I downloaded and installed LC Create. Following Heather’s “Lets Dive In” lesson I launched the app, selected New Project, named it Leads Management (just for originalities sake ) and watched the big blue circle spin for a while… and spin, and spin. Thinking this strange I thought I might investigate a bit further. This first attempt had been on an M1 MacBook running Sequoia 15.6 BUT, a have an older Intel MacBook running Ventura 13.7.8. So I thought, let’s try that and see what happens. Download Create 1.0 install again, launch and what do I see… A project called Leads Management. Hmm, says I, I wonder if I get the SAME thing on the M1 now if I quit here (on Intel Mac) (not knowing if you are checking number of machines/seats on the license) and proceed to restart it on the M1. And lo and behold when I open the Create app on the M1 I see the exact same project titled Leads Management. Fine, I say to myself, I will continue with the lesson. So I go back to the lesson and notice you have a palette on the screen. When I click on Leads Management on the M1 I don’t see that… I get the screen you see below… with a little dialog warning me that if I unlock I might lose something (paraphrasing) but I decide to do it anyway (what’s there to lose? I haven’t even started??) and the project screen goes away and nothing else appears, no palette screen, just the tools menu. And I don’t know how to get back to that palette screen because I don’t even know what its called (ok, now I see it in the video… Layout 1… but I did not see it before). Finally, I click around and find an option to delete the project so think to myself, yeah, let’s delete and start over. Maybe better luck the 2nd time. And when I do that, voila, the newly created Leads Management project has a palette er… layout. Continuing…

(This is also my first time using this message board so I’m not sure the screenshots will show up… but let’s see).

I tried the prompt form creation Heather suggested in her blog post and got this…

Which, as you say, is not a bad first step (and I’ve played around enough with ChatGPT to know that the AI’s can rarely (never?) EXACTLY reproduce anything twice, and you spend oodles of time tweaking it to get it just right afterword…. BUT, I am not minimising the time savings it can provide…. they are substantial. I decided to follow up with a 2nd attempt to see what it would create and this time it produced…

With 2 date fields and 2 drop down lists, but neither of the date fields had a date picker. I decided to stick with this one.

Moving forward… on the collection creation front I found it a bit annoying (since I was working from a copy of the form above) to have the entries resort alphabetically. A few times I found myself wondering if I had missed entering something (or did it wrong) because I did not find it at the end of the list like I was expecting.

At least in the beginning it might be nice when you select a drop down field to indicate it must be paired with an enum field. I think it possible, in some cases, to have a drop down that goes into a text field. But a minor point. You figure it out soon enough. However, my enum fields do not seem to enum properly. They look ok in the collection creator (I used comma separated values) but they appear all on 1 line in the UI.

One last thing. If I quit and come back later it does not display the data element that is bound to a UI field, for example in the following where I am in Edit mode I select the Meeting Date field and in the database tab nothing (no datasource or Widget data) is displayed. It seemed to show it when I was first connecting the elements, but not after I exited and came back. Couldn’t see a way to test if it was still connected or not.

I think that’s as far as I could go with the 2 lessons, and I think you indicated you would be showing us how to enter records into the collection (from the UI) using the Submit button in the next lesson. I must admit, a tremendous amount has been accomplished since I last looked at this (over a year ago I believe) which is encouraging, and I hope to play with it some more in the future. To you and all the folks at LC, a very merry Christmas and Happy New Year.

Oh wait, I just had the bright idea to try it in Run mode and this time the enum fields are enumerating properly and work as expected. C’est incroyable

All the best,
Mark

[kevinmiller]

Great to get this feedback, thanks. Not sure why you had those initial issues running. Glad it’s working well for you now.

[adamLC]

Thanks for this great feedback! We’re aware of the collections issue where data is forced to be ordered alphabetically, and it needs to be more clear on how to properly set up enum fields etc.

In regards to the issue of fields becoming unbound from collections after setting them, this shouldn’t happen. This can occur if the databinding wasn’t completed, for example if you choose a data source to bind to but didn’t select a field from the Widget Data drop down.

Or there could be something else going on, if you reproduce the same problem please let us know and we can look into it.

Really glad you’ve had a mostly positive experience with your first copilot. Wishing you a merry Christmas and a happy new year too!

[marksmithhfx]

Thanks Adam.

Perhaps this is more a feature request that a problem but, when I first bind fields and then in the same session click on the fields on the form, I can see in the properties panel the location (collection / data field) where the content on the form is bound (stored). Here’s a simple example… in this image I have selected the Email field and in the properties panel you can see the collection and field names.

Likewise when I switched to the Follow-Up Date field on the form, the property panel changes to reflect where that data is going to be stored (in collection Leads Management / Field Follow-up Date). However, if I quit the application and then reOpen it later, I no longer see these connections ie. clicking on a field in the form does not display anything in the properties panel. I would like it if it continued to show the connection that was originally established.

Also, what is the cause of it always locking the project?

Many thanks,
Mark

[adamLC]

Ok thanks for that information. This shouldn’t be happening and I have a feeling it’s related to the locked project. Are you saving before quitting? Projects usually become locked when there has been an issue with saving. Returning to your My Projects page before quitting may help.

[marksmithhfx]

Gents,

In preparation for Heathers 3rd lesson, “Using Create – Actions” I decided to finish off my last form building attempt (see layout 2 above) by adding data pickers to both the Meeting Date and Follow-up Date fields.

I used the following AI prompt

Layout 2 contains 2 date fields: Meeting Date and Follow-up Date. Please add a little calendar icon to the end of each field and use clicking on the calendar icon to open a proper calendar app in another window from which the user can pick a date and have the selected date entered into the appropriate field (either Meeting Date or Follow-up Date as appropriate).

And received back the following error message

Error: Input either a layout editing instruction or a code editing one, not both together. Please edit your request and try again.

Figuring this might have something to do with what Heather mentioned in the blog about not overloading the AI, I decided to break it down into smaller steps and do it for 1 field at a time. I requested…

Please insert a calendar icon at the end of the Meeting Date field in Layout 2. Make it visible and about the same size and placement as the down arrow icon in the Meeting Type field.

Which, remarkably, produced what I wanted.

Following that I then asked…

Thank you for the icon. Well done. Now, when I click on the icon please display a proper date picker calendar, get the date selected by the user, and put it into the Meeting Date field.

Which resulted in some handlers (2 as best as I can tell, although it said 3)

on mouseUp
local tPickerName, tX, tY
put “MeetingDatePicker” into tPickerName
if there is a widget tPickerName then
delete widget tPickerName
end if
create widget tPickerName in group “FormSection”
set the widgetKind of widget tPickerName to “com.livecode.widget.datepicker”
put the left of me into tX
put the bottom of me into tY
set the left of widget tPickerName to tX
add 4 to tY
set the top of widget tPickerName to tY
set the layer of widget tPickerName to top
end mouseUp

and…

Hmmmm, just went to LC Create to copy the 2nd script and it’s title bar has a spinning blue icon next to the title “My Workspace / Leads Management” and is non-responsive. I am switching between LC Create, text edit and MS Word in order to produce this report but LC Create seems to have crashed. Is there a “magic” key I can use to awaken it in such circumstances?

Only option was to Quit

I restarted LC Create, it was locked, opened anyway. And all from the last session was lost. Starting again with the same prompts.

In response to the first prompt (add a calendar icon) I received this message.

Will add a trailing calendar icon to MeetingDateInput (@8). Need dropdownfield API for MeetingType (@12) to read its arrow icon size/name to match; cannot safely read its props without that guide.

Tried a 2nd time but got a similar response…

Need the dropdownfield widget API guide for MeetingType (@12) to read its down-arrow icon name/size so the calendar icon can match placement and size.

I will try again later to see if I get a more cooperative response.

[marksmithhfx]

Continuing the saga of trying to add a date icon to a field (that later will be turned into a clickable icon).

So first, I have successfully done this in the past using this prompt:

Please insert a calendar icon at the end of the Meeting Date field in Layout 2. Make it visible and about the same size and placement as the down arrow icon in the Meeting Type field.

This resulted in the following:

Which I subsequently lost because LC Create froze before I had saved it.

Subsequent attempts to create this have failed, this being the latest attempt. In this attempt LC Create offers a script to run to create the desired result. I’ve copied it here verbatim…

Yes — I’ll make that change. I’ll assume you’re editing a LiveCode Create layout (Layout 2) and that “Meeting Date” and “Meeting Type” are widgets on the same layout; if that’s not correct tell me and I’ll adjust. Here’s a minimal LiveCode script you can run from the card/script or an administration handler to add a calendar icon to the Meeting Date field, size it to ~1/2 inch (use the current screen DPI conversion), center it vertically and right‑justify it inside the field, and match the down arrow placement for Meeting Type.

command addCalendarIconToMeetingDate
– names of controls (adjust if different)
put “Meeting Date” into tDateName
put “Meeting Type” into tTypeName
put “calendarIcon” into tIconResourceName – replace with your image name

– find widgets
put the id of widget tDateName into tDateId
if tDateId is empty then
answer “Cannot find widget:” && tDateName
exit to top
end if
put the id of widget tTypeName into tTypeId
if tTypeId is empty then
answer “Cannot find widget:” && tTypeName
exit to top
end if

– get geometry of Meeting Type’s down arrow placement by comparing its icon/image if one exists,
– otherwise use the widget’s bounds for reference.
– We’ll match vertical center and right offset relative to the field’s right edge.
put the rect of widget tTypeId into tTypeRect
put item 3 of tTypeRect - item 1 of tTypeRect into tTypeWidth
put item 4 of tTypeRect - item 2 of tTypeRect into tTypeHeight

– Determine target size in pixels for ~0.5 inch
put the defaultFontSize into tDummy – just to use a screen DPI conversion
put the screenDPI() into tDPI – custom helper below
if tDPI = 0 then put 96 into tDPI
put round(0.5 * tDPI) into tTargetSize – pixels for 0.5 inch

– Create or reuse image widget for calendar icon
– If an image widget named “MeetingDateCalendar” exists, reuse it.
put “MeetingDateCalendar” into tIconName
put the id of widget tIconName into tIconId
if tIconId is empty then
create widget
put the short id of the result into tIconId
set the name of widget id tIconId to tIconName
end if

– set the widget to be an image and assign the image resource
– For LiveCode Create image widgets, set the data property to the resource name if needed.
– We’ll set basic properties and then position it.
set the type of widget id tIconId to “image”
try
set the imageData of widget id tIconId to tIconResourceName
catch e
– if your Create build uses a different property name, try setting the source or file.
end try

– Size and position: right-justified inside Meeting Date field, vertically centered
put the rect of widget tDateId into tDateRect
put item 1 of tDateRect into tLeft
put item 2 of tDateRect into tTop
put item 3 of tDateRect into tRight
put item 4 of tDateRect into tBottom
put round((tTop + tBottom) / 2) into tCenterY

– final icon pixel size: use min of target size and field height minus padding
put tTargetSize into tIconSize
put (tBottom - tTop) into tFieldHeight
put round(tFieldHeight * 0.85) into tMaxIcon
if tIconSize > tMaxIcon then put tMaxIcon into tIconSize

– compute icon rect (centered vertically, right-justified with small padding)
put 6 into tRightPadding – pixels from right edge; adjust if needed
put tRight - tRightPadding - tIconSize into tIconLeft
put tCenterY - round(tIconSize / 2) into tIconTop
put tIconLeft + tIconSize into tIconRight
put tIconTop + tIconSize into tIconBottom
set the rect of widget id tIconId to tIconLeft, tIconTop, tIconRight, tIconBottom

– appearance
set the showBorder of widget id tIconId to false
set the enabled of widget id tIconId to true
set the visible of widget id tIconId to true
– Make sure it sits above the field
set the layer of widget id tIconId to “above”

– align with Meeting Type’s arrow vertical center: match centerY offset relative to top of its field
put (item 2 of tTypeRect + item 4 of tTypeRect) / 2 - tTop into tOffset
– move icon vertically by that offset difference if needed (this keeps centers consistent)
put (item 2 of tDateRect + item 4 of tDateRect) / 2 into tDateCenter
put (item 2 of tTypeRect + item 4 of tTypeRect) / 2 into tTypeCenter
put tTypeCenter - tDateCenter into tDeltaY
if tDeltaY <> 0 then
move widget id tIconId vertically by tDeltaY
end if

end addCalendarIconToMeetingDate

– helper to estimate screen DPI; most LiveCode builds don’t expose DPI directly.
function screenDPI
– try to compute using monitor properties; fallback to 96
try
put the screenPixelsPerInch into tD
if tD is not empty and tD > 0 then
return tD
end if
catch
end try
return 96
end screenDPI

So, my first question is (1) if it has access to the stack (it does, it’s called Layout 2) and it’s open in the editor, why does it have to make assumptions? (2) the objects it references are not called “Meeting Date” and “Meeting Type” those are the labels for the objects. The objects themselves have names like “MeetingDateInput” and “MeetingType” so the script it wrote will fail. Why can’t it just reference the objects by the correct name (if it has access to them, which it appears it does)? (3) There is a calendar icon included in the LC SVG Icon set which is called “calendar”. I wonder why it just can’t use that? Finally, do I just plop this into card id 1674 of stack layout 2 and run it? I have the script in there now… I’ll try stepping through it to see what happens.

I get lots of errors, some I ignore (comment out the line) but this one is more serious. Line 37 in the script reads:

  create widget

And the corresponding error is card id 1674: compilation error at line 37 (create: can’t create this type), char 7

So, I think I am going to forget about trying to get that calendar icon I once had into the Date field and move on with the rest of Lesson 3.

[marksmithhfx]

Moving on. I went to add a dummy record with Client Name, Contact Name and Meeting Date and got this error message…

Help!! I need to be able to enter dummy records in order to keep up!!