diff --git a/src/App.css b/src/App.css
index f34bf09..6bc035c 100644
--- a/src/App.css
+++ b/src/App.css
@@ -3,10 +3,6 @@
 @tailwind utilities;
 
 
-.map {
-    height: 60vh;
-}
-
 .loader-dots div {
     animation-timing-function: cubic-bezier(0, 1, 1, 0);
 }
diff --git a/src/App.jsx b/src/App.jsx
index f88af72..967e973 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,13 +1,15 @@
 import { useState } from 'react'
 import MapComponent from './components/Map.jsx'
+import Chat from './components/Chat.jsx';
 
 const App = () => {
   let [places, setPlaces] = useState([]);
 
   return (
     <>
-      <div className="w-screen h-screen m-0 p-3 bg-slate-500">
-        <MapComponent locations={places}/>
+      <div className="w-full h-full m-0 p-3 bg-slate-50 flex">
+        <MapComponent locations={places} />
+        <Chat setPlaces={setPlaces} />
       </div>
     </>
   );
diff --git a/src/components/Chat.jsx b/src/components/Chat.jsx
new file mode 100644
index 0000000..dd37f38
--- /dev/null
+++ b/src/components/Chat.jsx
@@ -0,0 +1,51 @@
+import { Textarea } from "@headlessui/react";
+import { useState } from "react";
+import generateAi from '../utils/modelConfig.js';
+
+const Chat = ({ setPlaces }) => {
+
+    const [prompt, setPrompt] = useState("");
+    const [messageSent, setMessageSent] = useState(false);
+
+    const handleChange = (e) => {
+        setPrompt(e.target.value);
+        setMessageSent(false);
+    };
+
+    const handleSubmit = async (e) => {
+        e.preventDefault();
+        console.log(prompt);
+        setPrompt("");
+        setMessageSent(true);
+        setPlaces(await generateAi(prompt))
+    }
+
+    const handleKeyPress = (e) => {
+        if (e.key === 'Enter' && !e.shiftKey) {
+            e.preventDefault();
+            handleSubmit(e)
+        }
+    }
+
+    return (
+        <div className='w-1/5 flex flex-col justify-end'>
+            <section className="border border-slate-200 rounded-md mx-2">
+                <div className="p-2 my-5">
+                    {/* {prompt} */}
+                </div>
+                <form onSubmit={handleSubmit} className="flex items-center">
+                    <Textarea
+                        className='w-4/5 h-20 p-2'
+                        placeholder='Type a message...'
+                        value={prompt}
+                        onChange={handleChange}
+                        onKeyDown={handleKeyPress}
+                    />
+                    <button className='w-auto h-10 mx-auto' type='submit'><svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1.20308 1.04312C1.00481 0.954998 0.772341 1.0048 0.627577 1.16641C0.482813 1.32802 0.458794 1.56455 0.568117 1.75196L3.92115 7.50002L0.568117 13.2481C0.458794 13.4355 0.482813 13.672 0.627577 13.8336C0.772341 13.9952 1.00481 14.045 1.20308 13.9569L14.7031 7.95693C14.8836 7.87668 15 7.69762 15 7.50002C15 7.30243 14.8836 7.12337 14.7031 7.04312L1.20308 1.04312ZM4.84553 7.10002L2.21234 2.586L13.2689 7.50002L2.21234 12.414L4.84552 7.90002H9C9.22092 7.90002 9.4 7.72094 9.4 7.50002C9.4 7.27911 9.22092 7.10002 9 7.10002H4.84553Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button>
+                </form>
+            </section>
+        </div>
+    );
+};
+
+export default Chat;
\ No newline at end of file
diff --git a/src/components/Map.jsx b/src/components/Map.jsx
index 91ee843..29b97e7 100644
--- a/src/components/Map.jsx
+++ b/src/components/Map.jsx
@@ -5,14 +5,16 @@ import { AdvancedMarker, APIProvider, Map, Pin, useMap } from '@vis.gl/react-goo
 import { MarkerClusterer } from '@googlemaps/markerclusterer'
 import { Circle } from './Circle.jsx'
 
+// import {main} from '../utils/modelConfig.js'
+
 const center = {
-    lat: -27.33056,
-    lng: -55.86667,
+  lat: -27.33056,
+  lng: -55.86667,
 };
 
 const MapComponent = ({locations=[]}) => {
     return (
-      <div className="map">
+      <div className="h-full w-4/5 rounded-md">
           <APIProvider
             apiKey={import.meta.env.VITE_GOOGLE_MAPS_API_KEY}
             onLoad={() => console.log("Maps API has loaded.")}
@@ -37,74 +39,74 @@ const MapComponent = ({locations=[]}) => {
     );
 }
 
-const PoiMarkers = ({locations=[]}) => {
-    const map = useMap()
-    const [markers, setMarkers] = useState({})
-    const clusterer = useRef(null)
-    const [circleCenter, setCircleCenter] = useState(null)
-    const handleClick = useCallback(ev => {
-        if (!map) return
-        if (!ev.latLng) return
-        map.panTo(ev.latLng)
-        setCircleCenter(ev.latLng)
-    })
-    // Initialize MarkerClusterer, if the map has changed
-    useEffect(() => {
-        if (!map) return
-        if (!clusterer.current) {
-            clusterer.current = new MarkerClusterer({ map })
-        }
-    }, [map])
+const PoiMarkers = ({ locations = [] }) => {
+  const map = useMap()
+  const [markers, setMarkers] = useState({})
+  const clusterer = useRef(null)
+  const [circleCenter, setCircleCenter] = useState(null)
+  const handleClick = useCallback(ev => {
+    if (!map) return
+    if (!ev.latLng) return
+    map.panTo(ev.latLng)
+    setCircleCenter(ev.latLng)
+  })
+  // Initialize MarkerClusterer, if the map has changed
+  useEffect(() => {
+    if (!map) return
+    if (!clusterer.current) {
+      clusterer.current = new MarkerClusterer({ map })
+    }
+  }, [map])
 
-    // Update markers, if the markers array has changed
-    useEffect(() => {
-        clusterer.current?.clearMarkers()
-        clusterer.current?.addMarkers(Object.values(markers))
-    }, [markers])
+  // Update markers, if the markers array has changed
+  useEffect(() => {
+    clusterer.current?.clearMarkers()
+    clusterer.current?.addMarkers(Object.values(markers))
+  }, [markers])
 
-    const setMarkerRef = (marker, key) => {
-        if (marker && markers[key]) return
-        if (!marker && !markers[key]) return
+  const setMarkerRef = (marker, key) => {
+    if (marker && markers[key]) return
+    if (!marker && !markers[key]) return
 
-        setMarkers(prev => {
-            if (marker) {
-                return { ...prev, [key]: marker }
-            } else {
-                const newMarkers = { ...prev }
-                delete newMarkers[key]
-                return newMarkers
-            }
-        })
-    }
+    setMarkers(prev => {
+      if (marker) {
+        return { ...prev, [key]: marker }
+      } else {
+        const newMarkers = { ...prev }
+        delete newMarkers[key]
+        return newMarkers
+      }
+    })
+  }
 
-    return (
-      <>
-          <Circle
-            radius={800}
-            center={circleCenter}
-            strokeColor={"#0c4cb3"}
-            strokeOpacity={1}
-            strokeWeight={3}
-            fillColor={"#3b82f6"}
-            fillOpacity={0.3}
+  return (
+    <>
+      <Circle
+        radius={800}
+        center={circleCenter}
+        strokeColor={"#0c4cb3"}
+        strokeOpacity={1}
+        strokeWeight={3}
+        fillColor={"#3b82f6"}
+        fillOpacity={0.3}
+      />
+      {locations.map(poi => (
+        <AdvancedMarker
+          title={poi.key}
+          key={poi.key}
+          position={poi.location}
+          clickable={true}
+          onClick={handleClick}
+        >
+          <Pin
+            background={'#FBBC04'}
+            glyphColor={'#1a70fd'}
+            borderColor={'#1a70fd'}
           />
-          {locations.map(poi => (
-            <AdvancedMarker
-              title={poi.key}
-              key={poi.key}
-              position={poi.location}
-              clickable={true}
-              onClick={handleClick}
-            >
-                <Pin
-                  background={'#FBBC04'}
-                  glyphColor={'#1a70fd'}
-                  borderColor={'#1a70fd'}
-                />
-            </AdvancedMarker>
-              ))}
-      </>
-    )
+        </AdvancedMarker>
+      ))}
+    </>
+  )
 }
 
 export default MapComponent;
\ No newline at end of file
diff --git a/src/utils/modelConfig.js b/src/utils/modelConfig.js
new file mode 100644
index 0000000..c65941b
--- /dev/null
+++ b/src/utils/modelConfig.js
@@ -0,0 +1,20 @@
+import OpenAI from "openai";
+
+const openai = new OpenAI({ apiKey: import.meta.env.VITE_OPENAI_API_KEY, dangerouslyAllowBrowser: true });
+
+async function generateAi(prompt) {
+    const completion = await openai.chat.completions.create({
+        messages: [{ "role": "system", "content": "You are a helpful assistant from a tourist webpage in the world." },
+        { "role": "user", "content": "please use this format always for your responses in a json format: [{'name':'Circuito Comercial','type':'Turístico','location':{'lat':-27.3593327,'lng':-55.8489188},'description':'Zona baja de Encarnación, conocida por ser un punto de encuentro para turismo de compras.','address':'Zona baja de Encarnación'}, another one]  " },
+        { "role": "assistant", "content": "Sure i can do that" },
+        { "role": "user", "content": prompt }],
+        model: "gpt-4o-mini",
+        response_format: { type: "json_object" }
+    });
+    let respuesta = JSON.parse(completion.choices[0].message.content)
+    return (respuesta[Object.keys(respuesta)[0]]);
+}
+
+
+
+export default generateAi;
\ No newline at end of file