Build a Generative UI Company Research agent using Thesys
C1Component
usage can be found
here.Add a system prompt
Add tools
zod
along with zod-to-json-schema
to provide the schema for the tool.Create a backend endpoint
C1Chat
component, the C1Component
leaves it up to the user to manage state to provide greater flexibility. Therefore, the frontend implementation can be broken
down into the following parts:
Implementing state management
query
- The search query entered by the userc1Response
- For storing the response sent by the C1 APIisLoading
- For tracking when a request is in progressabortController
- For managing request cancellationuseUIState
hook can be used to manage the state and provide a clean interface to UI code for accessing and modifying the state. Here’s an example implementation:Setting up the API call
makeApiCall
can be implemented as follows:Implementing the UI
C1Component
for rendering the Generative UI response.C1Component
in a ThemeProvider
to ensure that the rendered components are styled correctly.Here’s an example code block implementing the entire UI, with the important sections highlighted:Expand to see the code for the Loader component
Test it out!
C1Component
is now complete. Try running it and search for a few companies on the /home
route!