My N8N Chat UI called Talkflow · AI Automation Society

My N8N Chat UI called Talkflow

Hello everyone! I made a cool little chat UI specifically for use with n8n agents. It's written in typescript and react.

https://github.com/jimmartinquisitive/talkflow-n8n

I calling n8n-Talkflow or Talkflow for short.

Talkflow works best with markdown responses and supports:

Latex/Katex math equation formatting and Dynamic code block recognition (it tries real hard. OpenAI still can't get this right either, cut me some slack)

The Monaco code editor is built in and code blocks can be sent to the "code playground", which support syntax highlighting and saving code to file. The code playground supports multiple languages, but works best with javascript and typescript. While Monaco supports running js and ts code in the browser environment, I disabled the functionality. This isn't meant to be an IDE.

The chat supports voice input (browser based) and image input, as long as your n8n workflow can support images. You can find an example of mine here: https://blog.martinclan.org/projects/n8n-powered-ai-homework-assistant-for-personalized-24-7-tutoring

The chat has a light and dark mode, but dark mode is default.

You can rename, favorite, and delete chats and all the chat histories are saved in the browser env.

There is no login security setup for this yet. Use at your own risk. I plan on adding authentication support in the future, I just need some time to figure out how to do it without a backend.

I will be adding webhook user/pass in the near future as docker env vars.

Docker installation is the easiest, though I only compile for amd64.

docker run -d -p 3000:3000

-e VITE_N8N_WEBHOOK_URL="your_n8n_webhook_url"

-e VITE_WELCOME_MESSAGE="Your welcome message"

-e VITE_SITE_TITLE="Your Site Title"

jimmartinquis/n8n-chatui:latest

There is also a docker-compose.yml and Dockerfile in the github.

I'd love any feedback you have.

2 comments