The GPT Odyssey: When Code becomes Conversations

AI is eating the world, one algorithm at a time, and you're probably already neck-deep in it. Time to demystify it! In my talk, I’m thrilled to guide you from the overwhelming AI hype to the exciting realm of hands-on development. We will plunge into the universe of GPT plugins – a mix of AI's innovative power, supercharged by JavaScript and OpenAPI. I’ll share my journey of creating a custom GPT plugin, now used by over three hundred users. Expect insights from the development trenches – the ups, the downs, and everything in between. By the end of our session, you’ll be more than ready to craft your own GPT plugin. Together, we’ll unlock the doors to the world of large language models (LLMs) and AI.

Given at DevBCN 2024
APIdays Paris 2023

Transcript

1. The GPT Odyssey: When Code becomes Conversations NICOLAS GRENIÉ DEVELOPER ADVOCATE, TYPEFORM @PICSOUNG DEVBCN 2024
2. 👋 I Am Nico 🧑💻 Developer Advocate 📍Barcelona 💖 APIs 🏗 Typeform ChatGPT plugin @picsoung
3. Have You Tried ChatGPT? @picsoung
4. Some Limitations 🧠 Cut off date @picsoung GPT-4o - October 2023
5. @picsoung
6. Some Limitations 🧠 Cut off date 🔒 Access private data 👁 Read only ⚙ Complex actions @picsoung
7. ChatGPT Plugins 💪 @picsoung GPTs 💪💪 ChatGPT Plugins 💪 Assistant? 🤔
8. Assistant @picsoung 🌐 Embed in product/service 💵 Usage-based pricing ⚙ Programmatic use 🧰 Code Interpreter, Function calling 💻 Coding required
9. GPT @picsoung 📍 Directly in ChatGPT 🫰 Included in ChatGPT sub 📚 Knowledge 🧰 DALL-E, Browsing, Code Interpreter 🙅 No-code
10. @picsoung Remember Alexa?
11. @picsoung Demo
12. @picsoung It all starts with an OpenAPI spec
13. @picsoung Hold your horses 🥵 Too big (1.3Mb) ✅ Focus on core endpoints and ressources 🥵 Parser not happy ✅ Lots of try and error Use OpenAPI Doctor
14. @picsoung Give love to OperationId 😕 GET_/forms/-form_id-/responses ✅ getFormResponses
15. @picsoung Explicit descriptions 😕 /forms”: { "get": { "description": "Retrieves a list of JSON descriptions for all forms in your Typeform account (public and private).", } } ✅ /forms”: { "get": { "description": "Fetches all user's forms, both public and private. Forms are sortable by creation or update date. 'total_items' in the response indicates the total count of forms across all workspaces", } }
16. @picsoung Explicit descriptions ✅ Use summary and description /forms/{form_id}: { "put": { "description": "Update an existing form. Request body must include all the existing form fields. Overwrites the previously stored form with the given `form_id`. Any new fields in your request will be added to the form. Likewise, any fields you don't include in your request will be deleted from the form.", "summary": "Update and modify an existing form. You change question type, add new fields, new options in dropdown, delete or add new questions."} }
17. @picsoung Don’t just proxy 😕 proxy the public API ✅ custom app with payload verification Fail faster Proper error message
18. @picsoung Don’t just proxy 😕 Long verbose payload bigger than context window ✅ Dedicated endpoint, taking smaller payload
19. @picsoung Don’t just proxy Example: How make a field required { "id": "3ZrpOMXesjPE", "title": "Great, nice to meet you! What's the best email address to send your order confirmation to?", "ref": "01H1TXJBXN4VFKFQG1KTHE3G47", "validations": { "required": false }, "type": "email" }, { "id": "3ZrpOMXesjPE", "title": "Great, nice to meet you! What's the best email address to send your order confirmation to?", "ref": "01H1TXJBXN4VFKFQG1KTHE3G47", "validations": { "required": false true }, "type": "email" },
20. { "id": "WMnP13wp", "type": "quiz", "title": "Handmade Dog Bandanas Order Form", "workspace": { "href": "https://api.typeform.com/workspaces/eTMFvv" }, "theme": { "href": "https://api.typeform.com/themes/qHWOQ7" }, "settings": { "language": "en", "progress_bar": "proportion", "meta": { "allow_indexing": false }, "hide_navigation": false, "is_public": true, "is_trial": false, "show_progress_bar": true, "show_typeform_branding": true, "are_uploads_public": false, "show_time_to_complete": true, "show_number_of_submissions": false, "show_cookie_consent": false, "show_question_number": true, "show_key_hint_on_choices": true, "autosave_progress": true, "free_form_navigation": false, "use_lead_qualification": false, "pro_subdomain_enabled": false, "capabilities": { "e2e_encryption": { "enabled": false, "modifiable": false } } }, "thankyou_screens": [ { "id": "DefaultTyScreen", "ref": "default_tys", "title": "Thanks for completing this typeform\nNow *create your own* — it's free, easy, \u0026 beautiful", @picsoung Don’t just proxy PUT /forms/{formid} Error: context too long
21. @picsoung Hijack how data is returned 😕 payload too long ✅ return csv or markdown Add EXTRA_INFORMATION_TO_ASSISTANT instructions
22. @picsoung Hijack how data is returned { "items": [ { "landing_id": "kfmupqcs36j8x5mnlkfzkure3u0gcu1w", "token": "kfmupqcs36j8x5mnlkfzkure3u0gcu1w", "response_id": "kfmupqcs36j8x5mnlkfzkure3u0gcu1w", "response_type": "completed", "landed_at": "2023-06-01T07:42:48Z", "submitted_at": "2023-06-01T07:43:32Z", "metadata": { "user_agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/ 537.36 (KHTML, like Gecko) Chrome/113.0.0.0 Safari/537.36", "platform": "other", "referer": "https://picsoung.typeform.com/to/NiYPn3nZ", "network_id": "95f0269a9d", "browser": "default" }, "hidden": {}, "calculated": { "score": 0 }, "answers": [ { "field": { "id": "SpZfcsQQMBBH", "type": "short_text", "ref": "01H1TY26NHX8YQFG1W3CPKZXBQ" }, "type": "text", "text": "Jorge" }, { "field": { "id": "TrkK12PE5a9n", "type": "long_text", "ref": "01H1TY26NHPQXRXDEY3BX88N22" }, "type": "text", "text": "My mom was my teacher for all middle school." 4.54kb
23. @picsoung Hijack how data is returned "response_data": "response_id,landed_at,submitted_at,\"Hello there! We're excited to learn more about you for our upcoming trivia event. To start, could you please tell us your name?\",\"Great, nice to meet you! Now, could you please share a fun or interesting fact about yourself? This could be a hobby, a skill, an experience, anything you like!\",\"Awesome! Now, could you please share another fun or interesting fact about yourself?\",\"Now, let's make things interesting. Could you please tell us a lie about yourself? This should be something that sounds plausible but isn't true. \",score\nkfmupqcs36j8x5mnlkfzkure3u0gcu1w,2023-06-01T07:42:48Z,2023-06-01T07:43: 32Z,Jorge,My mom was my teacher for all middle school.,I won an olympic medal.,I base jump from Everest in 2019,0\nw4fxhe61ljxmp5hfw4fxhijwretuixb5,2023-06-01T07:42:03Z,2023-06-01T07:42:42 Z,Matilda,I learned how to code on my gameboy.,I can't taste sour things.,My favourite ice cream is garlic.,0\ncfr3df00km6dd8xr184cfr3dp0su0vbc,2023-06-01T07:41:19Z,2023-06-01T07:41 :58Z,Pedro,I speak chinese fluently,I don't have pinky toe.,I never left the states.,0\nEXTRA_INFORMATION_TO_ASSISTANT,\"Due to limitation on the amount of data that can be handle by model, the responses analysis is only available on a subset of all the responses. This is not a complete analysis. Assistant should explicit those limitations and link to typeform result dashboard for further analysis. Link should be of the form https://admin.typeform.com/form/{FORM_ID}/ results#summary. \"\nTOTAL_NUMBER_OF_RESPONSES_COLLECTED,3\nRESPONSES_IN_SUBSET,3\n", 1.56kb
24. @picsoung Actions have consequences 😕 Don’t let users do things they will regret ✅ Add a flag to your OpenAPI spec x-openai-isConsequential: true
25. @picsoung Local deployment 😕 Complain oAuth needs to be on same domain ✅ Change to API key when in dev Authorization URL, Token URL, and API hostname must share a root domain.
26. @picsoung More is coming App intent
27. HackBCN.com
28. Thank You NICOLAS GRENIÉ DEVELOPER ADVOCATE, TYPEFORM @PICSOUNG