> For the complete documentation index, see [llms.txt](https://lamatic.ai/llms.txt).

# Using Lamatic SDK with React

This guide demonstrates how to integrate the Lamatic SDK with React applications to execute flows.

## Setup

First, install the Lamatic SDK in your React project:

```bash
npm install lamatic
```

## Environment Configuration

Create a `.env.local` file in your project root with your Lamatic credentials:

```
LAMATIC_PROJECT_ENDPOINT=your-project-endpoint
LAMATIC_FLOW_ID=your-flow-id
LAMATIC_PROJECT_ID=your-project-id
LAMATIC_PROJECT_API_KEY=your-project-api-key
```

## Basic Integration

### Create a Lamatic Client

Create a utility file to initialize the Lamatic client:

```tsx
// utils.ts

export const lamaticClient = new Lamatic({
    projectId: process.env.LAMATIC_PROJECT_ID,
    apiKey: process.env.LAMATIC_PROJECT_API_KEY,
    endpoint: process.env.LAMATIC_PROJECT_ENDPOINT,
  })
```

### Using the Client in a React Component
Now, you can use the Lamatic client in your React components to execute flows or agents.

<Tabs items={['Flow']}>
<Tab>
```tsx
// App.tsx

function Page() {
const executeFlow = async () => {
    const response = await lamaticClient.executeFlow(process.env.LAMATIC_FLOW_ID, {
        prompt: 'hello',
    })
    console.log(response)
}

return (
    <div>
        <button onClick={executeFlow}>Execute Flow</button>
    </div>
)
}
export default Page
```
</Tab>
</Tabs>

When the button is clicked, the component will execute the flow and log the response to the console.