Chat App

Chat App

Chat App

The Chat App is a multi-provider LLM chat interface for FlowState. It provides real-time streaming conversations with support for Anthropic Claude, OpenAI GPT, and LM Studio models. The app features persistent conversation history, MCP (Model Context Protocol) tool integration, markdown rendering with syntax highlighting, and a responsive chat interface.

Key Features

  • Multi-Provider Support: Anthropic Claude, OpenAI GPT, and LM Studio
  • Streaming Responses: Real-time token-by-token response streaming
  • Persistent Conversations: RxDB-backed conversation history with reactive updates
  • MCP Tool Integration: Execute tools via FlowState MCP Gateway
  • Markdown Rendering: Full markdown support with syntax-highlighted code blocks
  • Model Selection: Switch between providers and models per conversation
  • Organization/Workspace Isolation: Conversations scoped to org/workspace context
  • Responsive Design: Sidebar navigation with conversation list

Target Users

User TypePrimary Use Cases
DevelopersCode assistance, debugging, API exploration with tool calls
Knowledge WorkersDocument drafting, research, Q&A with persistent history
TeamsShared workspace conversations with organization context
Power UsersLocal model integration via LM Studio, custom system prompts

Getting Started

The app uses a simple navigation structure:

  • Sidebar - Conversation list with new chat button
  • Chat View (/chat) - Main chat interface (redirects to new conversation)
  • Conversation (/chat/:conversationId) - Active conversation view

Creating Your First Conversation

  1. Click the "New Chat" button in the sidebar
  2. A new conversation is automatically created and selected
  3. Select your preferred provider and model from the header dropdown
  4. Type your message and press Enter to send
  5. Watch the streaming response appear in real-time

Switching Models

  1. Open any conversation
  2. Click the model dropdown in the header
  3. Select from available providers (Anthropic, OpenAI, LM Studio)
  4. Choose a specific model within that provider
  5. The conversation will use the new model for subsequent messages

Using MCP Tools

If MCP Gateway is configured:

  1. Tools are automatically loaded when the app initializes
  2. The AI can invoke tools during conversations
  3. Tool calls appear with expandable arguments and results
  4. Status indicators show pending, success, or error states

App Identity

PropertyValue
Package@epicdm/flowstate-app-chat
Base Path/chat
Iconmessage-square
Color#06B6D4 (cyan-500)
Previous
Changelog
Next
Getting Started