Design and Implementation of AI Copilot for Web Applications

Your web application's users spend minutes searching for the right function or data in the interface. A standard FAQ chatbot doesn't help—it doesn't see what the user is currently doing. We develop an AI Copilot—an embedded intelligent assistant that understands the screen context, action history, and user data to suggest precise next steps or perform operations on behalf of the user. Our team has over 10 years of experience in AI solution development and has delivered 10+ Copilot projects for ERP and CRM systems.

This isn't a wrapper over ChatGPT. Copilot requires designing a context protocol, a set of tools (tool calls), session history management, and deep integration with domain logic. Based on more than 10 implemented solutions for ERP systems, CRMs, and marketplaces, we've found that the average user speedup reaches 1.7x(internal measurements), and time for typical tasks is reduced by 40–60%. Additionally, user support costs drop by 30%, which at an average monthly spend of 500,000 RUB yields 150,000 RUB in savings.

Why Copilot is More Effective Than a Chatbot

A chatbot doesn't see which page the user is on or what data is open. Copilot receives the current route, UI state, and recent actions. For example, if a user opens an order card, the query "show analytics for this order" immediately returns the needed data—without any clarifications. In practice, the success rate of first requests jumps from 30% (chatbot) to 85% (Copilot).

What Problems Does Copilot Solve?

Context Loss. The user opens an order page, but the chatbot doesn't know which order they're looking at. Copilot sees the route, selected records, and recent actions—the query "show analytics for this order" immediately returns the needed data without further clarifications.

Manual Data Entry. Employees fill out repetitive reports, copy data from one form to another. Copilot can create a record by voice command or text description, calling the create_record tool with parameters from the current context. This reduces entry time by 70%.

Slow Search. Even with good navigation, the user spends time on menus. Copilot performs a search across application modules via the search_records tool, displaying the result directly in a side panel. Average search time decreases from 12 to 3 seconds.

How the AI Copilot Architecture Works

The backend is built on Node.js (Nest.js) or Python (FastAPI). The model is GPT-4o or Claude 3.5 Sonnet. Communication uses Server-Sent Events for streaming responses.

Key components:

• Context layer — gathers context before each request: current route, UI state, user data, recent actions.
• Tool layer — functions the model can call: search, create, get analytics. Each tool verifies user permissions through the same middleware as the REST API.
• Conversation layer — manages history: sliding window with summarization when limit is exceeded.
• UI layer — React component integrated into the existing interface.

Example tool configuration:

// copilot/tools.ts
const tools: ChatCompletionTool[] = [
  {
    type: "function",
    function: {
      name: "search_records",
      description: "Search records in the current module by query",
      parameters: {
        type: "object",
        properties: {
          query: { type: "string" },
          module: { type: "string", enum: ["orders", "customers", "products"] },
          limit: { type: "number", default: 10 },
        },
        required: ["query", "module"],
      },
    },
  },
  {
    type: "function",
    function: {
      name: "create_record",
      description: "Create a new record in the specified module",
      parameters: {
        type: "object",
        properties: {
          module: { type: "string" },
          data: { type: "object" },
        },
        required: ["module", "data"],
      },
    },
  },
  {
    type: "function",
    function: {
      name: "get_analytics",
      description: "Get aggregated analytics for a date range",
      parameters: {
        type: "object",
        properties: {
          metric: { type: "string" },
          from: { type: "string", format: "date" },
          to: { type: "string", format: "date" },
        },
        required: ["metric", "from", "to"],
      },
    },
  },
];

Request handler with multi-step tool call support:

// copilot/handler.ts
export async function handleCopilotRequest(
  messages: Message[],
  context: CopilotContext,
  res: Response
) {
  const systemPrompt = buildSystemPrompt(context);
  res.setHeader("Content-Type", "text/event-stream");
  res.setHeader("Cache-Control", "no-cache");
  let currentMessages = [
    { role: "system", content: systemPrompt },
    ...messages,
  ];
  while (true) {
    const stream = await openai.chat.completions.create({
      model: "gpt-4o",
      messages: currentMessages,
      tools,
      stream: true,
    });
    let toolCallAccumulator: ToolCall[] = [];
    let textBuffer = "";
    for await (const chunk of stream) {
      const delta = chunk.choices[0]?.delta;
      if (delta?.content) {
        textBuffer += delta.content;
        res.write(`data: ${JSON.stringify({ type: "text", content: delta.content })}\n\n`);
      }
      if (delta?.tool_calls) {
        mergeToolCallChunks(toolCallAccumulator, delta.tool_calls);
      }
      if (chunk.choices[0]?.finish_reason === "tool_calls") {
        const toolResults = await executeToolCalls(toolCallAccumulator, context);
        currentMessages = [
          ...currentMessages,
          { role: "assistant", tool_calls: toolCallAccumulator },
          ...toolResults.map((r) => ({
            role: "tool" as const,
            tool_call_id: r.id,
            content: JSON.stringify(r.result),
          })),
        ];
        res.write(`data: ${JSON.stringify({ type: "tool_result", results: toolResults })}\n\n`);
        break;
      }
      if (chunk.choices[0]?.finish_reason === "stop") {
        res.write(`data: ${JSON.stringify({ type: "done" })}\n\n`);
        res.end();
        return;
      }
    }
  }
}

Model Performance Comparison for Copilot

Which Copilot Do You Need?

Process

1. Analytics. Study use cases, gather context for each page, define the tool set.
2. Design. Design the context protocol, system prompt, authorization scheme.
3. Implementation. Write context layer, tools, handler, React UI component. Test on real scenarios.
4. Testing. Verify tool call correctness, security, performance (LCP, TTFB).
5. Deployment. Deploy on your infrastructure (Docker, Kubernetes, Vercel), set up monitoring.

