Mobile Peer Embedded In The App

Overview

A common mobile pattern is not just chat. It is a peer living inside the app and helping the user complete tasks without leaving the native flow. For example, a field sales app can expose a Studio peer that drafts follow-up messages, opens account screens, or starts a visit summary workflow.

This keeps Studio focused on peer behavior while your mobile app remains responsible for device capabilities and navigation.

When to reach for this recipe

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

Architecture

Client SDK works in browser and Node-style environments, making it suitable for React Native bridges or mobile web shells. The peer comes from Studio, but the app decides which native actions are safe to expose as client tools.

Typical client tools in mobile include opening a screen, scanning a barcode, capturing a photo, or saving a draft locally for offline sync.

1. Initialize The Mobile Integration

Create the client in your mobile app shell and fetch the peer bound to the app channel.

import { CognipeerClient } from '@cognipeer/sdk';
 
const client = new CognipeerClient({
  token: mobileSession.cognipeerToken,
  hookId: mobileSession.channelHookId,
  apiUrl: 'https://api.cognipeer.com/v1',
});
 
const peer = await client.peers.get();
console.log('Connected mobile peer:', peer.name);

2. Map Native Capabilities As Client Tools

The peer can now decide when to invoke native functionality without owning that logic itself.

const mobileTools = [
  {
    type: 'function',
    function: {
      name: 'openCustomerDetailScreen',
      description: 'Navigate to a customer detail screen inside the mobile app',
      parameters: {
        type: 'object',
        properties: {
          customerId: { type: 'string' },
        },
        required: ['customerId'],
      },
    },
    implementation: async ({ customerId }) => {
      navigation.navigate('CustomerDetail', { customerId });
      return 'Customer detail screen opened';
    },
  },
  {
    type: 'function',
    function: {
      name: 'captureVisitPhoto',
      description: 'Open the camera and attach a visit photo to the current record',
      parameters: {
        type: 'object',
        properties: {
          visitId: { type: 'string' },
        },
        required: ['visitId'],
      },
    },
    implementation: async ({ visitId }) => {
      const asset = await openNativeCamera();
      await uploadVisitPhoto(visitId, asset);
      return 'Visit photo uploaded';
    },
  },
];

3. Continue The Conversation Across App Actions

Use a normal conversation flow. The peer calls tools when it needs to move the user through the mobile experience.

const firstTurn = await client.conversations.create({
  messages: [
    {
      role: 'user',
      content: 'Open Acme Corp, show the latest opportunity, and help me prepare a follow-up note.',
    },
  ],
  clientTools: mobileTools,
});
 
const nextTurn = await client.conversations.sendMessage({
  conversationId: firstTurn.conversationId,
  messages: [{ role: 'user', content: 'Attach the latest visit photo as well.' }],
  clientTools: mobileTools,
});
 
console.log(nextTurn.content);

Result

You get a mobile-native assistant that:

- Keeps the Studio peer inside your app experience - Calls native device capabilities through client tools - Guides users through real app tasks instead of standalone chat - Works well for field teams, sales reps, ops users, and task-heavy mobile flows

All recipes Suggest a change

Overview

When to reach for this recipe

Architecture

1. Initialize The Mobile Integration

2. Map Native Capabilities As Client Tools

3. Continue The Conversation Across App Actions

Result

Related recipes

HR Self-Service Widget

Expense Upload & Approval Widget

Website Product Advisor Widget

Customer Support Bot