AI Tinkerers' Cards V2
Sign in

Code related demos

Examples or demos you can use to explain AI coding capabilities to non coders.

Demo: Add-to-calendar link generator

The use case

Imagine that you regularly organize events and you want to make it easy for people to add them to their calendar.

You could ask them to copy and paste the information on their calendar app. Or event to import the ics file. But that's not very user friendly.

But what if you could generate a clickable link that people could just click on and that would add the event to their calendar?

In this demo, we will use an AI assistant to generate a simple webapp that takes event details as input and generates an HTML snippet containing "Add to Calendar" links for popular calendar apps like Google Calendar.

Pedagogical goal

This demo shows how anyone can use AI coding capabilities of a modern AI assistant to generate a (simple) webapp that runs directly in the AI assistant.

This demo currently works with ChatGPT and its Canvas feature and Claude with its Artifacts feature.

Alternatively, you could showcase how the same prompt works with an Agentic app builder like Bolt, Replit or Lovable (learn more about these tools in this article).

The prompt

You have two variants of the prompt. Depending on your goal, you can choose one or the other.

Variant 1:

This prompt will probably have issues with dates with an LLM and might work with a reasoning engine. Use it if you want to teach prompting principles or to show the difference between an LLM and a reasoning engine.
Build a web app that takes event details as input and generates an HTML snippet containing "Add to Calendar" links for Google Calendar, Outlook Live, and Office 365.

Variant 2:

This prompt adds an instructions to make sure the date is correctly formatted. Use it for a quick demo of the AI coding capabilities.
Build a web app that takes event details as input and generates an HTML snippet containing "Add to Calendar" links for Google Calendar, Outlook Live, and Office 365.

Important: Ensure the application correctly parses, validates, and formats user-inputted datetime-local values into ISO 8601 format while handling time zones and encoding them appropriately for calendar links.

Demo2: TBD

More code demos to come.

Start Here

Welcome to the Example and Demo Library!

Text to Structured Text

Examples or demos you can use to explain Text-to-Structured Text (like CSV).