keytrustee/setup.html at main · githubcustomerserviceistrash/keytrustee · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, user-scalable=no"
    />
    <title>Key Trustee Quick Start Guide</title>
    <link rel="stylesheet" href="assets/css/main.css" />
    <link
      href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/themes/prism.min.css"
      rel="stylesheet"
    />
    <style>
      @font-face {
        font-family: "HyliaSerifBeta";
        src: url("assets/webfonts/HyliaSerifBeta-Regular.otf")
          format("opentype");
      }

      .logo-svg {
        width: 100%;
        height: auto;
        max-width: 960px;
        margin: 0 auto;
      }

      .logo-text {
        font-family: "HyliaSerifBeta", sans-serif;
        font-size: 64px;
        fill: url(#gold-gradient);
        stroke: black;
        stroke-width: 3px;
        paint-order: stroke fill;
      }

      .content {
        max-width: 960px;
        margin: 0 auto;
        padding: 2em;
      }

      .steps {
        margin-bottom: 2em;
      }

      .steps h3 {
        margin-bottom: 0.5em;
      }

      .steps p {
        margin: 0.5em 0 1em;
      }

      .toggle-section {
        cursor: pointer;
        margin: 0;
        background-color: #f7f7f7;
        padding: 0.5em;
      }

      .toggle-container {
        margin-bottom: 1em;
      }

      .toggle-content {
        display: none;
        margin: 0;
        background-color: #e9e9e9;
        border-left: 5px solid #007bff;
      }
    </style>
  </head>
  <body class="homepage is-preload">
    <div id="page-wrapper">
      <!-- Header -->
      <section id="header" class="header-background">
        <!-- Logo -->
        <svg
          viewBox="0 0 500 100"
          preserveAspectRatio="xMinYMin meet"
          class="logo-svg"
        >
          <defs>
            <linearGradient
              id="gold-gradient"
              x1="0%"
              y1="0%"
              x2="0%"
              y2="100%"
            >
              <stop offset="0%" style="stop-color: #ffd700; stop-opacity: 1" />
              <stop
                offset="100%"
                style="stop-color: #a86d00; stop-opacity: 1"
              />
            </linearGradient>
          </defs>

          <text x="75" y="75" class="logo-text">Key Trustee</text>
        </svg>
        <div class="container">
          <div class="row">
            <div class="col-xl-12" style="text-align: left">
              <h1 style="text-align: center">Quick Start</h1>
              <hr />
              <div class="steps">
                <h3>For Application Integrators:</h3>
                <div>
                  We've built a
                  <a href="https://github.com/sibyllinesoft/keytrustee-example"
                    >demo project</a
                  >
                  you can use to see a working Key Trustee integration.
                </div>
                <ol>
                  <li>
                    Log into
                    <a href="https://app.keytrustee.org/">Key Trustee</a> and
                    create an application on the Applications screen in the
                    developer section with your application's name, allowed ip
                    addresses and OAuth client IDs then set the application to
                    active. Record the application ID for later use.
                  </li>
                  <li>
                    Update your service to use the Key Trustee API endpoint:
                    <br /><em>https://app.keytrustee.org/api/completions</em>
                  </li>
                  <li>
                    Add the following headers to your requests:
                    <ul>
                      <li>
                        <strong>Authorization:</strong> Bearer
                        <code>{idToken}</code>
                      </li>
                      <li>
                        <strong>X-Auth-Token:</strong> The user's auth token.
                      </li>
                      <li>
                        <strong>X-KeyTrustee-Application-Id:</strong> The
                        application ID (as a number) for your application in Key
                        Trustee.
                      </li>
                    </ul>
                  </li>
                  <li>
                    Use the user's OAuth id token in the Authorization header
                    instead of your API key. Optionally, use the
                    <em>strong_model</em> and <em>weak_model</em> parameters to
                    optimize model selection based on the prompt.
                  </li>
                  <li>
                    Optional: give the user a link to Key Trustee with your
                    application_id as a query parameter to make it easy for them
                    to configure your application. For example:<br /><em
                      >http://app.keytrustee.org?application_id={your_application_id}</em
                    >
                  </li>
                  <li>
                    Optional: we cache token verifications for 2 hours, so if
                    your application has long lasting sessions, you will need to
                    periodically retrieve new tokens for the user. There are two
                    ways to deal with this:
                    <ol>
                      <li>
                        You can use a refresh token to periodically generate new
                        id and access tokens. This method is less secure for
                        users and shouldn't be used unless you already have a
                        reason for refresh tokens.
                      </li>
                      <li>
                        We send a 401 "Expired Token" response, you can catch
                        that in the client and pop up a small modal dialog
                        prompting the user to re-authenticate in response. That
                        modal prompt can trigger an OAuth popup, enabling you to
                        get new tokens without losing application state.
                      </li>
                    </ol>

                    response
                  </li>
                </ol>

                <!-- Non-Streaming Python Example -->
                <div
                  class="toggle-section"
                  onclick="toggleContent('python-code')"
                >
                  <strong>Show Python Example (Non-Streaming)</strong>
                </div>
                <div class="toggle-container">
                  <div id="python-code" class="toggle-content">
                    <pre><code class="language-python">
import requests

url = "https://app.keytrustee.org/"
headers = {
    "Authorization": f"Bearer {idToken}",
    "X-Auth-Token": authToken,
    "X-KeyTrustee-Application-Id": 123,  # Replace with your actual application ID
    "Content-Type": "application/json"
}
data = {
    "messages": [{"role": "user", "content": inputText}],
    "model": "gpt-4o-mini-2024-07-18",
    "stream": False
}

response = requests.post(url, headers=headers, json=data)
print(response.json())
                    </code></pre>
                  </div>
                </div>

                <!-- Non-Streaming JavaScript Example -->
                <div
                  class="toggle-section"
                  onclick="toggleContent('javascript-code')"
                >
                  <strong>Show JavaScript Example (Non-Streaming)</strong>
                </div>
                <div class="toggle-container">
                  <div id="javascript-code" class="toggle-content">
                    <pre><code class="language-javascript">
const response = await fetch("https://app.keytrustee.org/api/completions", {
  method: "POST",
  headers: {
    Authorization: `Bearer ${idToken}`,
    "X-Auth-Token": authToken,
    "X-KeyTrustee-Application-Id": 2,  // Replace with your actual application ID
    "Content-Type": "application/json",
  },
  body: JSON.stringify({
    messages: [{ role: "user", content: inputText }],
    model: "gpt-4o-mini-2024-07-18",
    stream: false,
  }),
});

const result = await response.json();
console.log(result);
                    </code></pre>
                  </div>
                </div>

                <!-- Streaming Python Example -->
                <div
                  class="toggle-section"
                  onclick="toggleContent('python-streaming-code')"
                >
                  <strong>Show Python Example (Streaming)</strong>
                </div>
                <div class="toggle-container">
                  <div id="python-streaming-code" class="toggle-content">
                    <pre><code class="language-python">
import requests
from time import sleep

url = "https://app.keytrustee.org/api/completions"
headers = {
    "Authorization": f"Bearer {idToken}",
    "X-Auth-Token": authToken,
    "X-KeyTrustee-Application-Id": 123,  # Replace with your actual application ID
    "Content-Type": "application/json"
}
data = {
    "messages": [{"role": "user", "content": inputText}],
    "model": "gpt-4o-mini-2024-07-18",
    "stream": True
}

with requests.post(url, headers=headers, json=data, stream=True) as response:
    if response.status_code != 200:
        raise Exception(f"HTTP error! status: {response.status_code}")
    buffer = ""
    for chunk in response.iter_content(chunk_size=None):
        if chunk:
            buffer += chunk.decode('utf-8')
            while "}{" in buffer:
                json_str, buffer = buffer.split("}{", 1)
                json_str += "}"
                try:
                    chunk_data = json.loads(json_str)
                    if "choices" in chunk_data:
                        content = chunk_data['choices'][0]['delta'].get('content', '')
                        print(content, end='', flush=True)
                except Exception as e:
                    print(f"Error parsing JSON: {e}")
    if buffer:
        chunk_data = json.loads(buffer)
        content = chunk_data['choices'][0]['delta'].get('content', '')
        print(content)
                    </code></pre>
                  </div>
                </div>

                <!-- Streaming JavaScript Example -->
                <div
                  class="toggle-section"
                  onclick="toggleContent('javascript-streaming-code')"
                >
                  <strong>Show JavaScript Example (Streaming)</strong>
                </div>
                <div class="toggle-container">
                  <div id="javascript-streaming-code" class="toggle-content">
                    <pre><code class="language-javascript">
async function startChatStreaming() {
  const inputText = document.getElementById("inputText").value;
  const outputText = document.getElementById("outputText");

  const idToken = localStorage.getItem("idToken");
  const authToken = localStorage.getItem("authToken");

  const response = await fetch("https://app.keytrustee.org/api/completions", {
    method: "POST",
    headers: {
      Authorization: `Bearer ${idToken}`,
      "X-Auth-Token": authToken,
      "X-KeyTrustee-Application-Id": "123",  // Replace with your actual application ID
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      messages: [{ role: "user", content: inputText }],
      model: "gpt-4o-mini-2024-07-18",
      stream: true,
    }),
  });

  if (!response.ok) {
    throw new Error(`HTTP error! status: ${response.status}`);
  }

  const reader = response.body.getReader();
  const decoder = new TextDecoder("utf-8");
  let buffer = "";

  while (true) {
    const { done, value } = await reader.read();
    if (done) break;

    buffer += decoder.decode(value, { stream: true });

    let boundary;
    while ((boundary = buffer.indexOf("}{")) !== -1) {
      const jsonString = buffer.substring(0, boundary + 1).trim();
      buffer = buffer.slice(boundary + 1);

      try {
        const chunk = JSON.parse(jsonString);
        if (chunk.choices && chunk.choices[0] && chunk.choices[0].delta.content) {
          outputText.textContent += chunk.choices[0].delta.content;
        }
      } catch (e) {
        console.error("Error parsing JSON:", e);
      }
    }
  }

  if (buffer.length > 0) {
    try {
      const chunk = JSON.parse(buffer.trim());
      if (chunk.choices[0].delta.content) {
        outputText.textContent += chunk.choices[0].delta.content;
      }
    } catch (e) {
      console.error("Error parsing JSON:", e);
    }
  }
}
                    </code></pre>
                  </div>
                </div>
              </div>
              <div class="steps">
                <h3>For Users:</h3>
                <ol>
                  <li>
                    Log into
                    <a href="https://app.keytrustee.org/">Key Trustee</a> with
                    your primary identity provider.
                  </li>
                  <li>
                    Add your credit card information to purchase credits. Adding
                    credits is optional, but without credits you'll need API
                    keys to use AI services, and you'll need to override the
                    default model for your applications to ensure they use a
                    configured API.
                  </li>
                  <li>
                    Add keys for the services you wish to use on the Provider
                    screen.
                  </li>
                  <li>
                    Make sure your keys are always available in your
                    applicationos by adding any additional identity providers on
                    the Identities page. If you don't do this, applications that
                    don't support authentication with your primary identity
                    provider won't be able to use AI.
                  </li>
                  <li>
                    Enable AI in your applications on the Application screen of
                    the user section. If you didn't add credits, make sure to
                    select a model from a provider that you've configured an API
                    key with.
                  </li>
                </ol>
                Support is available via
                <a
                  href="https://discord.com/channels/1282344086430421060/1282344140818087978"
                  >Discord</a
                >.
              </div>
            </div>
          </div>
        </div>
      </section>

      <!-- Footer -->
      <section id="footer">
        <div class="container">
          <div id="copyright">
            &copy; 2024 Sibylline Software. All rights reserved.
          </div>
        </div>
      </section>
    </div>

    <!-- Scripts -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/prism.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/components/prism-python.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/components/prism-javascript.min.js"></script>
    <script>
      function toggleContent(id) {
        var content = document.getElementById(id);
        if (content.style.display === "none" || content.style.display === "") {
          content.style.display = "block";
        } else {
          content.style.display = "none";
        }
      }
    </script>
  </body>
</html>