sdk creation in front-web and internal-api-harness

internal-api-harness/src/dataconnect-generated/.guides/config.json

@@ -0,0 +1,9 @@
+{
+  "description": "A set of guides for interacting with the generated firebase dataconnect sdk",
+  "mcpServers": {
+    "firebase": {
+      "command": "npx",
+      "args": ["-y", "firebase-tools@latest", "experimental:mcp"]
+    }
+  }
+}

internal-api-harness/src/dataconnect-generated/.guides/setup.md

@@ -0,0 +1,62 @@
+# Setup
+
+If the user hasn't already installed the SDK, always run the user's node package manager of choice, and install the package in the directory ../package.json.
+For more information on where the library is located, look at the connector.yaml file.
+
+```ts
+import { initializeApp } from 'firebase/app';
+
+initializeApp({
+  // fill in your project config here using the values from your Firebase project or from the `firebase_get_sdk_config` tool from the Firebase MCP server.
+});
+```
+
+Then, you can run the SDK as needed.
+```ts
+import { ... } from '@dataconnect/generated';
+```
+
+
+
+
+## React
+### Setup
+
+The user should make sure to install the `@tanstack/react-query` package, along with `@tanstack-query-firebase/react` and `firebase`.
+
+Then, they should initialize Firebase:
+```ts
+import { initializeApp } from 'firebase/app';
+initializeApp(firebaseConfig); /* your config here. To generate this, you can use the `firebase_sdk_config` MCP tool */
+```
+
+Then, they should add a `QueryClientProvider` to their root of their application.
+
+Here's an example:
+
+```ts
+import { initializeApp } from 'firebase/app';
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+
+const firebaseConfig = {
+  /* your config here. To generate this, you can use the `firebase_sdk_config` MCP tool */
+};
+
+// Initialize Firebase
+const app = initializeApp(firebaseConfig);
+
+// Create a TanStack Query client instance
+const queryClient = new QueryClient();
+
+function App() {
+  return (
+    // Provide the client to your App
+    <QueryClientProvider client={queryClient}>
+      <MyApplication />
+    </QueryClientProvider>
+  )
+}
+
+render(<App />, document.getElementById('root'));
+```
+

internal-api-harness/src/dataconnect-generated/.guides/usage.md

@@ -0,0 +1,69 @@
+# Basic Usage
+
+Always prioritize using a supported framework over using the generated SDK
+directly. Supported frameworks simplify the developer experience and help ensure
+best practices are followed.
+
+
+
+
+### React
+For each operation, there is a wrapper hook that can be used to call the operation.
+
+Here are all of the hooks that get generated:
+```ts
+import { useCreateEvent, useListEvents } from '@dataconnect/generated/react';
+// The types of these hooks are available in react/index.d.ts
+
+const { data, isPending, isSuccess, isError, error } = useCreateEvent(createEventVars);
+
+const { data, isPending, isSuccess, isError, error } = useListEvents();
+
+```
+
+Here's an example from a different generated SDK:
+
+```ts
+import { useListAllMovies } from '@dataconnect/generated/react';
+
+function MyComponent() {
+  const { isLoading, data, error } = useListAllMovies();
+  if(isLoading) {
+    return <div>Loading...</div>
+  }
+  if(error) {
+    return <div> An Error Occurred: {error} </div>
+  }
+}
+
+// App.tsx
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import MyComponent from './my-component';
+
+function App() {
+  const queryClient = new QueryClient();
+  return <QueryClientProvider client={queryClient}>
+    <MyComponent />
+  </QueryClientProvider>
+}
+```
+
+
+
+## Advanced Usage
+If a user is not using a supported framework, they can use the generated SDK directly.
+
+Here's an example of how to use it with the first 5 operations:
+
+```js
+import { createEvent, listEvents } from '@dataconnect/generated';
+
+
+// Operation CreateEvent:  For variables, look at type CreateEventVars in ../index.d.ts
+const { data } = await CreateEvent(dataConnect, createEventVars);
+
+// Operation listEvents: 
+const { data } = await ListEvents(dataConnect);
+
+
+```