@@ -821,7 +821,9 @@ async function checkUsage() {
821821
822822Execute workflows with real - time streaming responses :
823823
824- ` ` ` typescript
824+ ` ` `
825+
826+ typescript
825827import { SimStudioClient } from 'simstudio-ts-sdk';
826828
827829const client = new SimStudioClient({
@@ -842,23 +844,28 @@ async function executeWithStreaming() {
842844 console.error('Fehler:', error);
843845 }
844846}
847+
845848` ` `
846849
847850The streaming response follows the Server - Sent Events (SSE ) format :
848851
849852` ` `
853+
850854data: {"blockId":"7b7735b9-19e5-4bd6-818b-46aae2596e9f","chunk":"One"}
851855
852856data: {"blockId":"7b7735b9-19e5-4bd6-818b-46aae2596e9f","chunk":", zwei"}
853857
854858data: {"event":"done","success":true,"output":{},"metadata":{"duration":610}}
855859
856860data: [DONE]
861+
857862` ` `
858863
859864** React Streaming Example :**
860865
861- ` ` ` typescript
866+ ` ` `
867+
868+ typescript
862869import { useState, useEffect } from 'react';
863870
864871function StreamingWorkflow() {
@@ -926,6 +933,7 @@ function StreamingWorkflow() {
926933 </div>
927934 );
928935}
936+
929937` ` `
930938
931939## Getting Your API Key
@@ -961,7 +969,9 @@ function StreamingWorkflow() {
961969
962970The SDK is written in TypeScript and provides full type safety :
963971
964- ` ` ` typescript
972+ ` ` `
973+
974+ typescript
965975import {
966976 SimStudioClient,
967977 WorkflowExecutionResult,
@@ -987,4 +997,296 @@ const status: WorkflowStatus = await client.getWorkflowStatus('workflow-id');
987997
988998## License
989999
1000+ Apache - 2.0
1001+
1002+ const reader = response .body ?.getReader ();
1003+ const decoder = new TextDecoder ();
1004+
1005+ while (reader ) {
1006+ const { done , value } = await reader.read();
1007+ if (done ) break;
1008+
1009+ const chunk = decoder .decode (value );
1010+ const lines = chunk .split (' \n\n ' );
1011+
1012+ for (const line of lines ) {
1013+ if (line .startsWith (' data: ' )) {
1014+ const data = line .slice (6 );
1015+ if (data === ' [DONE]' ) {
1016+ setLoading (false );
1017+ break ;
1018+ }
1019+
1020+ try {
1021+ const parsed = JSON .parse (data );
1022+ if (parsed .chunk ) {
1023+ setOutput (prev => prev + parsed .chunk );
1024+ } else if (parsed .event === ' done' ) {
1025+ console .log (' Execution complete:' , parsed .metadata );
1026+ }
1027+ } catch (e ) {
1028+ // Skip invalid JSON
1029+ }
1030+ }
1031+ }
1032+ }
1033+ };
1034+
1035+ return (
1036+ <div >
1037+ < button onClick = {executeStreaming } disabled = {loading }>
1038+ {loading ? ' Generiere...' : ' Streaming starten' }
1039+ < / button >
1040+ < div style = {{ whiteSpace : ' pre-wrap' }}> {output }< / div >
1041+ < / div >
1042+ );
1043+ }
1044+ ` ` `
1045+
1046+ ## Getting Your API Key
1047+
1048+ <Steps>
1049+ <Step title="Log in to Sim">
1050+ Navigate to [Sim](https://sim.ai) and log in to your account.
1051+ </Step>
1052+ <Step title="Open your workflow">
1053+ Navigate to the workflow you want to execute programmatically.
1054+ </Step>
1055+ <Step title="Deploy your workflow">
1056+ Click on "Deploy" to deploy your workflow if it hasn't been deployed yet.
1057+ </Step>
1058+ <Step title="Create or select an API key">
1059+ During the deployment process, select or create an API key.
1060+ </Step>
1061+ <Step title="Copy the API key">
1062+ Copy the API key to use in your TypeScript/JavaScript application.
1063+ </Step>
1064+ </Steps>
1065+
1066+ <Callout type="warning">
1067+ Keep your API key secure and never commit it to version control. Use environment variables or secure configuration management.
1068+ </Callout>
1069+
1070+ ## Requirements
1071+
1072+ - Node.js 16+
1073+ - TypeScript 5.0+ (for TypeScript projects)
1074+
1075+ ## TypeScript Support
1076+
1077+ The SDK is written in TypeScript and provides full type safety:
1078+
1079+ ` ` ` typescript
1080+ import {
1081+ SimStudioClient ,
1082+ WorkflowExecutionResult ,
1083+ WorkflowStatus ,
1084+ SimStudioError
1085+ } from ' simstudio-ts-sdk' ;
1086+
1087+ // Typsichere Client-Initialisierung
1088+ const client : SimStudioClient = new SimStudioClient ({
1089+ apiKey: process .env .SIM_API_KEY !
1090+ });
1091+
1092+ // Typsichere Workflow-Ausführung
1093+ const result : WorkflowExecutionResult = await client .executeWorkflow (' workflow-id' , {
1094+ input: {
1095+ message: ' Hallo, TypeScript!'
1096+ }
1097+ });
1098+
1099+ // Typsichere Statusprüfung
1100+ const status : WorkflowStatus = await client .getWorkflowStatus (' workflow-id' );
1101+ ` ` `
1102+
1103+ ## License
1104+
1105+ Apache-2.0 + limits.usage.limit.toFixed(2));
1106+ console.log('Plan:', limits.usage.plan);
1107+
1108+ const percentUsed = (limits.usage.currentPeriodCost / limits.usage.limit) * 100;
1109+ console.log('Usage: ' + percentUsed.toFixed(1) + '%');
1110+
1111+ if (percentUsed > 80) {
1112+ console.warn('⚠️ Warning: You are approaching your usage limit!');
1113+ }
1114+ } catch (error) {
1115+ console.error('Error checking usage:', error);
1116+ }
1117+ }
1118+
1119+ checkUsage();
1120+ ` ` `
1121+
1122+ ### Streaming - Workflow - Ausf ührung
1123+
1124+ F ühren Sie Workflows mit Echtzeit - Streaming - Antworten aus :
1125+
1126+ ` ` ` typescript
1127+ import { SimStudioClient } from 'simstudio-ts-sdk';
1128+
1129+ const client = new SimStudioClient({
1130+ apiKey: process.env.SIM_API_KEY!
1131+ });
1132+
1133+ async function executeWithStreaming() {
1134+ try {
1135+ // Enable streaming for specific block outputs
1136+ const result = await client.executeWorkflow('workflow-id', {
1137+ input: { message: 'Count to five' },
1138+ stream: true,
1139+ selectedOutputs: ['agent1.content'] // Use blockName.attribute format
1140+ });
1141+
1142+ console.log('Workflow result:', result);
1143+ } catch (error) {
1144+ console.error('Error:', error);
1145+ }
1146+ }
1147+ ` ` `
1148+
1149+ Die Streaming - Antwort folgt dem Server - Sent Events (SSE ) Format :
1150+
1151+ ` ` `
1152+ data: {"blockId":"7b7735b9-19e5-4bd6-818b-46aae2596e9f","chunk":"One"}
1153+
1154+ data: {"blockId":"7b7735b9-19e5-4bd6-818b-46aae2596e9f","chunk":", two"}
1155+
1156+ data: {"event":"done","success":true,"output":{},"metadata":{"duration":610}}
1157+
1158+ data: [DONE]
1159+ ` ` `
1160+
1161+ ** React Streaming - Beispiel :**
1162+
1163+ ` ` ` typescript
1164+ import { useState, useEffect } from 'react';
1165+
1166+ function StreamingWorkflow() {
1167+ const [output, setOutput] = useState('');
1168+ const [loading, setLoading] = useState(false);
1169+
1170+ const executeStreaming = async () => {
1171+ setLoading(true);
1172+ setOutput('');
1173+
1174+ // IMPORTANT: Make this API call from your backend server, not the browser
1175+ // Never expose your API key in client-side code
1176+ const response = await fetch('https://sim.ai/api/workflows/WORKFLOW_ID/execute', {
1177+ method: 'POST',
1178+ headers: {
1179+ 'Content-Type': 'application/json',
1180+ 'X-API-Key': process.env.SIM_API_KEY! // Server-side environment variable only
1181+ },
1182+ body: JSON.stringify({
1183+ message: 'Generate a story',
1184+ stream: true,
1185+ selectedOutputs: ['agent1.content']
1186+ })
1187+ });
1188+
1189+ const reader = response.body?.getReader();
1190+ const decoder = new TextDecoder();
1191+
1192+ while (reader) {
1193+ const { done, value } = await reader.read();
1194+ if (done) break;
1195+
1196+ const chunk = decoder.decode(value);
1197+ const lines = chunk.split('\n\n ');
1198+
1199+ for (const line of lines) {
1200+ if (line.startsWith('data: ')) {
1201+ const data = line.slice(6);
1202+ if (data === '[DONE]') {
1203+ setLoading(false);
1204+ break;
1205+ }
1206+
1207+ try {
1208+ const parsed = JSON.parse(data);
1209+ if (parsed.chunk) {
1210+ setOutput(prev => prev + parsed.chunk);
1211+ } else if (parsed.event === 'done') {
1212+ console.log('Execution complete:', parsed.metadata);
1213+ }
1214+ } catch (e) {
1215+ // Skip invalid JSON
1216+ }
1217+ }
1218+ }
1219+ }
1220+ };
1221+
1222+ return (
1223+ <div>
1224+ <button onClick={executeStreaming} disabled={loading}>
1225+ {loading ? 'Generating...' : 'Start Streaming'}
1226+ </button>
1227+ <div style={{ whiteSpace: 'pre-wrap' }}>{output}</div>
1228+ </div>
1229+ );
1230+ }
1231+ ` ` `
1232+
1233+ ## Ihren API - Schl üssel erhalten
1234+
1235+ <Steps >
1236+ < Step title = " Bei Sim anmelden" >
1237+ Navigieren Sie zu [Sim ](https :// sim.ai) und melden Sie sich bei Ihrem Konto an.
1238+ < / Step >
1239+ < Step title = " Öffnen Sie Ihren Workflow" >
1240+ Navigieren Sie zu dem Workflow , den Sie programmatisch ausf ühren m öchten .
1241+ < / Step >
1242+ < Step title = " Deployen Sie Ihren Workflow" >
1243+ Klicken Sie auf " Deploy" , um Ihren Workflow zu deployen , falls dies noch nicht geschehen ist .
1244+ < / Step >
1245+ < Step title = " Erstellen oder wählen Sie einen API-Schlüssel" >
1246+ W ählen Sie w ährend des Deployment - Prozesses einen API - Schl üssel aus oder erstellen Sie einen neuen .
1247+ < / Step >
1248+ < Step title = " Kopieren Sie den API-Schlüssel" >
1249+ Kopieren Sie den API - Schl üssel zur Verwendung in Ihrer TypeScript / JavaScript - Anwendung .
1250+ < / Step >
1251+ < / Steps >
1252+
1253+ < Callout type = " warning" >
1254+ Halte deinen API - Schl üssel sicher und committe ihn niemals in die Versionskontrolle . Verwende Umgebungsvariablen oder sicheres Konfigurationsmanagement .
1255+ < / Callout >
1256+
1257+ ## Anforderungen
1258+
1259+ - Node .js 16 +
1260+ - TypeScript 5.0 + (f ür TypeScript - Projekte )
1261+
1262+ ## TypeScript - Unterst ützung
1263+
1264+ Das SDK ist in TypeScript geschrieben und bietet vollst ändige Typsicherheit :
1265+
1266+ ` ` ` typescript
1267+ import {
1268+ SimStudioClient,
1269+ WorkflowExecutionResult,
1270+ WorkflowStatus,
1271+ SimStudioError
1272+ } from 'simstudio-ts-sdk';
1273+
1274+ // Type-safe client initialization
1275+ const client: SimStudioClient = new SimStudioClient({
1276+ apiKey: process.env.SIM_API_KEY!
1277+ });
1278+
1279+ // Type-safe workflow execution
1280+ const result: WorkflowExecutionResult = await client.executeWorkflow('workflow-id', {
1281+ input: {
1282+ message: 'Hello, TypeScript!'
1283+ }
1284+ });
1285+
1286+ // Type-safe status checking
1287+ const status: WorkflowStatus = await client.getWorkflowStatus('workflow-id');
1288+ ` ` `
1289+
1290+ ## Lizenz
1291+
9901292Apache - 2.0
0 commit comments