How to Enhance UI for AI-Chatbots to Generate Clear Code?


Has anyone mastered AI-Chatbot UIs (like ChatGPT), particularly making the chat generate clear code outputs?

I’m currently utilizing the RTE tiptap plugin for displaying chat responses and appending “respond in HTML” to the prompt.

However, it falls short with code. Insights?

ChatGPT is trained to respond in Markdown. As such, you’re best off using a Markdown renderer (@rico.trevisan has a good one Markdown Pro 🐌 + Tailwind styles (free!))


Hey @georgecollier, I didn’t know ChatGPT responses were in Markdown.
So instead of tiptap plugin I replace it with markdown pro plugin?
Thanks a lot!

Yes and ask it to format in Markdown

1 Like

I think no one solution masters all AI-Chatbot UIs for code.

Consider reliable code editors within the chat interface for complex outcomes.

Research libraries like Monaco editor for embedded code display and editing.

Do research with prompts like “write Python code for…” or “generate JavaScript function…”.

Utilize pre trained models like Codex from OpenAI specifically developed for code generation.

These methods may offer more useful code handling than RTE plugins within chat interfaces.

1 Like