LangSmith Studio vs Agent Chat UI: When to Use What

Overview

LangSmith Studio (formerly LangGraph Studio) and Agent Chat UI are two distinct tools in the LangChain ecosystem that serve different purposes.

LangSmith Studio

Purpose: A specialized IDE for agent development and debugging

Key Characteristics:

• Deployed through LangSmith Deployment

• Developer-focused tool for building and debugging agents

• Works locally or in LangSmith Cloud

Two Operating Modes:

1. Graph Mode:

   • Full-featured interface with detailed execution information

   • Intermediate state visualization

   • Complete state inspection capabilities

   • LangSmith integrations (time-travel debugging, evaluation integration)

2. Chat Mode:

   • Simplified interface for chat-focused agents

   • Specifically designed for agents using MessagesState

   • Streamlined debugging experience

Best For:

• Developers building agents

• Debugging complex agent workflows

• Detailed state inspection and analysis

• Integration with LangSmith evaluation tools

Agent Chat UI

Purpose: A standalone, open-source conversational interface

Key Characteristics:

• Open-source Next.js-based application

• Available on GitHub.

• Use the deployed site here.

• Works with any LangGraph Server

• User-facing interface with conversational-first experience

Connection Options:

• Local LangGraph Server

• Deployed agents on any platform

• LangSmith Deployment (optional LangSmith API key for integration)

Best For:

• End-user interactions with deployed agents

• Product demos and presentations

• Quick ready-to-use frontend template for agent applications

• Building customer-facing chat interfaces

Key Differences Summary

When to Use Agent Chat UI

Use Agent Chat UI when you need:

1. Quick Frontend Template: A ready-to-use UI for your agent application without building from scratch

2. User-Facing Interface: A clean, simple chat interface for end-users to interact with your agent

3. Product Demos: A polished conversational experience for showcasing your agent

4. Flexible Deployment: Connection to agents deployed on various platforms

Not Ideal For:

• Detailed debugging and development work

• Multi-agent comparison and analysis

• Deep state inspection during development

• Complex development workflows

When to Use LangSmith Studio

Use LangSmith Studio when you need:

1. Agent Development: Building and iterating on agent logic

2. Advanced Debugging: Time-travel debugging, state inspection, execution analysis

3. Evaluation Integration: Testing and evaluating agent performance

4. Detailed Insights: Full visibility into agent execution and intermediate states