Add multi-agent interactive chat system with Ollama integration - #1
Merged
Conversation
Co-authored-by: avila2026 <265126500+avila2026@users.noreply.github.com> Agent-Logs-Url: https://github.com/avila2026/multi-agent-chat/sessions/7b55edb8-8a1d-4831-8e7f-b384318f8e56
Copilot
AI
changed the title
[WIP] Add multi-agent interactive chat system with Ollama integration
Add multi-agent interactive chat system with Ollama integration
Mar 20, 2026
avila2026
approved these changes
Mar 20, 2026
Owner
|
@copilot ativar |
Contributor
Author
The system is fully implemented and ready to use! 🚀 Quick start: # 1. Start Ollama
ollama pull mistral
ollama serve
# 2. Backend (terminal 1)
cd backend
cp .env.example .env
npm install
npm run dev # → http://localhost:5000
# 3. Frontend (terminal 2)
cd frontend
cp .env.example .env
npm install
npm start # → http://localhost:3000What's included:
API is live at |
avila2026
approved these changes
Mar 23, 2026
There was a problem hiding this comment.
Pull request overview
Bootstraps an end-to-end multi-agent chat application: a React/Tailwind frontend for interactive conversations, an Express + SQLite backend for persistence and CRUD APIs, and Ollama integration for local LLM responses.
Changes:
- Added Express backend with SQLite models/routes and Ollama client utilities.
- Added React frontend with chat UI components, a
useChathook, and Tailwind styling (incl. dark mode). - Added repo-level docs and Docker Compose scaffolding for local setup.
Reviewed changes
Copilot reviewed 33 out of 36 changed files in this pull request and generated 14 comments.
Show a summary per file
| File | Description |
|---|---|
| SETUP.md | Step-by-step local setup instructions for Ollama + backend + frontend |
| README.md | Project overview, quick start, env vars, and API reference |
| docker-compose.yml | Compose definition intended to run frontend/backend together |
| .gitignore | Ignores node/env/db/build/log artifacts |
| frontend/tailwind.config.js | Tailwind configuration (content paths, dark mode) |
| frontend/src/styles/index.css | Tailwind layers + shared component/markdown/chat styles |
| frontend/src/services/api.js | Axios API client + REST helpers |
| frontend/src/pages/App.jsx | Pages-level App export shim |
| frontend/src/index.js | React entrypoint wiring global styles and App |
| frontend/src/hooks/useChat.js | Central chat state management and API orchestration |
| frontend/src/components/MessageList.jsx | Message rendering (Markdown for assistant), typing indicator |
| frontend/src/components/InputForm.jsx | Chat input with autosizing textarea + Enter-to-send behavior |
| frontend/src/components/ConversationHistory.jsx | Sidebar conversation list with search + delete |
| frontend/src/components/ChatWindow.jsx | Main chat layout: agent selector, messages, input, error banner |
| frontend/src/components/AgentSelector.jsx | Agent selection pills w/ availability indicator |
| frontend/src/App.jsx | App shell: sidebar layout, top bar, dark mode toggle |
| frontend/public/index.html | Static HTML template for CRA |
| frontend/package.json | Frontend deps/scripts (CRA + Tailwind + axios, etc.) |
| frontend/.env.example | Example frontend env var for API base URL |
| backend/src/utils/ollama.js | Ollama client (chat + streaming + health checks) |
| backend/src/utils/database.js | SQLite initialization + schema creation (WAL, FK) |
| backend/src/server.js | Express app wiring (CORS, JSON parsing, rate limit, routes) |
| backend/src/routes/messages.js | Message list/send/delete endpoints (Ollama call on send) |
| backend/src/routes/conversations.js | Conversation CRUD endpoints |
| backend/src/routes/agents.js | Agent listing (with Ollama availability) |
| backend/src/models/message.js | Message persistence helpers |
| backend/src/models/conversation.js | Conversation persistence helpers |
| backend/src/middleware/errorHandler.js | Global error handler with environment-aware behavior |
| backend/src/agents/technicalAgent.js | Technical agent system prompt + metadata |
| backend/src/agents/dataAnalysisAgent.js | Data analysis agent system prompt + metadata |
| backend/src/agents/creativeAgent.js | Creative agent system prompt + metadata |
| backend/README.md | Backend-specific start + endpoint notes |
| backend/package.json | Backend deps/scripts (Express, better-sqlite3, axios, jest, etc.) |
| backend/.env.example | Example backend env vars for port/Ollama/db |
Suppressed comments (2)
frontend/src/App.jsx:83
ChatWindowrenders a dismiss (×) button for errors, but no dismiss handler is passed from the parent, so the button can't clear the error state.
error={error}
frontend/src/components/ChatWindow.jsx:52
- The error banner’s dismiss (×) button has an empty onClick handler, so it does nothing.
<button
onClick={() => {}}
className="text-red-400 hover:text-red-600 flex-shrink-0 text-lg leading-none"
>
×
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
Comment on lines
+27
to
+30
| const toggleDarkMode = () => { | ||
| setDarkMode((d) => !d); | ||
| document.documentElement.classList.toggle('dark'); | ||
| }; |
| <div | ||
| key={conv.id} | ||
| onClick={() => onSelect(conv)} | ||
| className={`group flex items-start gap-2 p-3 cursor-pointer border-b border-gray-100 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-750 transition-colors |
Comment on lines
+14
to
+18
| isLoading, | ||
| isTyping, | ||
| error, | ||
| messagesEndRef, | ||
| startNewConversation, |
Comment on lines
+13
to
+16
| error, | ||
| messagesEndRef, | ||
| onAgentSelect, | ||
| onSend, |
Comment on lines
+78
to
+81
| const selectConversation = useCallback((conv) => { | ||
| setActiveConversation(conv); | ||
| setError(null); | ||
| }, []); |
| frontend: | ||
| build: | ||
| context: ./frontend | ||
| dockerfile: Dockerfile |
| dockerfile: Dockerfile | ||
| ports: | ||
| - '5000:5000' | ||
| environment: |
| "@testing-library/jest-dom": "^5.17.0", | ||
| "@testing-library/react": "^13.4.0", | ||
| "@testing-library/user-event": "^13.5.0", | ||
| "axios": "^1.13.5", |
| "test": "jest --testPathPattern=tests/" | ||
| }, | ||
| "dependencies": { | ||
| "axios": "^1.13.5", |
Comment on lines
+90
to
+97
| const conversation = getConversationById(req.params.id); | ||
| if (!conversation) { | ||
| return res.status(404).json({ error: 'Conversation not found' }); | ||
| } | ||
| const deleted = deleteMessage(req.params.messageId); | ||
| if (!deleted) { | ||
| return res.status(404).json({ error: 'Message not found' }); | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Bootstraps the repository from empty to a fully functional multi-agent chat application: React frontend, Express/SQLite backend, and local LLM support via Ollama.
Backend (
backend/)src/server.js) — CORS, JSON body parsing, rate limiting (100 req/min/IP)src/utils/database.js) —better-sqlite3v12 (Node 24-compatible), WAL mode, FK constraints, schema migrations on startupsrc/utils/ollama.js) —chat(),chatStream(),healthCheck()with 120s timeouttechnicalAgent— code, debugging, architecturecreativeAgent— writing, brainstorming, storytellingdataAnalysisAgent— statistics, ML, BIFrontend (
frontend/)useChathook — centralizes all state: agents, conversations, messages, optimistic user message insertion, error handlingMessageList— renders assistant responses as Markdown; animated typing indicator while waiting on OllamaInputForm— auto-resizing textarea; Enter to send, Shift+Enter for newlineAgentSelector— color-coded pills with live Ollama availability warningConversationHistory— searchable sidebar with per-conversation deleteApp.jsxSecurity
__proto__inmergeConfig)Original prompt
Create a complete multi-agent interactive chat system with Ollama integration, featuring:
Features
Tech Stack
Directory Structure