What's Included

• Architectural documentation (context protocol, tool descriptions)
• Source code (backend + frontend) with comments
• CI/CD pipeline for prompt and model updates
• Maintenance guide (how to add new tools, update model)
• SLA guarantee of 99.9% for request processing time

Why Us

• 10+ delivered Copilots for SaaS platforms and enterprise systems
• Over 10 years of experience in AI solution development on LLMs
• Proprietary template stack that reduces development time by 30%
• Transparency: you get full code and documentation, no vendor lock-in

Request a consultation—we will analyze your application and propose the optimal AI Copilot architecture. Contact us to discuss your project.

AI Integration: Chatbots, RAG, Semantic Search, Recommendations

In 8 out of 10 projects, an "AI chatbot" turns out to be an expensive wrapper over GPT-4o with a system prompt. Without access to real company data. The user asks "how much does the Premium plan cost?" — the bot hallucinates a price out of thin air. Asks "when will my order arrive?" — gets a polite "contact support." This is not integration — it's imitation. We have implemented RAG solutions in 30+ projects over 5 years: from e-commerce stores to medical portals. We guarantee: useful AI assistance begins where the model reads your documents, not generic answers.

How do we build RAG systems?

Retrieval-Augmented Generation — standard architecture: query → find relevant fragments in a vector DB → insert found context → model response. But the devil is in the implementation details. Let's break down key components that determine quality.

Chunking. Cutting a document into 500-token pieces without regard for structure is a guarantee of losing meaning. If the cut lands in the middle of a paragraph, context breaks. Solution — recursive RecursiveCharacterTextSplitter with 10–15% overlap for documentation. For contracts and instructions, we use a semantic splitter: extract headings, lists, code blocks — each section becomes an independent chunk. Difference in search quality: on a medical project, precision increased from 0.55 to 0.84 just by proper chunking.

Embedding model. For Russian-language texts, intfloat/multilingual-e5-large gives a noticeable accuracy boost over outdated text-embedding-ada-002. In our measurements, NDCG@10 on a test set of 10,000 query-document pairs is 12% higher. OpenAI text-embedding-3-large is good for English content, but for Russian we recommend BAAI/bge-m3 or the mentioned e5-large.

Vector DB. If you already have PostgreSQL — pgvector saves resources. Install extension CREATE EXTENSION vector, add column vector(1024), create HNSW index. On a project with 80,000 support articles, p95 search time was 12 ms. That's enough. For catalogs with millions of items — Qdrant or Weaviate: native hybrid search and sharding out of the box.

What does hybrid search give?

Vector-only search is blind to exact matches: SKUs like "ABC-123", proper names, abbreviations are lost. Full-text-only search doesn't catch synonyms and paraphrasing. Combining via RRF (Reciprocal Rank Fusion) gives the best of both worlds: BM25 + vector search, results merged. In practice, recall@20 increases from 0.65 to 0.92 — the difference is noticeable to the user.

Reranking — final filter: top-20 candidates from hybrid search are run through a cross-encoder cross-encoder/ms-marco-MiniLM-L-6-v2. It adds 50–100 ms to response time, but relevance improves by another 5–10%. Without reranking, the chatbot may show irrelevant documents.

How to implement semantic search on a site?

A search for "comfortable leather armchairs" should find products described as "soft chairs made of natural leather" — ordinary LIKE search cannot do this. Our architecture: when adding a product/post, automatically generate an embedding via multilingual-e5-large, store it in pgvector. On query, embed it with the same model, search nearest neighbors via cosine distance with HNSW index. For a catalog of 100,000 items, index builds in 3 minutes, memory ~400 MB (1536-dimensional vectors). Average search time: 20 ms.

What about recommendation systems?

Collaborative filtering ("users like you bought X") requires history — at least 2–3 months of data with 1000+ active users. For startups or small projects, we use content-based: embedding of current product → search nearest neighbors by cosine similarity. When enough statistics accumulate (usually 15–20 interactions per user), we switch to a hybrid LightFM model. It combines behavior and product features. In our e-commerce project with 50,000 SKUs, the hybrid model increased conversion in the recommendation block by 18% (A/B test lasted 2 weeks).

How does streaming work?

Users shouldn't wait for the entire text to be generated — it kills UX. Server-Sent Events (SSE) is the protocol for token streaming. OpenAI SDK supports stream: true, returning an AsyncIterator. On frontend — Vercel AI SDK (useChat) or custom EventSource. Typical mistake: using WebSocket for unidirectional streaming — SSE is simpler (less code, built-in reconnect). Stack: Node.js + SSE + React.

How to orchestrate agents?

A simple chatbot answers. An agent performs actions: creates a Jira ticket, checks order status in CRM, books a calendar slot. For orchestration, we use LangGraph: state graph where each node is a model or tool call. Vercel AI SDK useChat + tools for Next.js allows adding integration in 10 lines of code. Main challenge — reliability: the model sometimes calls the wrong tool or passes malformed parameters. Protection — Zod schemas for each tool and structured outputs to guarantee JSON.

What does the work include?

Additionally: we hand over vectorizer source code, monitoring dashboards (Langfuse), admin panel access for knowledge base updates. Post-production support — 1 month free.

What are the timelines?

Pricing is calculated individually after project discovery. We'll evaluate your project in 1 day. Contact us — we'll show how to turn AI from a toy into a profit-driving tool.