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

Feature	Client ID	API Key
Visibility	Public (in browser)	Secret (server only)
Access	Read + invoke only	Full account access
CORS	Respects allowed origins	N/A
Use case	Frontend apps	Backend 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:

Action	Allowed
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.