Technology Stack

Relevant source files

The following files were used as context for generating this wiki page:

• README.md
• src/App.tsx
• convex/ai.ts
• PROJECT_DESCRIPTION.md
• agent_configs/SIMPLE-Co-Sales-Agent.json
• index.html
• src/LandingPage.tsx

TalkCRM is a voice-first AI assistant that allows sales representatives to interact with their Salesforce CRM hands-free. The platform is built on a modern, serverless architecture that combines several best-in-class technologies for voice processing, artificial intelligence, backend services, and frontend development. This document provides a detailed overview of the technologies used and how they integrate to deliver the TalkCRM service.

The core of the solution is to interpret natural language voice commands, execute corresponding operations on the Salesforce REST API, and provide a conversational response back to the user.

Sources: PROJECT_DESCRIPTION.md:3-13, README.md:3-5

System Architecture

The TalkCRM architecture is designed to process voice commands in real-time, interact with Salesforce, and update the user-facing dashboard simultaneously. A sales representative initiates a call, which is handled by Twilio and passed to an ElevenLabs conversational AI agent. This agent uses webhook tools to communicate with a Convex backend, which in turn orchestrates calls to the Salesforce REST API.

Sources: README.md:10-48, src/App.tsx:300-316

This diagram illustrates the high-level data flow between the major components of the system.

Call Flow Sequence

The sequence of events during a typical user interaction is as follows:

1. A sales representative calls the dedicated Twilio phone number.
2. Twilio establishes a WebSocket connection to the ElevenLabs Conversational AI agent.
3. The user speaks a command, such as "Update the Acme deal to Closed Won."
4. The ElevenLabs agent processes the audio and calls a webhook tool, which is a Convex HTTP endpoint.
5. The Convex backend action receives the request, interprets the intent using Claude AI, and executes the necessary queries or mutations against the Salesforce REST API.
6. The result from Salesforce is returned to the ElevenLabs agent.
7. The agent synthesizes a spoken response and delivers it to the user over the phone.
8. Simultaneously, the Convex backend uses real-time subscriptions to update the web dashboard.

This diagram shows the sequence of interactions for a voice command.

Core Components

The technology stack is comprised of several key services and frameworks, each serving a distinct purpose.

Component	Technology	Purpose
Frontend	React + Vite	Provides the user dashboard, setup, and landing pages.
Styling	Tailwind CSS	Used for UI components and styling across the web application.
Authentication	WorkOS	Handles user authentication and session management.
Backend	Convex	Serves as the serverless backend for real-time data, HTTP actions, and scheduled jobs.
Voice AI	ElevenLabs	Provides the conversational AI agent, including ASR and TTS.
AI Brain	Anthropic Claude	Interprets natural language, plans Salesforce operations, and generates responses.
Telephony	Twilio	Provides the phone number and voice connectivity.
CRM	Salesforce	The source of truth for all customer data, accessed via its REST API.

Sources: README.md:59-67, src/App.tsx:320-340, PROJECT_DESCRIPTION.md:46-53

Frontend

The frontend is a single-page application built with React and TypeScript, bundled using Vite. It serves the landing page, legal pages (Terms & Privacy), and the authenticated user dashboard which includes installation instructions and integration settings.

• Framework: React
• UI Components: Custom components styled with Tailwind CSS and icons from Lucide-react.
• Routing: A simple custom hook useSimpleRouter manages client-side routing.
• Authentication: The @workos-inc/authkit-react library is used to handle user login, sign-up, and session management.

Key files:

• src/App.tsx: The main application component that handles routing and authentication state.
• src/LandingPage.tsx: The public-facing marketing page.
• index.html: The entry point, containing extensive SEO and structured data (JSON-LD) for discoverability.
• src/components/PrivacyPage.tsx & src/components/TermsPage.tsx: Static legal pages.

Sources: src/App.tsx, src/LandingPage.tsx, index.html:5-220

Backend (Convex)

Convex is the serverless backend platform that powers TalkCRM. It provides a real-time database, serverless functions (mutations and actions), and HTTP endpoints, eliminating the need for traditional backend infrastructure management.

• HTTP Actions: Convex exposes HTTP endpoints that are used as webhooks by the ElevenLabs AI agent. The primary endpoint is /tools/assistant, which receives the user's transcribed message.
• Actions: External API calls to Anthropic (Claude) and Salesforce are orchestrated within Convex actions. This keeps API keys and complex logic on the server side. The main action is askSalesforce.
• Real-time Database: Convex's database is used to track conversations, log tool calls, and power a real-time activity feed on the dashboard via subscriptions.
• Secure Environment Variables: All secrets, such as API keys for Anthropic and Salesforce access tokens, are securely stored as environment variables in the Convex dashboard.

Sources: PROJECT_DESCRIPTION.md:57-133, convex/ai.ts:108

Voice & AI

The conversational experience is driven by a combination of ElevenLabs for voice interaction and Anthropic's Claude for language understanding.

ElevenLabs Conversational AI

ElevenLabs provides the core voice interface. It handles:

• Automatic Speech Recognition (ASR): Transcribing the user's spoken words into text.
• Text-to-Speech (TTS): Converting the AI's text response back into natural-sounding audio.
• Agent Configuration: The agent_configs/SIMPLE-Co-Sales-Agent.json file defines the AI agent's personality, goals, voice (eleven_multilingual_v2), and available tools (webhooks).

Sources: agent_configs/SIMPLE-Co-Sales-Agent.json:4-28, 38-111, README.md:61

Anthropic Claude

Claude serves as the "brain" of the operation. It receives the transcribed user message from the Convex backend and is tasked with interpreting the user's intent.

• System Prompt: A detailed system prompt provides Claude with the Salesforce schema (standard and custom objects), available tools, and rules for generating a structured JSON response.
• Intent Parsing: Claude's primary role is to parse a natural language request (e.g., "What's in my pipeline?") into a machine-readable action, such as a specific SOQL query.
• Response Generation: It also generates the conversational, human-like text that is sent back to ElevenLabs for speech synthesis.

The askSalesforce action in convex/ai.ts orchestrates this flow, sending the user message to Claude and then executing the action specified in Claude's response.

Sources: convex/ai.ts:10-105, 412-482, PROJECT_DESCRIPTION.md:36-44

Integrations

Salesforce

Salesforce is the primary integration and the source of all CRM data. TalkCRM interacts with Salesforce exclusively through its REST API.

• Authentication: OAuth 2.0 is used for secure authentication, ensuring TalkCRM respects user permissions.
• Operations: The AI agent can perform a variety of operations via predefined tools.

The available tools for the AI agent are:

Tool	Description
search_salesforce	Find records like accounts, contacts, and opportunities.
get_record	Retrieve full details for a specific record.
create_record	Create new records such as tasks, leads, or accounts.
update_record	Modify fields on existing records (e.g., deal stage).
log_call	Log a call activity against a record.
get_my_pipeline	View a summary of open opportunities.
get_my_tasks	List open tasks and to-dos.

Sources: README.md:69-80, src/App.tsx:343-358

Twilio

Twilio provides the PSTN (Public Switched Telephone Network) connectivity. It supplies the dedicated phone number (+1 (646) 600-5041) that users call to interact with the service. When a call is received, Twilio connects it to the ElevenLabs Conversational AI agent via a WebSocket stream.

Sources: README.md:64, src/App.tsx:210-213

WorkOS

User authentication for the web dashboard is handled by WorkOS. The useAuth hook from @workos-inc/authkit-react manages the user's session, including login, sign-out, and retrieving user profile information like email and name.

Sources: src/App.tsx:13, 29, 78-81