Getting Started with Chat App

This guide will help you get started with the Chat App, FlowState's multi-provider LLM chat interface for AI-powered conversations.

Prerequisites

Before using the Chat App, ensure you have:

• Access to a FlowState workspace
• At least one LLM provider configured (Anthropic, OpenAI, or LM Studio)
• API keys for your chosen provider(s)

Accessing the App

1. Navigate to the FlowState app launcher
2. Click on Chat (message-square icon)
3. The app opens at /chat

Initial Setup

Step 1: Configure Your LLM Provider

The Chat App supports multiple AI providers. To configure your provider:

1. Ensure your API keys are configured in FlowState settings
2. For Anthropic Claude: Add your ANTHROPIC_API_KEY
3. For OpenAI GPT: Add your OPENAI_API_KEY
4. For LM Studio: Ensure LM Studio is running locally on the default port (1234)

Step 2: Create 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 dropdown in the header:
   • Anthropic: Claude Sonnet 4.5, Claude Opus 4.1, Claude Haiku 4.5
   • OpenAI: GPT-4o, GPT-4 Turbo, GPT-3.5 Turbo
   • LM Studio: Any locally loaded model

Step 3: Send Your First Message

1. Type your message in the input field at the bottom
2. Press Enter to send (or Shift+Enter for a new line)
3. Watch the AI response stream in real-time, token by token

Understanding the Interface

Sidebar

The sidebar on the left displays:

• New Chat button at the top
• List of all your conversations, sorted by most recent
• Delete button on hover for each conversation

Chat Header

The header shows:

• Editable conversation title (click to edit)
• Model selector dropdown
• Message count for the conversation

Message Area

The main area displays:

• Your messages (right-aligned)
• AI responses (left-aligned) with streaming support
• Markdown rendering with syntax-highlighted code blocks
• Tool call indicators when MCP tools are invoked

Input Area

At the bottom:

• Multi-line text input with auto-resize
• Send button (or press Enter)

Next Steps

Once you've completed the initial setup:

• Explore Features to learn about all capabilities
• Check out Starting a Conversation for the complete workflow
• Review FAQ for answers to common questions
• Configure MCP tools for enhanced AI capabilities