Skip to main content

TellFlow – Introduction

This document introduces the TellFlow (mobile-chatbot-ui) project, including website copy and a technical summary that can be used as a reference for other projects.

1. Website Content​

1.1 Headline and Brief Description​

TellFlow — Mobile access to n8n chatbots. Webhook and workflow-based chat client.

  • One sentence: Securely connect to your n8n chatbots from your phone; chat via text, voice, and files.
  • Long description: TellFlow is a Flutter application that allows you to access chatbots running on n8n (and other platforms supporting webhooks) from Android and iOS. It can manage multiple bots and n8n connections, stores chat history locally on the device, and allows you to send images, files, and voice messages. You can also use "Share" to import content into the app.

1.2 Features (Bullet list)​

  • Multi-bot and Multi-connection: Define multiple n8n servers and multiple chatbots (webhooks) for each server, all within the same app.
  • Chat History: Session-based history for each bot; local storage, session list, and deletion support.
  • Rich Messaging: Send text, Markdown, images, files, and voice messages; includes image previews, audio player, and file opening.
  • Share Integration: Easily add text, links, or files from other apps to the chat input via the "Share" menu.
  • Voice Assistant: Optional voice commands and responses (via API key); in-app microphone for voice recording and transcription.
  • Tool and Model Selection: Per-bot tools (e.g., Image Generation, Deep Research) and model parameters; selectable before sending messages.
  • Customization: Bot logos, names, and webhook settings; global tool/model definitions.
  • n8n Workflow List: List and view details of workflows from connected n8n instances (optional).
  • Dark Mode: Modern dark interface for comfortable use.

1.3 Target Audience​

  • Teams building chatbots or automation with n8n.
  • Chatbot developers using their own webhooks/APIs.
  • Users who want to talk to multiple bots from a single mobile interface.

1.4 Calls to Action (CTA)​

  • "Bring your n8n chatbots to your pocket."
  • "Secure mobile access to your webhook-based bots."
  • "One app for chat history, files, and voice support."

2. Technical Summary for Reference​

2.1 Project Identity​

FieldValue
Project NameTellFlow (package: mobile_chatbot_ui)
Short DescriptionMobile access to n8n chatbots; webhook and workflow-based chat client.
Version1.0.0+1 (app 1.0.0)
PlatformAndroid, iOS (Flutter)
Licenseprivate (check repo license)

2.2 Tech Stack​

  • Framework: Flutter (SDK ^3.11.0)
  • Language: Dart
  • Routing: go_router
  • HTTP: dio
  • Local Storage: hive_flutter
  • Secure Storage: flutter_secure_storage
  • Chat UI: dash_chat_2, flutter_markdown
  • Media: file_picker, record, audioplayers, open_filex
  • Share Intent: share_handler
  • Other: path_provider, uuid, intl, url_launcher, flutter_animate, google_fonts

2.3 Architectural Overview​

  • Screens: Chatbot list (workflow_list), Chat (chat), Workflows list, Settings, Connection Setup.
  • Models: WebhookConfig (n8n/zapier/make/custom), N8nConfig; chat messages and sessions stored via Hive.
  • Services: ChatService (sending messages/attachments/voice to webhook), N8nApiService (workflow listing, etc.), SpeechToTextService, TextToSpeechService.
  • Data Flow: Connections and settings in Hive + secure storage; chat data in Hive boxes (session-based).

2.4 Integration Points​

  • Webhook API Expectations: POST, body: message, session_id; optional file / audio, tool, model etc. Response: text (+ optional session_id).
  • n8n: n8n webhook nodes or workflows can be designed to match this format.
  • Multi-environment: Multiple "connections" (n8n instances) and multiple "chatbots" (webhook configurations) are supported within the same app.

2.5 Key Technical Features​

  • Session-based chat history and local persistence.
  • Attachments: Images, files, and audio are shown as "pending" in the composer; the user sends everything at once. Attachment info is stored permanently in customProperties.
  • Sharing: Content from other apps is added to the composer via share_handler.
  • Voice: Recording from mic or file; optional STT conversion before sending.

3. Summary Paragraph​

TellFlow is a Flutter application providing Android/iOS access to n8n and webhook-based chatbots. It features multi-connection/bot management, chat history, rich media support (text/image/file/voice), and deep integration with mobile sharing. It communicates via POST requests to webhook APIs and renders responses in a Markdown-supported chat interface.