chat

What is chat?

chat is a general-purpose AI chat client designed to work with a service’s MCP server. It provides a natural-language interface that can connect to an external MCP server and interact with its tools, regardless of the domain (for example delivery, booking, or task management).

The project is built as a Next.js App Router application and focuses on the practical UI and integration details needed for chat experiences: tool connection via MCP, streaming responses, message history, and support for multimodal content such as image inputs and Markdown-based assistant outputs.

Key Features

• MCP tool integration via Streamable HTTP: connects to one external MCP server, configured through either MCP_URL (any backend) or MCP_APPS_URL (TypeScript + embedded UI); the app rejects having both settings at runtime.
• Streaming AI responses with real-time typing indicators: assistant output is streamed as it’s generated rather than returned all at once.
• Markdown rendering for assistant messages: assistant messages are rendered as Markdown, including tables, lists, code blocks, and links.
• Image attachments with crop-before-send: users can attach images, are prompted to crop before sending, and the image is compressed and uploaded only at send time (to avoid premature uploads).
• LLM image output support: the assistant can include images in responses using standard Markdown syntax like ![alt](url); images display as square cards with lazy-loading skeletons and open full-size on click.
• Conversation history with cursor-based pagination: persistent chat history is retrieved in pages with infinite scroll behavior.
• Authentication and localization support: email/password with verification, reset, and Google OAuth; locale detection from IP geolocation (IPinfo Lite) with Accept-Language fallback, and an overridable user setting.

How to Use chat

1. Run the application (see prerequisites) and create a .env.local file at the project root.
2. Configure MCP connection settings using either MCP_URL or MCP_APPS_URL (choose one). Optionally set branding and persona context variables such as NEXT_PUBLIC_APP_NAME and APP_PERSONA_CONTEXT.
3. Sign in using the supported authentication methods.
4. Start a conversation in the chat UI. The assistant can stream responses and call MCP tools as exposed by your MCP server.
5. If you enable message limits (WEEKLY_MESSAGE_LIMIT), the UI shows a warning when the remaining quota is low and blocks further sending when exhausted.

Use Cases

• Delivery or dispatch assistant: connect to a delivery-related MCP server to help users coordinate requests and follow up through a conversational workflow.
• Handyman booking: connect a handyman booking MCP server so the assistant can guide users through tasks and collect required details via tool calls.
• Task management interface: use a task-management MCP server to translate natural language into actions performed by your backend.
• Multimodal assistance with images: upload an image (crop before sending) and ask the assistant to analyze it or incorporate it into a workflow; also support assistant responses that include image cards.
• Multilingual support for teams: rely on the built-in locale detection and custom i18n system to localize both UI strings and AI system prompts for languages such as EN, ID, KR, JP, ES, ZH, DE, NL, FR, and IT.

FAQ

What MCP configuration does the app support?

The app supports connecting to one MCP server. It uses either MCP_URL or MCP_APPS_URL. Setting both is rejected at runtime.

How are AI responses delivered in the UI?

Responses are streamed in real time, with typing indicators shown during generation.

Can users send images, and can the assistant show images?

Yes. Users can attach images through a crop-before-send flow; images are compressed and uploaded only when the message is sent. The assistant can also embed images in its response using Markdown image syntax.

Is chat history saved?

Yes. The app maintains persistent conversation history and uses cursor-based pagination with infinite scroll.

Are there limits on how many messages can be sent?

Optionally, a per-user weekly limit can be configured with WEEKLY_MESSAGE_LIMIT. When enabled, the UI warns when the remaining count is low and returns a 429 block when exhausted.

Alternatives

• Generic AI chat web apps without MCP tool integration: these focus on prompt-based chat but don’t provide a structured tool protocol connection to your service’s backend.
• Custom MCP client implementations (different UI/stack): you can build another client for MCP tool calling, but the workflow and features (image handling, message history, localization) may differ.
• RAG/chat solutions centered on retrieval rather than tool calling: these are oriented around knowledge search and document grounding instead of orchestrating actions via MCP tools.
• General-purpose multimodal chat interfaces: these support image inputs/outputs, but may not include the same MCP-driven workflow for connecting to external service tools.