@tambo-ai/react 0.19.6 → 0.19.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md
CHANGED
|
@@ -25,74 +25,135 @@ You get clean React hooks that integrate seamlessly with your codebase.
|
|
|
25
25
|
[](https://github.com/tambo-ai/tambo/commits/main)
|
|
26
26
|
[](https://discord.gg/dJNvPEHth6)
|
|
27
27
|
|
|
28
|
-
|
|
28
|
+
## Installation
|
|
29
|
+
|
|
30
|
+
```bash
|
|
31
|
+
npm install @tambo-ai/react
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
## Quick Start
|
|
29
35
|
|
|
30
|
-
|
|
36
|
+
Use our template:
|
|
31
37
|
|
|
32
38
|
```bash
|
|
33
|
-
npx tambo
|
|
39
|
+
git clone https://github.com/tambo-ai/tambo-template.git && cd tambo-template && npm install && npx tambo init
|
|
40
|
+
|
|
41
|
+
npm run dev
|
|
34
42
|
```
|
|
35
43
|
|
|
36
|
-
|
|
44
|
+
or try adding it to your existing project:
|
|
37
45
|
|
|
38
|
-
```
|
|
46
|
+
```bash
|
|
47
|
+
npx tambo full-send
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
## Basic Usage
|
|
51
|
+
|
|
52
|
+
1. Add tambo ai to your React app with a simple provider pattern:
|
|
53
|
+
|
|
54
|
+
```jsx
|
|
39
55
|
import { TamboProvider } from "@tambo-ai/react";
|
|
40
56
|
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
57
|
+
function App() {
|
|
58
|
+
return (
|
|
59
|
+
<TamboProvider apiKey="your-api-key">
|
|
60
|
+
<YourApp />
|
|
61
|
+
</TamboProvider>
|
|
62
|
+
);
|
|
63
|
+
}
|
|
44
64
|
```
|
|
45
65
|
|
|
46
|
-
|
|
66
|
+
2. Displaying a message thread:
|
|
47
67
|
|
|
48
|
-
```
|
|
49
|
-
import
|
|
68
|
+
```jsx
|
|
69
|
+
import { useTambo, useTamboThreadInput } from "@tambo-ai/react";
|
|
70
|
+
|
|
71
|
+
function ChatInterface() {
|
|
72
|
+
const { thread, sendThreadMessage } = useTambo();
|
|
73
|
+
const { value, setValue, submit } = useTamboThreadInput();
|
|
50
74
|
|
|
51
|
-
function App() {
|
|
52
75
|
return (
|
|
53
76
|
<div>
|
|
54
|
-
{/*
|
|
55
|
-
<
|
|
77
|
+
{/* Display messages */}
|
|
78
|
+
<div>
|
|
79
|
+
{thread.messages.map((message, index) => (
|
|
80
|
+
<div key={index} className={`message ${message.role}`}>
|
|
81
|
+
<div>{message.content}</div>
|
|
82
|
+
{message.component && message.component.renderedComponent}
|
|
83
|
+
</div>
|
|
84
|
+
))}
|
|
85
|
+
</div>
|
|
86
|
+
|
|
87
|
+
{/* Input form */}
|
|
88
|
+
<form
|
|
89
|
+
onSubmit={(e) => {
|
|
90
|
+
e.preventDefault();
|
|
91
|
+
submit();
|
|
92
|
+
}}
|
|
93
|
+
className="input-form"
|
|
94
|
+
>
|
|
95
|
+
<input
|
|
96
|
+
type="text"
|
|
97
|
+
value={value}
|
|
98
|
+
onChange={(e) => setValue(e.target.value)}
|
|
99
|
+
placeholder="Type your message..."
|
|
100
|
+
/>
|
|
101
|
+
<button type="submit">Send</button>
|
|
102
|
+
</form>
|
|
56
103
|
</div>
|
|
57
104
|
);
|
|
58
105
|
}
|
|
59
106
|
```
|
|
60
107
|
|
|
61
|
-
|
|
108
|
+
## Core Features
|
|
62
109
|
|
|
63
|
-
|
|
110
|
+
- **Specialized hooks for specific needs:**
|
|
64
111
|
|
|
65
|
-
|
|
112
|
+
- `useTambo` - Primary entrypoint for the Tambo React SDK
|
|
113
|
+
- `useTamboThreadInput` - Input state and submission
|
|
114
|
+
- `useTamboSuggestions` - AI-powered message suggestions
|
|
115
|
+
- `useTamboThreadList` - Conversation management
|
|
116
|
+
- `useTamboComponentState` - AI-generated component state
|
|
117
|
+
- `useTamboThread` - Access to current thread context
|
|
66
118
|
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
119
|
+
- **Component registration for AI-generated UI**
|
|
120
|
+
- **Tool integration for your data sources**
|
|
121
|
+
- **Streaming responses for real-time interactions**
|
|
70
122
|
|
|
71
|
-
##
|
|
123
|
+
## Component Registration
|
|
72
124
|
|
|
73
|
-
|
|
125
|
+
Define which components your AI assistant can use to respond to users by passing them to the TamboProvider:
|
|
74
126
|
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
127
|
+
```jsx
|
|
128
|
+
import { TamboProvider } from "@tambo-ai/react";
|
|
129
|
+
import { WeatherCard } from "./components/WeatherCard";
|
|
78
130
|
import { z } from "zod";
|
|
79
131
|
|
|
80
|
-
//
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
132
|
+
// Define your components
|
|
133
|
+
const components = [
|
|
134
|
+
{
|
|
135
|
+
name: "WeatherCard",
|
|
136
|
+
description: "A component that displays weather information",
|
|
137
|
+
component: WeatherCard,
|
|
138
|
+
propsSchema: z.object({
|
|
139
|
+
temperature: z.number(),
|
|
140
|
+
condition: z.string(),
|
|
141
|
+
location: z.string(),
|
|
89
142
|
}),
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
143
|
+
},
|
|
144
|
+
];
|
|
145
|
+
|
|
146
|
+
// Pass them to the provider
|
|
147
|
+
function App() {
|
|
148
|
+
return (
|
|
149
|
+
<TamboProvider apiKey="your-api-key" components={components}>
|
|
150
|
+
<YourApp />
|
|
151
|
+
</TamboProvider>
|
|
152
|
+
);
|
|
153
|
+
}
|
|
93
154
|
```
|
|
94
155
|
|
|
95
|
-
You can also use `z.describe()` for extra prompting to the
|
|
156
|
+
You can also use `z.describe()` for extra prompting to the AI:
|
|
96
157
|
|
|
97
158
|
```tsx
|
|
98
159
|
import { z } from "zod";
|
|
@@ -110,26 +171,15 @@ schema = z.object({
|
|
|
110
171
|
});
|
|
111
172
|
```
|
|
112
173
|
|
|
113
|
-
|
|
114
|
-
Note: Use either propsSchema OR propsDefinition, not both
|
|
115
|
-
|
|
116
|
-
```tsx
|
|
117
|
-
registerComponent({
|
|
118
|
-
component: DataChart,
|
|
119
|
-
name: "DataChart",
|
|
120
|
-
description: "Displays data as a chart",
|
|
121
|
-
propsDefinition: {
|
|
122
|
-
data: "{ labels: string[]; values: number[] }",
|
|
123
|
-
type: "'bar' | 'line' | 'pie'",
|
|
124
|
-
},
|
|
125
|
-
});
|
|
126
|
-
```
|
|
127
|
-
|
|
128
|
-
### 2. Tool Integration
|
|
174
|
+
## Tool Integration
|
|
129
175
|
|
|
130
176
|
Connect your data sources without writing complex integration code:
|
|
131
177
|
|
|
132
|
-
```
|
|
178
|
+
```jsx
|
|
179
|
+
import { TamboProvider } from "@tambo-ai/react";
|
|
180
|
+
import { WeatherCard } from "./components/WeatherCard";
|
|
181
|
+
import { z } from "zod";
|
|
182
|
+
|
|
133
183
|
// Define a tool with Zod schema
|
|
134
184
|
const dataTool = {
|
|
135
185
|
name: "fetchData",
|
|
@@ -143,9 +193,44 @@ const dataTool = {
|
|
|
143
193
|
.returns(z.any()),
|
|
144
194
|
};
|
|
145
195
|
|
|
146
|
-
//
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
196
|
+
// Define your components with associated tools
|
|
197
|
+
const components = [
|
|
198
|
+
{
|
|
199
|
+
name: "WeatherCard",
|
|
200
|
+
description: "A component that displays weather information",
|
|
201
|
+
component: WeatherCard,
|
|
202
|
+
propsSchema: z.object({
|
|
203
|
+
temperature: z.number(),
|
|
204
|
+
condition: z.string(),
|
|
205
|
+
location: z.string(),
|
|
206
|
+
}),
|
|
207
|
+
associatedTools: [dataTool], // Associate the tool with the component
|
|
208
|
+
},
|
|
209
|
+
];
|
|
210
|
+
|
|
211
|
+
// Pass them to the provider
|
|
212
|
+
function App() {
|
|
213
|
+
return (
|
|
214
|
+
<TamboProvider apiKey="your-api-key" components={components}>
|
|
215
|
+
<YourApp />
|
|
216
|
+
</TamboProvider>
|
|
217
|
+
);
|
|
218
|
+
}
|
|
151
219
|
```
|
|
220
|
+
|
|
221
|
+
## Resources
|
|
222
|
+
|
|
223
|
+
- [Full Documentation](https://tambo.co/docs)
|
|
224
|
+
- [Showcase Documentation](../showcase/README.md)
|
|
225
|
+
|
|
226
|
+
## License
|
|
227
|
+
|
|
228
|
+
MIT License - see the [LICENSE](../LICENSE) file for details.
|
|
229
|
+
|
|
230
|
+
## Join the Community
|
|
231
|
+
|
|
232
|
+
We're building tools for the future of user interfaces. Your contributions matter.
|
|
233
|
+
|
|
234
|
+
**[Star this repo](https://github.com/tambo-ai/tambo)** to support our work.
|
|
235
|
+
|
|
236
|
+
**[Join our Discord](https://discord.gg/dJNvPEHth6)** to connect with other developers.
|
|
@@ -54,9 +54,9 @@ const tambo_thread_provider_1 = require("./tambo-thread-provider");
|
|
|
54
54
|
* @returns The TamboProvider component
|
|
55
55
|
*/
|
|
56
56
|
const TamboProvider = ({ children, tamboUrl, apiKey, components, environment }) => {
|
|
57
|
-
//
|
|
57
|
+
// Should only be used in browser
|
|
58
58
|
if (typeof window === "undefined") {
|
|
59
|
-
|
|
59
|
+
console.error("TamboProvider must be used within a browser");
|
|
60
60
|
}
|
|
61
61
|
return (react_1.default.createElement(tambo_client_provider_1.TamboClientProvider, { tamboUrl: tamboUrl, apiKey: apiKey, environment: environment },
|
|
62
62
|
react_1.default.createElement(tambo_registry_provider_1.TamboRegistryProvider, { components: components },
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tambo-provider.js","sourceRoot":"","sources":["../../src/providers/tambo-provider.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AACb,2EAA2E;AAC3E,8CAA4C;AAC5C,+CAA4E;AAC5E,mEAMiC;AACjC,yEAIoC;AACpC,uEAGmC;AACnC,mEAIiC;AAEjC;;;;;;;;;;GAUG;AACI,MAAM,aAAa,GAEtB,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,UAAU,EAAE,WAAW,EAAE,EAAE,EAAE;IAC9D,
|
|
1
|
+
{"version":3,"file":"tambo-provider.js","sourceRoot":"","sources":["../../src/providers/tambo-provider.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AACb,2EAA2E;AAC3E,8CAA4C;AAC5C,+CAA4E;AAC5E,mEAMiC;AACjC,yEAIoC;AACpC,uEAGmC;AACnC,mEAIiC;AAEjC;;;;;;;;;;GAUG;AACI,MAAM,aAAa,GAEtB,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,UAAU,EAAE,WAAW,EAAE,EAAE,EAAE;IAC9D,iCAAiC;IACjC,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE,CAAC;QAClC,OAAO,CAAC,KAAK,CAAC,6CAA6C,CAAC,CAAC;IAC/D,CAAC;IAED,OAAO,CACL,8BAAC,2CAAmB,IAClB,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,MAAM,EACd,WAAW,EAAE,WAAW;QAExB,8BAAC,+CAAqB,IAAC,UAAU,EAAE,UAAU;YAC3C,8BAAC,2CAAmB;gBAClB,8BAAC,iDAAsB;oBACrB,8BAAC,sBAAsB,QAAE,QAAQ,CAA0B,CACpC,CACL,CACA,CACJ,CACvB,CAAC;AACJ,CAAC,CAAC;AAvBW,QAAA,aAAa,iBAuBxB;AAKW,QAAA,YAAY,GAAG,IAAA,qBAAa,EACvC,EAAuB,CACxB,CAAC;AAEF;;;;;;GAMG;AACH,MAAM,sBAAsB,GAAgC,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE;IAC3E,MAAM,OAAO,GAAG,IAAA,sCAAc,GAAE,CAAC;IACjC,MAAM,MAAM,GAAG,IAAA,sCAAc,GAAE,CAAC;IAChC,MAAM,WAAW,GAAG,IAAA,2CAAmB,GAAE,CAAC;IAC1C,MAAM,iBAAiB,GAAG,IAAA,4CAAiB,GAAE,CAAC;IAE9C,OAAO,CACL,8BAAC,oBAAY,CAAC,QAAQ,IACpB,KAAK,EAAE;YACL,MAAM;YACN,WAAW;YACX,GAAG,iBAAiB;YACpB,GAAG,OAAO;SACX,IAEA,QAAQ,CACa,CACzB,CAAC;AACJ,CAAC,CAAC;AAEF;;;;;;GAMG;AACI,MAAM,QAAQ,GAAG,GAAG,EAAE;IAC3B,OAAO,IAAA,kBAAU,EAAC,oBAAY,CAAC,CAAC;AAClC,CAAC,CAAC;AAFW,QAAA,QAAQ,YAEnB","sourcesContent":["\"use client\";\n// Use to workaround some TurboPack issues. Normally this is auto-detected.\nimport \"@tambo-ai/typescript-sdk/shims/web\";\nimport React, { PropsWithChildren, createContext, useContext } from \"react\";\nimport {\n TamboClientContextProps,\n TamboClientProvider,\n TamboClientProviderProps,\n useTamboClient,\n useTamboQueryClient,\n} from \"./tambo-client-provider\";\nimport {\n TamboComponentContextProps,\n TamboComponentProvider,\n useTamboComponent,\n} from \"./tambo-component-provider\";\nimport {\n TamboRegistryProvider,\n TamboRegistryProviderProps,\n} from \"./tambo-registry-provider\";\nimport {\n TamboThreadContextProps,\n TamboThreadProvider,\n useTamboThread,\n} from \"./tambo-thread-provider\";\n\n/**\n * The TamboProvider gives full access to the whole Tambo API. This includes the\n * TamboAI client, the component registry, and the current thread context.\n * @param props - The props for the TamboProvider\n * @param props.children - The children to wrap\n * @param props.tamboUrl - The URL of the Tambo API\n * @param props.apiKey - The API key for the Tambo API\n * @param props.components - The components to register\n * @param props.environment - The environment to use for the Tambo API\n * @returns The TamboProvider component\n */\nexport const TamboProvider: React.FC<\n PropsWithChildren<TamboClientProviderProps & TamboRegistryProviderProps>\n> = ({ children, tamboUrl, apiKey, components, environment }) => {\n // Should only be used in browser\n if (typeof window === \"undefined\") {\n console.error(\"TamboProvider must be used within a browser\");\n }\n\n return (\n <TamboClientProvider\n tamboUrl={tamboUrl}\n apiKey={apiKey}\n environment={environment}\n >\n <TamboRegistryProvider components={components}>\n <TamboThreadProvider>\n <TamboComponentProvider>\n <TamboCompositeProvider>{children}</TamboCompositeProvider>\n </TamboComponentProvider>\n </TamboThreadProvider>\n </TamboRegistryProvider>\n </TamboClientProvider>\n );\n};\ntype TamboContextProps = TamboClientContextProps &\n TamboThreadContextProps &\n TamboComponentContextProps;\n\nexport const TamboContext = createContext<TamboContextProps>(\n {} as TamboContextProps,\n);\n\n/**\n * TamboCompositeProvider is a provider that combines the TamboClient,\n * TamboThread, and TamboComponent providers\n * @param props - The props for the TamboCompositeProvider\n * @param props.children - The children to wrap\n * @returns The wrapped component\n */\nconst TamboCompositeProvider: React.FC<PropsWithChildren> = ({ children }) => {\n const threads = useTamboThread();\n const client = useTamboClient();\n const queryClient = useTamboQueryClient();\n const componentRegistry = useTamboComponent();\n\n return (\n <TamboContext.Provider\n value={{\n client,\n queryClient,\n ...componentRegistry,\n ...threads,\n }}\n >\n {children}\n </TamboContext.Provider>\n );\n};\n\n/**\n * The useTambo hook provides access to the Tambo API. This is the primary entrypoint\n * for the Tambo React SDK.\n *\n * This includes the TamboAI client, the component registry, and the current thread context.\n * @returns The Tambo API\n */\nexport const useTambo = () => {\n return useContext(TamboContext);\n};\n"]}
|
|
@@ -18,9 +18,9 @@ import { TamboThreadProvider, useTamboThread, } from "./tambo-thread-provider";
|
|
|
18
18
|
* @returns The TamboProvider component
|
|
19
19
|
*/
|
|
20
20
|
export const TamboProvider = ({ children, tamboUrl, apiKey, components, environment }) => {
|
|
21
|
-
//
|
|
21
|
+
// Should only be used in browser
|
|
22
22
|
if (typeof window === "undefined") {
|
|
23
|
-
|
|
23
|
+
console.error("TamboProvider must be used within a browser");
|
|
24
24
|
}
|
|
25
25
|
return (React.createElement(TamboClientProvider, { tamboUrl: tamboUrl, apiKey: apiKey, environment: environment },
|
|
26
26
|
React.createElement(TamboRegistryProvider, { components: components },
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tambo-provider.js","sourceRoot":"","sources":["../../src/providers/tambo-provider.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;AACb,2EAA2E;AAC3E,OAAO,oCAAoC,CAAC;AAC5C,OAAO,KAAK,EAAE,EAAqB,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC5E,OAAO,EAEL,mBAAmB,EAEnB,cAAc,EACd,mBAAmB,GACpB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAEL,sBAAsB,EACtB,iBAAiB,GAClB,MAAM,4BAA4B,CAAC;AACpC,OAAO,EACL,qBAAqB,GAEtB,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAEL,mBAAmB,EACnB,cAAc,GACf,MAAM,yBAAyB,CAAC;AAEjC;;;;;;;;;;GAUG;AACH,MAAM,CAAC,MAAM,aAAa,GAEtB,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,UAAU,EAAE,WAAW,EAAE,EAAE,EAAE;IAC9D,
|
|
1
|
+
{"version":3,"file":"tambo-provider.js","sourceRoot":"","sources":["../../src/providers/tambo-provider.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;AACb,2EAA2E;AAC3E,OAAO,oCAAoC,CAAC;AAC5C,OAAO,KAAK,EAAE,EAAqB,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC5E,OAAO,EAEL,mBAAmB,EAEnB,cAAc,EACd,mBAAmB,GACpB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAEL,sBAAsB,EACtB,iBAAiB,GAClB,MAAM,4BAA4B,CAAC;AACpC,OAAO,EACL,qBAAqB,GAEtB,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAEL,mBAAmB,EACnB,cAAc,GACf,MAAM,yBAAyB,CAAC;AAEjC;;;;;;;;;;GAUG;AACH,MAAM,CAAC,MAAM,aAAa,GAEtB,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,UAAU,EAAE,WAAW,EAAE,EAAE,EAAE;IAC9D,iCAAiC;IACjC,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE,CAAC;QAClC,OAAO,CAAC,KAAK,CAAC,6CAA6C,CAAC,CAAC;IAC/D,CAAC;IAED,OAAO,CACL,oBAAC,mBAAmB,IAClB,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,MAAM,EACd,WAAW,EAAE,WAAW;QAExB,oBAAC,qBAAqB,IAAC,UAAU,EAAE,UAAU;YAC3C,oBAAC,mBAAmB;gBAClB,oBAAC,sBAAsB;oBACrB,oBAAC,sBAAsB,QAAE,QAAQ,CAA0B,CACpC,CACL,CACA,CACJ,CACvB,CAAC;AACJ,CAAC,CAAC;AAKF,MAAM,CAAC,MAAM,YAAY,GAAG,aAAa,CACvC,EAAuB,CACxB,CAAC;AAEF;;;;;;GAMG;AACH,MAAM,sBAAsB,GAAgC,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE;IAC3E,MAAM,OAAO,GAAG,cAAc,EAAE,CAAC;IACjC,MAAM,MAAM,GAAG,cAAc,EAAE,CAAC;IAChC,MAAM,WAAW,GAAG,mBAAmB,EAAE,CAAC;IAC1C,MAAM,iBAAiB,GAAG,iBAAiB,EAAE,CAAC;IAE9C,OAAO,CACL,oBAAC,YAAY,CAAC,QAAQ,IACpB,KAAK,EAAE;YACL,MAAM;YACN,WAAW;YACX,GAAG,iBAAiB;YACpB,GAAG,OAAO;SACX,IAEA,QAAQ,CACa,CACzB,CAAC;AACJ,CAAC,CAAC;AAEF;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,GAAG,EAAE;IAC3B,OAAO,UAAU,CAAC,YAAY,CAAC,CAAC;AAClC,CAAC,CAAC","sourcesContent":["\"use client\";\n// Use to workaround some TurboPack issues. Normally this is auto-detected.\nimport \"@tambo-ai/typescript-sdk/shims/web\";\nimport React, { PropsWithChildren, createContext, useContext } from \"react\";\nimport {\n TamboClientContextProps,\n TamboClientProvider,\n TamboClientProviderProps,\n useTamboClient,\n useTamboQueryClient,\n} from \"./tambo-client-provider\";\nimport {\n TamboComponentContextProps,\n TamboComponentProvider,\n useTamboComponent,\n} from \"./tambo-component-provider\";\nimport {\n TamboRegistryProvider,\n TamboRegistryProviderProps,\n} from \"./tambo-registry-provider\";\nimport {\n TamboThreadContextProps,\n TamboThreadProvider,\n useTamboThread,\n} from \"./tambo-thread-provider\";\n\n/**\n * The TamboProvider gives full access to the whole Tambo API. This includes the\n * TamboAI client, the component registry, and the current thread context.\n * @param props - The props for the TamboProvider\n * @param props.children - The children to wrap\n * @param props.tamboUrl - The URL of the Tambo API\n * @param props.apiKey - The API key for the Tambo API\n * @param props.components - The components to register\n * @param props.environment - The environment to use for the Tambo API\n * @returns The TamboProvider component\n */\nexport const TamboProvider: React.FC<\n PropsWithChildren<TamboClientProviderProps & TamboRegistryProviderProps>\n> = ({ children, tamboUrl, apiKey, components, environment }) => {\n // Should only be used in browser\n if (typeof window === \"undefined\") {\n console.error(\"TamboProvider must be used within a browser\");\n }\n\n return (\n <TamboClientProvider\n tamboUrl={tamboUrl}\n apiKey={apiKey}\n environment={environment}\n >\n <TamboRegistryProvider components={components}>\n <TamboThreadProvider>\n <TamboComponentProvider>\n <TamboCompositeProvider>{children}</TamboCompositeProvider>\n </TamboComponentProvider>\n </TamboThreadProvider>\n </TamboRegistryProvider>\n </TamboClientProvider>\n );\n};\ntype TamboContextProps = TamboClientContextProps &\n TamboThreadContextProps &\n TamboComponentContextProps;\n\nexport const TamboContext = createContext<TamboContextProps>(\n {} as TamboContextProps,\n);\n\n/**\n * TamboCompositeProvider is a provider that combines the TamboClient,\n * TamboThread, and TamboComponent providers\n * @param props - The props for the TamboCompositeProvider\n * @param props.children - The children to wrap\n * @returns The wrapped component\n */\nconst TamboCompositeProvider: React.FC<PropsWithChildren> = ({ children }) => {\n const threads = useTamboThread();\n const client = useTamboClient();\n const queryClient = useTamboQueryClient();\n const componentRegistry = useTamboComponent();\n\n return (\n <TamboContext.Provider\n value={{\n client,\n queryClient,\n ...componentRegistry,\n ...threads,\n }}\n >\n {children}\n </TamboContext.Provider>\n );\n};\n\n/**\n * The useTambo hook provides access to the Tambo API. This is the primary entrypoint\n * for the Tambo React SDK.\n *\n * This includes the TamboAI client, the component registry, and the current thread context.\n * @returns The Tambo API\n */\nexport const useTambo = () => {\n return useContext(TamboContext);\n};\n"]}
|