Warning

The project is under development; therefore currently not working.

chat-ui is the chatbot interface used to communicate with the arch-recon-agent.

Overview

This chatbot UI is based on the assistant-ui starter project for LangGraph. We've modified the frontend to fit the needs of the arch-recon domain.

Description

This is a lightweight web UI for interacting with the arch-recon-agent. Built with Next.js (app router) and React, styled with Tailwind CSS and Radix UI primitives. Integrates with LangGraph / LangChain for assistant communication, includes local state hooks and a PlantUML diagram preview, and can be run locally or in Docker.

Technical Details

Getting Started

First, add your LangGraph API url and assistant id to .env.local. These are read at runtime, so changing them only requires restarting the dev server:

LANGCHAIN_API_KEY=your_langchain_api_key
LANGGRAPH_API_URL=your_langgraph_api_url
LANGGRAPH_ASSISTANT_ID=your_assistant_id_or_graph_id
PLANTUML_SERVER_URL=http://localhost:8080

Install dependencies with your favorite package manager

yarn install
#
pnpm install
#
npm install
# etc

Then, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.

Docker Deployment

Building the Frontend

To build and run the frontend in a Docker container:

# Build the Docker image
docker build -t arch-recon-chat .

# Run the container
docker run -p 3000:3000 arch-recon-chat

Environment Variables for Docker

Make sure to set these environment variables in your Docker setup:

LANGGRAPH_API_URL=http://localhost:2024
LANGSMITH_API_KEY=your-key
PLANTUML_SERVER_URL=http://localhost:8080