Use case

Expense Upload & Approval Widget

Let employees upload receipts, extract fields, and submit expense requests through a Studio-powered finance widget embedded in your product.

• Stack Client SDK
• Pattern Chat · Widget
• Read ~6 min

Overview

Expense submission is a strong AI widget scenario because users need both conversation and action. They ask what is reimbursable, upload a receipt, confirm extracted values, and then submit the request into the finance workflow.

With Client SDK, the peer stays inside Studio while your app handles device access, file picking, OCR fallbacks, and workflow submission.

When to reach for this use case

If your team needs the capabilities described above and you would rather build on proven primitives than wire one from scratch — this is the shape to start from.

Architecture

Client SDK is the integration surface. The widget sits in your employee app, while a Studio peer handles guidance, follow-up questions, and structured tool selection.

Client tools bridge the conversation with product actions such as opening the camera, selecting a receipt from storage, calling your OCR service, or submitting the expense to ERP.

1. Add Receipt And Submission Tools

Expose only the actions your app can safely execute on behalf of the signed-in employee.

const expenseTools = [
  {
    type: 'function',
    function: {
      name: 'pickReceiptFromDevice',
      description: 'Open the native file picker and return the selected receipt metadata',
      parameters: {
        type: 'object',
        properties: {},
      },
    },
    implementation: async () => {
      const receipt = await openReceiptPicker();
      return JSON.stringify(receipt);
    },
  },
  {
    type: 'function',
    function: {
      name: 'createExpenseDraft',
      description: 'Create a draft expense request in the finance system',
      parameters: {
        type: 'object',
        properties: {
          merchant: { type: 'string' },
          amount: { type: 'number' },
          currency: { type: 'string' },
          category: { type: 'string' },
        },
        required: ['merchant', 'amount', 'currency', 'category'],
      },
    },
    implementation: async (payload) => {
      const response = await fetch('/api/expenses/draft', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(payload),
      });

      return JSON.stringify(await response.json());
    },
  },
];

2. Let The Peer Drive The Submission Flow

The peer can ask clarifying questions, call the right tools, and continue the flow after each tool result.

const response = await client.conversations.create({
  messages: [
    {
      role: 'user',
      content: 'I need to upload my taxi receipt from the airport and submit it as a travel expense.',
    },
  ],
  clientTools: expenseTools,
});

if (response.tools?.length) {
  console.log('Executed tools:', response.tools.map((tool) => tool.name));
}

console.log(response.content);

Result

You get a finance widget that:

• Guides employees during receipt submission
• Uses native file picker or camera access through client tools
• Creates structured expense drafts in your own workflow backend
• Avoids rebuilding peer logic separately for web and mobile experiences

---

Products used

This pattern is built on one Cognipeer product.

@cognipeer/sdk

Client SDK

Connect apps to Cognipeer Studio peers, conversations, and client-side tool execution.

The peer itself is authored and maintained in Cognipeer Studio — the SDK only connects your product to it.

Related use cases

Chat · Widget

HR Self-Service Widget

Embed a Studio-powered HR assistant into an employee portal for policy Q&A, leave requests, onboarding help, and document routing.

Chat · Mobile

Mobile Peer Embedded In The App

Run a Studio peer directly inside a mobile app so it can answer users and trigger native app actions such as screen navigation, camera capture, and task execution.

Chat · Widget

Website Product Advisor Widget

Embed a Studio peer into a public website to qualify visitors, answer pricing questions, and trigger product actions without building a separate bot backend.

Chat · Support

Customer Support Bot

Deploy conversational AI with streaming responses, human-in-the-loop escalation, guardrails, and tool transparency.

See every pattern on the use case index, or browse all Cognipeer libraries.