Skip to content

Commit 6501ad2

Browse files
authored
feat: add HookData for baml react hooks (#1925)
This adds a new helper type called `HookData` to be able to quickly perform NonNullable type passing like this example: ```tsx function Component({ data }: HookData<'TestOpenAi'>) { // data is the NonNull return type of HookOutput<'TestOpenAi'>['data'] } ``` <!-- ELLIPSIS_HIDDEN --> ---- > [!IMPORTANT] > Add `HookData` type for non-nullable data handling in BAML React hooks and update documentation. > > - **TypeScript**: > - Add `HookData` type in `hooks.tsx.j2` and `hooks.tsx` for non-nullable data handling in BAML React hooks. > - **Documentation**: > - Add `hook-data.mdx` for `HookData` type reference and examples. > - Update `docs.yml` to include `HookData` documentation in navigation. > > <sup>This description was created by </sup>[<img alt="Ellipsis" src="https://img.shields.io/badge/Ellipsis-blue?color=175173">](https://www.ellipsis.dev?ref=BoundaryML%2Fbaml&utm_source=github&utm_medium=referral)<sup> for e37ea4d. You can [customize](https://app.ellipsis.dev/BoundaryML/settings/summaries) this summary. It will automatically update as commits are pushed.</sup> <!-- ELLIPSIS_HIDDEN -->
1 parent 527dfe0 commit 6501ad2

4 files changed

Lines changed: 77 additions & 10 deletions

File tree

engine/language_client_codegen/src/typescript/templates/react/hooks.tsx.j2

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -81,6 +81,8 @@ export type HookOutput<FunctionName extends FunctionNames = FunctionNames, Optio
8181
reset: () => void
8282
}
8383

84+
export type HookData<FunctionName extends FunctionNames, Options extends { stream?: boolean } = { stream?: true }> = NonNullable<HookOutput<FunctionName, Options>['data']>;
85+
8486
/**
8587
* Type guard to check if the hook props are configured for streaming mode.
8688
*

fern/03-reference/baml_client/react-nextjs/hook-data.mdx

Lines changed: 61 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

fern/docs.yml

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -24,17 +24,17 @@ ai-chat:
2424
// Optional string fields use ?
2525
// @description is optional, but if you include it, it goes after the field.
2626
name string? @description("The name of the object")
27-
27+
2828
// Arrays of primitives
2929
// arrays cannot be optional.
3030
tags string[]
31-
31+
3232
// Enums must be declared separately and are optional
3333
status MyEnum?
34-
34+
3535
// Union types
3636
type "success" | "error"
37-
37+
3838
// Primitive types
3939
count int
4040
enabled bool
@@ -67,7 +67,7 @@ ai-chat:
6767
// prompt with jinja syntax inside here. with double curly braces for variables.
6868
// make sure to include: {{ ctx.output_format }} in the prompt, which prints the output schema instructions so the LLM returns the output in the correct format (json or string, etc.). DO NOT write the output schema manually.
6969
prompt #"
70-
70+
7171
"#
7272
}
7373
@@ -83,7 +83,7 @@ ai-chat:
8383
8484
<Prompt>
8585
In case you need to write a prompt example:
86-
1. Make sure to include the input in the prompt (even if it's an image) using {{ input }}
86+
1. Make sure to include the input in the prompt (even if it's an image) using {{ input }}
8787
2. Make sure to include {{ ctx.output_format }} in the prompt so the LLM knows how to format the output.
8888
3. You do not need to specify to "answer in JSON format". Only write in the prompt brief instruction, and any other task-specific things to keep in mind for the task.
8989
4. Write a {{ _.role("user") }} tag to indicate where the user's inputs start. So if there's a convo you can write
@@ -162,10 +162,10 @@ ai-chat:
162162
}
163163
164164
class WeatherAPI {
165-
city string @description("the user's city")
165+
city string @description("the user's city")
166166
timeOfDay string @description("As an ISO8601 timestamp")
167167
}
168-
168+
169169
// Function that can return different tool classes
170170
function UseTool(user_messages: ChatMessage[]) -> WeatherAPI | MyOtherAPI {
171171
client CustomSonnet
@@ -190,7 +190,7 @@ ai-chat:
190190
async def main():
191191
tool = b.UseTool("What's the weather like in San Francisco?")
192192
print(tool)
193-
193+
194194
if isinstance(tool, WeatherAPI):
195195
print(f"Weather API called:")
196196
print(f"City: {tool.city}")
@@ -219,7 +219,7 @@ ai-chat:
219219
print(collector.last.usage) # Print usage metrics
220220
print(collector.last.raw_llm_response) # Print final response as string
221221
# since there may be retries, print the last http response received
222-
print(collector.last.calls[-1].http_response)
222+
print(collector.last.calls[-1].http_response)
223223
```
224224
225225
```typescript
@@ -696,6 +696,8 @@ navigation:
696696
path: 03-reference/baml_client/react-nextjs/hook-input.mdx
697697
- page: HookOutput
698698
path: 03-reference/baml_client/react-nextjs/hook-output.mdx
699+
- page: HookData
700+
path: 03-reference/baml_client/react-nextjs/hook-data.mdx
699701
- section: Attributes
700702
contents:
701703
- page: What are attributes?

integ-tests/react/baml_client/react/hooks.tsx

Lines changed: 2 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)