Skip to main content

Project Settings

Project settings configure how your frontend applications connect to Distri Cloud. The key component is the Client ID, which allows browser-based applications to invoke agents securely.

Client ID​

A Client ID is a public identifier that enables frontend applications to call Distri APIs directly from the browser.

Creating a Client ID​

  1. Go to app.distri.dev/settings/project
  2. Click Generate Client ID
  3. Copy the generated ID

Using the Client ID​

import { DistriProvider, Chat } from '@distri/react';

function App() {
  return (
    <DistriProvider config={{ clientId: 'YOUR_CLIENT_ID' }}>
      <Chat agentId="my_agent" />
    </DistriProvider>
  );
}

Allowed Origins (CORS)​

Control which domains can use your Client ID.

Configuring Origins​

  1. Go to Project Settings
  2. Find Allowed Origins
  3. Add your domains (e.g., https://myapp.com)
  4. Click Save

Origin Format​

  • Include the protocol: https://myapp.com
  • Include port if non-standard: http://localhost:3000
  • No trailing slash

Examples​

https://myapp.com
https://app.mycompany.com
http://localhost:3000
http://localhost:5173

Allow All Origins​

Leave the list empty to allow requests from any origin. This is useful for development but not recommended for production.

warning

Restricting origins prevents unauthorized sites from using your Client ID and consuming your quota.

Client ID vs API Key​

FeatureClient IDAPI Key
VisibilityPublic (in browser)Secret (server only)
AccessRead + invoke onlyFull account access
CORSRespects allowed originsN/A
Use caseFrontend appsBackend services

When to Use Client ID​

  • React/Vue/Angular applications
  • Embedded chat widgets
  • Public-facing web apps
  • Mobile apps (with origin restrictions)

When to Use API Key​

  • Node.js backends
  • Cron jobs and webhooks
  • Server-to-server integrations
  • Admin scripts

Permissions​

Client IDs have limited permissions:

ActionAllowed
Invoke agents✅
List agents✅
Get agent details✅
Create threads✅
Send messages✅
Read thread history✅
Modify agents❌
Access secrets❌
Manage API keys❌

Regenerating Credentials​

If you need to invalidate an existing Client ID:

  1. Go to Project Settings
  2. Click Regenerate
  3. Update your applications with the new ID
  4. The old ID stops working immediately

Multiple Environments​

For separate dev/staging/prod configurations:

  1. Create separate Distri accounts for each environment
  2. Each account has its own Client ID
  3. Use environment variables in your app:
const config = {
  clientId: process.env.REACT_APP_DISTRI_CLIENT_ID
};

<DistriProvider config={config}>
  <Chat agentId="my_agent" />
</DistriProvider>

Troubleshooting​

"CORS error" in browser console​

  1. Check that your domain is in Allowed Origins
  2. Ensure the protocol matches exactly (http vs https)
  3. Include the port for non-standard ports

"Unauthorized" errors​

  1. Verify the Client ID is correct
  2. Check that you're calling an agent you own or is public
  3. Ensure your account is active

Requests from localhost not working​

Add http://localhost:3000 (or your port) to Allowed Origins.